V minulém příspěvku jsme začali vytvořením struktury souborů a adresářů pro náš prokládaný pokladní formulář pomocí React a Flask.
Když je vše připraveno, můžeme začít vytvářet komponenty React, které budeme potřebovat ke zpracování plateb.
Instalace knihovny reakcí pro stripe
To je velmi jednoduché, vše, co musíme udělat, je:
npm install --save @stripe/react-stripe-js @stripe/stripe-js
A je to, náš package.json byl aktualizován a knihovna byla nainstalována.
Přidání Bootstrapu (aby to nevypadalo tak ošklivě)
Bootstrap je frontendový rámec, jehož účelem je stylování našich aplikací nebo webových stránek.
Existuje mnoho způsobů, jak jej přidat do projektu React, ale ten nejjednodušší a ten, který použijeme, je přidání CDN do indexu naší aplikace.
Ale nehodláme to přidávat do index.js, ale uvnitř veřejné složky najdeme soubor s názvem index.html a do něj přidáme (bootstrap) CDN[https://getbootstrap.com/ docs/4.5 /getting-started/introduction/]
Jako každý soubor css je i tento součástí značky <link>. a uvnitř <head> stránka je něco takového.
Úprava struktury souboru
Když vytvoříme nový projekt reakce pomocí create-react-app to nám dává počáteční strukturu souboru, v tomto případě tuto strukturu trochu upravíme.
- Přejděte do složky src
- Ponechte pouze soubor index.js
Když tyto soubory smažeme a pokusíme se spustit projekt s npm start Určitě budeme mít několik chyb a ty budou způsobeny importem souborů, které již neexistují, takže tento soubor index.js upravíme následujícím způsobem.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'));
Vytváření komponent
Nyní budeme mít stále chybu importu, protože v tomto okamžiku komponenta App ještě neexistuje. takže jej vytvoříme na stejné úrovni jako index.js
Pro celou tuto sérii tutoriálů budeme používat functional componets což nám říká React, že by to mělo fungovat, pokud je někdo z vás zvyklý používat ClassComponents je velmi snadné migrovat z jednoho do druhého.
Nyní, pokud komponenta App
// App.js
import React from 'react'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
const App = () => {
const stripePromice = loadStripe('stripe_public_key')
return (
<div className="container">
<div className="row">
<Elements stripe={stripePromice}>
</Elements>
</div>
</div>
)
}
export default App
Dobře... vše vypadá velmi dobře, ale co děláme, začínáme od zdrojové struktury functional component to, co děláme, je import Elements proužkové knihovny, která nám umožní používat objekty Element pruhu na jakékoli starší komponentě.
A další věc, kterou děláme, je autentizace pomocí našeho pruhovaného veřejného klíče pomocí funkce loadStripe který se načte asynchronně do skriptu Stripe.js .
Toto ověření je předáno jako podpora komponentě Element. a připraveno, můžeme použít pruh.
Vytvoření prvku CardElement
Uvnitř složky src vytvoříme novou složku s názvem components a uvnitř toho vytvoříme soubor s názvem CheckoutForm.js a napíšeme následující:
// CheckoutForm.js
import React from 'react'
import CardSection from './CardSection'
const CheckoutForm = () => {
return (
<div className="col-lg-12">
<form>
<h1>Formulario de Pago</h1>
<div className="form-group">
<CardSection/>
</div>
<button className="btn btn-primary">Pay</button>
</form>
</div>
)
}
export default CheckoutForm
Tato komponenta nám pomůže doplnit všechny údaje platebního formuláře, které budeme potřebovat, tedy jméno klienta, email atd... Vše, co o klientovi chceme vědět a samozřejmě údaje o jeho kartě k provedení platby. inkaso.
V tomto případě budu vyžadovat pouze údaje o kartě, ale všechny klientské informace budou požadovány z této komponenty.
V tuto chvíli jsme ještě nevytvořili komponentu CardSection. tak pojďme na to.
Uvnitř složky komponent vytvoříme soubor s názvem CardSection.js , do tohoto souboru zapíšeme následující.
import React, { useState } from 'react'
import { CardElement } from '@stripe/react-stripe-js'
import '../css/stripe_form.css'
const CardSection = () => {
const [state, setState] = useState({
'errorMessage': ''
})
const card_element_options = {
style: {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4",
},
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a",
},
}
}
const handleOnChanage = (event) => {
setState({errorMessage: ''})
if (event.error) {
setState({error: true, errorMessage:event.error.message})
}
}
return (
<>
<CardElement options={card_element_options} onChange={handleOnChanage}/>
<div className="card-errors">
<p>{state.errorMessage}</p>
</div>
</>
)
}
export default CardSection
Dobře, pojďme k vysvětlení.
V této komponentě importujeme z pruhu komponentu CardElement .
Stripe nám poskytuje mnoho Elements vytvořit náš platební formulář, ale CardElement Z mého pohledu je to jeden z nejpoužívanějších, protože zahrnuje všechna data karty, která potřebujeme, v jediném vstupu, aniž bychom museli dělat mnoho kliknutí nebo cokoli jiného, každopádně zde nechám zbytek prvků, které poskytujeme proužky. https://stripe.com/docs/stripe-js
Nyní také přidáváme některé výchozí možnosti stylu do CardElement .
Pokud je v datech karty nějaká chyba, ověřujeme také pomocí prop onChange komponenty CardElement , pro toto ověření používáme React hook useState takže když dojde k chybě v objektu události komponenty CardElement aktualizujeme state a vykreslit jej ve značce
Zde je dokumentace pruhů, kde můžeme vidět všechny rekvizity, které můžeme předat pruhovým prvkům
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
V této komponentě také přidáváme některé styly pomocí CSS, které ponechám v Repo projektu, abych sem nepsal celý kód.
Když jsou všechny komponenty připraveny, zbývá nám pouze importovat komponentu CardForm uvnitř App .
<div className="container">
<div className="row">
<Elements stripe={stripePromice}>
{/* Load the checkout form */}
<CheckoutForm/>
</Elements>
</div>
</div>
a máme připravenou formu.
Zatím nepřijímá platby, ale to uděláme v následujících příspěvcích.
Nechám vám projekt Repo of the React, kde můžete vidět veškerý kód nebo jej naklonovat, abyste jej viděli, jak se používá na vašich počítačích.
https://github.com/leonardoAlonso/StripeForm