Toto je adaptace několika úryvků z knihy Scotta Hasbroucka „The Node.js Engineer's Guide to Stripe“ – nyní k dispozici! s 10% slevou pro čtenáře Davida Walshe s kódem:WALSH10
Čím se budeme zabývat
- Nahraďte Checkout.js za Stripe.js
- Odstranění tlačítka Checkout.js
- Přidání povinných polí Stripe
- Integrace akce formuláře s Stripe.js
Když poprvé vytvoříte integraci Stripe, výhodou Checkout.js oproti Stripe.js je jeho snadná integrace a rychlost do fungující aplikace. Neumožňuje však přidávat další vstupní pole. V mnoha situacích budete chtít shromáždit další hodnoty, jako je množství, rozbalovací seznam produktů, dodací adresa atd., a odeslat je pomocí stejného formuláře, který shromažďuje platební údaje. Nebo možná opravdu jen chcete jednotný styl se zbytkem vaší aplikace, který nevyžaduje modální dialog pro vyskakování. Menší frontendová knihovna Stripe, nazvaná Stripe.js, neobsahuje žádné prvky uživatelského rozhraní, ale má všechny funkce rozhraní API na straně klienta pro generování platebních tokenů. Přizpůsobení platebního formuláře nebude vyžadovat žádné změny backendových funkcí vaší aplikace Node.js, protože frontend bude stále generovat stejný platební token.
Stručný přehled funkcí Checkout.js
Pokud jste nikdy předtím Stripe neintegrovali, nebo je to už nějakou dobu, co jste to udělali, pojďme si zopakovat, jaký je účel přední části Stripe! Stripe je API jako služba, takže vaše první otázka může znít:"Proč proboha API vyžaduje použití front-end knihovny JavaScript?" Skvělá otázka! Jak si dokážete představit, manipulace s informacemi o kreditních kartách vašich uživatelů online je potenciálně riskantní záležitost – právě proto existuje bezpečnostní standard, který musíte dodržovat, abyste mohli přijímat platby online. Standardy digitálního zabezpečení odvětví platebních karet (neboli PCI DSS, běžně jen zkráceně PCI) výslovně zakazují přímé ukládání čísel kreditních karet obchodníkům – pokud nejste schopni „chránit uložená data držitelů karet“. Vynalézavostí Stripe bylo vybudovat jednoduchý frontendový mechanismus, který vaším jménem shromažďuje platební údaje držitele karty, takže se nikdy ani nedotkne vašeho serveru – což výrazně usnadňuje shodu s PCI-DSS . To je podrobněji popsáno v mé knize The Node.js Engineer's Guide to Stripe.
Checkout.js spojuje mechanismus shromažďování dat držitelů karet s krásným a snadno integrovatelným modálním vyskakovacím formulářem, který shromažďuje platební údaje od uživatele. Toto je fantastická možnost, jak sestavit velmi rychlou integraci Stripe, ale nebude plynule plynout se zbytkem vašeho uživatelského rozhraní. Zde přichází na řadu Stripe.js. Rozhraní API stále nabízí metody JavaScriptu pro odesílání platebních údajů přímo do Stripe a přijímání platebního tokenu reprezentujícího platbu.
Instalace Stripe.js
Seznam dokumentace Stripe obsahuje značku Script, která načte Stripe.js s nejnovější verzí. Může být lákavé nainstalovat skript pomocí Bower spuštěním bower install --save stripe.js=https://js.stripe.com/v2/ , ale mějte na paměti, že to není oficiálně schváleno společností Stripe. Není zde žádná zmínka o tom, jak často aktualizují knihovny na straně klienta, takže se vám může nečekaně něco zlomit. Takže vaší první možností je jednoduše načíst knihovnu umístěním značky skriptu Stripe do souboru HTML, ve kterém je připojena vaše aplikace React:
<html>
<head>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
</head>
<body style="margin: 0px;">
<div id="main"></div>
<script src="react-bundle.js"></script>
</body>
<html>
hodně lepší možností by bylo dynamicky načíst tento skript pomocí ReactScriptLoader! Vzhledem k tomu, že aplikace React je aplikace s jednou stránkou, pravděpodobně existuje velké množství vaší aplikace, které nemá platební formulář. Proč načítat Stripe.js pro celou stránku, když jej můžeme jednoduše načíst pouze pro komponent platebního formuláře? Vytvořme prázdnou komponentu React pro náš platební formulář a dynamicky načteme Stripe.js (povšimněte si, že tato metoda by fungovala stejně dobře pro Checkout.js!):
var React = require('react');
var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin;
var PaymentForm = React.createClass({
mixins: [ ReactScriptLoaderMixin ],
getInitialState: function() {
return {
stripeLoading: true,
stripeLoadingError: false
};
},
getScriptURL: function() {
return 'https://js.stripe.com/v2/';
},
onScriptLoaded: function() {
if (!PaymentForm.getStripeToken) {
// Put your publishable key here
Stripe.setPublishableKey('pk_test_xxxx');
this.setState({ stripeLoading: false, stripeLoadingError: false });
}
},
onScriptError: function() {
this.setState({ stripeLoading: false, stripeLoadingError: true });
},
render: function() {
if (this.state.stripeLoading) {
return <div>Loading</div>;
}
else if (this.state.stripeLoadingError) {
return <div>Error</div>;
}
else {
return <div>Loaded!</div>;
}
}
});
module.exports = PaymentForm;
ReactScriptLoaderMixin začne načítat vzdálený skript a po jeho úspěšném načtení nebo při dosažení chyby vyvolá jeden ze dvou posluchačů událostí. Jakmile je skript úspěšně načten, můžeme nastavit veřejný klíč pro Stripe.js. To nám zase dává podmíněnou funkci renderování pro tři stavy načítání, chyba nebo načtení! Upozorňujeme, že tuto metodu lze také použít k načtení souboru Checkout.js.
Sestavení formuláře
Nyní máme načtenou komponentu React s Stripe.js, začněme vytvářet vlastní platební formulář. Abychom nám mohli vygenerovat platební token, potřebujeme pro Stripe shromáždit minimálně čtyři hodnoty:číslo kreditní karty, měsíc expirace, rok vypršení platnosti a cvc.
var React = require('react');
var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin;
var PaymentForm = React.createClass({
mixins: [ ReactScriptLoaderMixin ],
getInitialState: function() {
return {
stripeLoading: true,
stripeLoadingError: false,
submitDisabled: false,
paymentError: null,
paymentComplete: false,
token: null
};
},
getScriptURL: function() {
return 'https://js.stripe.com/v2/';
},
onScriptLoaded: function() {
if (!PaymentForm.getStripeToken) {
// Put your publishable key here
Stripe.setPublishableKey('pk_test_xxxx');
this.setState({ stripeLoading: false, stripeLoadingError: false });
}
},
onScriptError: function() {
this.setState({ stripeLoading: false, stripeLoadingError: true });
},
onSubmit: function(event) {
var self = this;
event.preventDefault();
this.setState({ submitDisabled: true, paymentError: null });
// send form here
Stripe.createToken(event.target, function(status, response) {
if (response.error) {
self.setState({ paymentError: response.error.message, submitDisabled: false });
}
else {
self.setState({ paymentComplete: true, submitDisabled: false, token: response.id });
// make request to your server here!
}
});
},
render: function() {
if (this.state.stripeLoading) {
return <div>Loading</div>;
}
else if (this.state.stripeLoadingError) {
return <div>Error</div>;
}
else if (this.state.paymentComplete) {
return <div>Payment Complete!</div>;
}
else {
return (<form onSubmit={this.onSubmit} >
<span>{ this.state.paymentError }</span><br />
<input type='text' data-stripe='number' placeholder='credit card number' /><br />
<input type='text' data-stripe='exp-month' placeholder='expiration month' /><br />
<input type='text' data-stripe='exp-year' placeholder='expiration year' /><br />
<input type='text' data-stripe='cvc' placeholder='cvc' /><br />
<input disabled={this.state.submitDisabled} type='submit' value='Purchase' />
</form>);
}
}
});
module.exports = PaymentForm;
Jakmile je Stripe.js načten, naše komponenta platebního formuláře vrátí formulář s požadovanými vstupními poli. Přidali jsme požadované atributy datových pruhů podle dokumentace Stripe. Událost form onSubmit vyvolá obslužnou rutinu naší komponenty, která volá Stripe.createToken(). Pokud se vrátí chyba, zobrazíme to našim uživatelům tak, že stav state.paymentError nastavíme na stejnou hodnotu jako chybová zpráva. V opačném případě nastavíme platbu jako úplnou pomocí this.paymentComplete a to je také bod, kde bychom předali token a požadované informace o nákupu našemu serveru pomocí modulu, jako je superagent.
Shrnutí
Jak můžete vidět, odstranění Checkout.js pro váš vlastní stylizovaný platební formulář opravdu není příliš obtížné. Tím, že se jedná o komponentu a dynamicky načítá Stripe.js, také udržuje zdroje, které musí klient načítat, na minimu, a umožňuje vám to umístit na libovolné místo, kde potřebujete dokončit nákup ve vaší aplikaci React. Pokud máte toto standardní nastavení komponenty React pro interakci s Stripe.js, můžete přidat další pole související s produktem, který uživatel kupuje, nebo dokonce učinit shromažďování informací o kreditní kartě bezproblémový krok vašeho procesu registrace. Vaši uživatelé nikdy nebudou vědět, že se spoléháte na Stripe.
Checkout.js přidává vrstvu vnímaného zabezpečení tím, že zobrazuje značku Stripe a rozpoznává typ karty, když zadáváte číslo své kreditní karty. Doporučil bych také vynaložit určité úsilí na zobrazení vizuálních vodítek zabezpečení pro uživatele při vytváření vlastního formuláře. Například by to bylo skvělé místo, kde můžete ukázat svůj odznak certifikátu SSL od společnosti Comodo nebo Network Solutions. Pro další pohodlí vašich uživatelů by byla integrace něčeho podobného, jako je reagovat kreditní karta, skvělým završením. Tato komponenta automaticky rozpozná typ kreditní karty a zobrazí příslušné logo na kreditní kartě vygenerované CSS spolu se samotným číslem kreditní karty.
Naštěstí je integrace Stripe do vašeho frontendu poměrně přímočará – ve skutečnosti to není o moc složitější než tohle! Skutečná práce (a zábava!) začíná na kódu vašeho serveru, který se může stát komplikovaným a chybným, pokud děláte víc než jen přijímání jednorázových plateb za neopakující se uživatele. Hodně štěstí při online placení pomocí JavaScriptu, a pokud chcete přispět ke svým vlastním projektům nebo mít zpětnou vazbu o tom, jak jste propojili Stripe s Reactem, kontaktujte nás nebo napište komentář! Prvních pět lidí, kteří zanechají komentář o svém oblíbeném obsahu z tohoto příspěvku nebo tipu Reagovat a tweetují článek, obdrží ZDARMA výtisk mé knihy:The Node.js Engineer's Guide to Stripe! Stačí se o mě zmínit v tweetu a já vám DM pošlu pokyny, jak nárokovat vaši kopii.