Come integrare i pagamenti con Stripe in Ionic
Hai sviluppato una nuova app e vuoi abilitare i pagamenti? Niente di più semplice.
Vediamo in questo articolo come integrare i pagamenti con Stripe in Ionic!
Intro
Fondata nel 2010, Stripe è uno dei principali competitor di Paypal e ora gestisce le transazioni di alcuni dei più grandi marchi in circolazione, tra cui Slack, GitHub, Zoom, Pinterest, Uber, Booking, e molti altri. In effetti, la società afferma che l'89% di tutte le carte di credito in circolazione sono state elaborate su una rete Stripe; attualmente, hanno infatti una capacità di gestire 135 valute, per cui rappresentano una soluzione comune per le aziende che commerciano a livello internazionale.
Stripe ha un’enorme quantità di potenziale sotto il suo cofano: si tratta di una piattaforma di elaborazione dei pagamenti che ti consente di trasferire denaro dal conto bancario di un cliente al conto della tua azienda tramite una transazione con carta di credito o di debito.
Come funziona: per elaborare le transazioni online è necessario sia un gateway di pagamento che un processore di pagamento: mentre il gateway acquisisce e trasmette in modo sicuro le informazioni di pagamento della carta di credito del cliente al processore, quest’ultimo elabora effettivamente la transazione. La cifra spesa dal cliente viene quindi inviata temporaneamente al conto del processore, dove le commissioni relative alla carta di credito vengono detratte direttamente dalla somma. Il pagamento viene alla fine indirizzato al conto bancario del commerciante.
In realtà è molto più complicato di così, ma per evitare di perderci nella tana del coniglio di Stripe, passiamo alla parte pratica: in questo esempio andremo a configurare Stripe come provider di pagamento per la nostra app.
Repository
https://github.com/serenasensini/Ionic-5-pagamenti-con-Stripe
Plugin
Procedimento
Step 1 - Installazione dei plugin
Dopo aver creato o aperto la nostra applicazione, installiamo le dipendenze necessarie per far funzionare Stripa tramite i seguenti comandi, dove possiamo scegliere se usare Cordova o Capacitor per l’installazione del plugin:
$ ionic cordova plugin add cordova-plugin-stripe # installazione tramite Cordova
$ npm i -S @capacitor-community/stripe # installazione tramite Capacitor
$ npm install @ionic-native/stripe
Al termine dell’installazione, importiamo il modulo Stripe in app.module.ts, e nella pagina stripe.page.ts.
/src/app/app.module.ts
@NgModule({ … providers: [ StatusBar, SplashScreen, Stripe, HttpClient, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule { }
Step 2 - creazione delle funzioni di pagamento
Passiamo alla creazione di una funzione di preparazione del pagamento: creiamo quindi preparePayment come viene riportato di seguito: il parametro stripe_key rappresenta la chiave Stripe; infatti questo servizio autentica le tue richieste API utilizzando le chiavi API associata al tuo account. Se non includi questa chiave quando effettui una richiesta o ne utilizzi una non corretta o obsoleta, Stripe restituisce un errore. Crearne una è davvero semplice: è sufficiente andare sul sito https://stripe.com/docs/development e seguire le indicazioni fornite dall’azienda stessa.
Ogni account è dotato di chiavi separate per il test e per l’esecuzione di transazioni live: infatti, vengono associate due diverse chiavi per permettere agli sviluppatori di testare il corretto funzionamento della propria applicazione senza dover ricorrere a reali transazioni economiche.
Esistono anche due tipi di chiavi API: pubbliche e segrete. Le chiavi pubblicabili hanno il solo scopo di identificare il tuo account con Stripe; in altre parole, possono essere utilizzate in modo sicuro all’interno del tuo codice. Al contrario, le chiavi segrete devono essere mantenute riservate e archiviate, dal momento che con questa chiave è possibile eseguire qualsiasi richiesta tramite le API senza restrizioni.
Tornando al codice, vediamo che all’interno della funzione associamo la chiave pubblica, per poi definire i dettagli della carta di test (le informazioni relative ai dettagli della carta di prova appartenente al circuito VISA predefinita di Stripe sono disponibili sempre nella documentazione https://stripe.com/docs/testing#cards); a questo punto, è possibile creare un token associato al pagamento, che ci permette di completare la transazione ed elaborarlo:
src/app/stripe/stripe.page.ts
`preparePayment() {
this.stripe.setPublishableKey(this.stripe_key);
this.dettCarta = {
number: ‘4242424242424242’,
expMonth: 12,
expYear: 2020,
cvc: ‘220’
};
this.stripe.createCardToken(this.dettCarta)
.then(token => {
console.log(token);
this.makePayment(token.id);
})
.catch(error => console.error(error));
}`
La funzione makePayment non farà altro che utilizzare il token per effettuare una chiamata al servizio di pagamento di Stripe, con la quale il pagamento verrà convalidato:
src/app/stripe/stripe.page.ts
makePayment(token) { this.http .post('https://XXXX/payWithStripe', { token: token.id }) .subscribe(data => { console.log(data); … }); }
Una risposta corretta da parte della request appena effettuata sarà simile alla seguente:
{
"id": "XXX",
"amount": 100,
…
"failure_code": null,
"failure_message": null,
"payment_method_details": {
"card": {
"brand": "visa",
…
"country": "US",
"description": "Visa Classic",
"exp_month": 2,
"exp_year": 2024,
"fingerprint": "xxx",
"funding": "credit",
"last4": "4242",
},
"type": "card"
},
"receipt_url": "https://pay.stripe.com/receipts/XXX",
...
}
Dove i parametri failure_code e failure_message vuoti ci fanno capire che la transazione è andata a buon fine.
Semplice, no?
