• 🏡 Home
  • 🚨 GDPR Compliant
  • ⚡️ Data Science
  • 📌 Machine Learning
  • 🔒 Privacy Preserving
  • 🏡 Home
  • 🚨 GDPR Compliant
  • ⚡️ Data Science
  • 📌 Machine Learning
  • 🔒 Privacy Preserving
Guide, Portfolio

Stripe: Semplice Form Pagamento React (client) | Guida Italiano

Stripe: Semplice Form  Pagamento React (client) | Guida Italiano

Sei finito su questo post perché non sai come realizzare un form stripe per il submit di un pagamento tramite React?

Per usare un costrutto condizionale, se così fosse caro mio benvenuto! In caso contrario, potresti sempre imparare qualcosa di nuovo!

Hey Hey, calmati che succede? Ti vedo teso…

Non vuoi perdere tempo, allora procediamo!

React Form Stripe | Guida italiano

Vado dritto al sodo. In questo post:

  • creiamo una react-app da zero
  • usiamo un pacchetto npm per creare un form di inserimento dati
  • contattiamo un back end per l’handling del pagamento

Creazione React App

Il nostro obiettivo è creare una SPA (Single Page Application) che possa contenere il form di stripe. Trattandosi di un progetto semplice useremo create-react-app, metodo ufficialmente supportato.

Apriamo il terminale e digitiamo:

npx create-react-app www-stripe-form

Il comando richiede l’aver installato npx (per la compilazione dei binari), se così non fosse:

npm install -g npx

Environment Set-Up

Abbiamo della routine da svolgere. Per semplicità, parto dal presupposto che tu abbia creato un account stripe e sia in possesso delle secret key di sviluppo, quindi ti propongo una checklist:

  • Inizializzazione git e collegamento a remote origin
  • Creazione file .env contente le secret keys di stripe (ricordati il prefisso obbligatorio per ogni variabile: REACT_APP_)
  • Aggiungi .env a .gitingore
  • Usiamo Yarn per installare react-stripe-elements (yarn add react-stripe-elements)

Aggiunta Stripe

All’interno del file index.html, nella cartella /public:

<head>
    <!-- [...] -->
    <script src="https://js.stripe.com/v3/"></script>
</head>

La nostra applicazione userà il pacchetto react-stripe-elements, che necessita del file javascript per gestire le comunicazioni con stripe e completare la tokenizzazione della carta di credito inserita dall’utente (per ragioni di sicurezza)

Ora creiamo un nuovo componente denominato CheckoutForm configurandolo come segue:

import React, {Component} from 'react';
import {CardElement, injectStripe} from 'react-stripe-elements';

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  async submit(ev) {
    // User clicked submit
  }

  render() {
    return (
      <div className="checkout">
        <p>Would you like to complete the purchase?</p>
        <CardElement />
        <button onClick={this.submit}>Purchase</button>
      </div>
    );
  }
}

export default injectStripe(CheckoutForm);

Il componente CardElement crea un elemento all’interno della pagina contenente gli input per inserire i dati della carta. By default sono presenti i campi:

  • numero carta
  • scadenza
  • CVC

Sono fusi assieme in un unico form. Qualora volessi dividerli, ti consiglio di accedere alla ricca doc, e seguire le procedure per splittare i vari elementi base e realizzare un form custom-made.

Il componente CheckoutForm contiene invece il CardElement, e il submit button che sarà gestito in seguito per completare la tokenizzazione della carta.

Infine la funzione injectStripe è un HOC (High Order Component) che predispone il componente a gestire determinate props tra cui lo Stripe Object:

Ora all’interno del file App.js, importiamo:

import {Elements, StripeProvider} from 'react-stripe-elements';
import CheckoutForm from './CheckoutForm';

Inseriamo quindi nell’app component:

<StripeProvider apiKey={process.env.REACT_APP_PRIVATE_KEY}>
    <div className="example">
        <h1>React Stripe Elements Example</h1>
        <Elements>
            <CheckoutForm />
        </Elements>
    </div>
</StripeProvider>

Ora integriamo la funzione per la tokenizzazione e l’invio al backend:

async submit(ev) {
  let {token} = await this.props.stripe.createToken({name: "Example Tx"});
  let response = await fetch("/charge", {
    method: "POST",
    headers: {"Content-Type": "text/plain"},
    body: token.id
  });

  if (response.ok) console.log("Purchase Complete!")
}
Il material design è stato sviluppato implementando un framework denominato mdbreact

A bunch of errors, just in case

Ho dovuto contenere la mia collera e non poco.

Questo che segue è il frutto di 30 minuti di ricerca errore. Usalo bene!

Segui la documentazione ufficiale, passo dopo passo e magari saltano fuori errori imprevisti che non sai da dove arrivino…

Quello che le documentazioni ufficiali spesso tralasciano, e il motivo per cui post come questo risultano particolarmente utili, è la soluzione ai molteplici problemi che potresti incorrere nel configurare il tuo ambiente.

Nel mio caso, usando Google Chrome su Windows 10, l’app si arrestava ancor prima di avviarsi a causa delle fastidiose (perlomeno in ambito di testing) CORS Policy.

Per risolvere, devi avviare Chrome in una particolare modalità, usando il comando da terminale:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp [WINDOWS 10] (tips: crea un nuovo collegamento, ed eseguilo come amministratore)

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security [OSX]

google-chrome --disable-web-security [LINUX]

Cosa rimane da fare?

A form funzionante, rimangono parecchie da cose da aggiungere.

La gestione degli errori manca, e nel caso in cui la carta fosse protetta da un codice di verifica, sarebbe necessario gestire propriamente la casistica.

Il back-end dovrà però aver precedentemente implementato una procedura corretta per l’invio dei token, e relativi identificativi.

Per il momento è tutto! Qui, il link alla repo.

Un caldo abbraccio, andrea!

Written by Andrea Provino - Ottobre 12, 2019
Tags | portfolio project, web development

You Might Also Like

airbnb-data-scientist-job-interview-questions-data-science-machine-learning-colloquio-di-lavoro-domande-airbnb-data-science

Airbnb: il profilo del Data Scientist | Domande colloquio di lavoro

Novembre 27, 2019

Real Time Face Detection WebSite using Javascript | Guida Italiano

Ottobre 9, 2019
aws-lambda-rnn-tensroflow-model-data-science-machine-learning-trading-deep-learning

AWS Lambda e RNN Tensorflow Model | Log Italiano

Aprile 14, 2020
Next Post
Previous Post

Una pubblicità che non vedi se usi AdBlock

EXPAND YOUR KNOWLEDGE

  • fully-homomorphic-encryption-crittografia-completamente-omomorfica Privacy Preserving

    Cos’è la Crittografia Omomorfica | Homomorphic Encryption (HE)

    Marzo 4, 2021
  • data-science-for-finance-machine-learning-deep-learning-data-science-use-cases-use-cases Business, Data Science, machine-learning

    Data Science for Finance | Use Cases per il Data Scientist

    Febbraio 13, 2021
  • differential-privacy-example-privacy-differenziale-esempio-italiano-applicazioni-reali Business, Data Science, Privacy Preserving

    Differential Privacy Example | Esempi di privacy differenziale

    Febbraio 10, 2021
  • privacy-enhancing-technologies-techniques-machine-learning-data-science-pets-guida-italiano-spiegazione-semplice Business, Data Science, machine-learning, Privacy Preserving

    Cosa sono le Privacy-enhancing technologies o techniques (PETs)

    Febbraio 7, 2021
  • condivisione-dati-finance-fintech-problems-machine-learning-for-finance-data-science-deep-learning-case-study Business

    Problemi della condivisione dati in finanza | Finance data sharing problems

    Febbraio 4, 2021
  • finance-privacy-settore-finanziario-dati-privacy-enhancing-technologies-ai Business

    Il legame tra Privacy Dati AI nel settore finanziario

    Febbraio 1, 2021
  • rust-react-webassembly-privacy-preserving-machine-learning Logs

    Rust, WebAssembly, React e un MVP

    Dicembre 21, 2020
  • diffie-hellman-key-exchange-protocol-scambio-di-chiavi-diffie-hellman Data Science, Privacy Preserving

    Cos’è lo scambio di chiavi Diffie-Hellman (DH)? | Privacy Preserving

    Dicembre 15, 2020
  • principio-di-esattezza-data-science-machine-learning-gdpr-data-accuracy Data Science, GDPR Compliant

    GDPR: Principio di esattezza dei dati (Data Accuracy)

    Dicembre 12, 2020
  • tensorflow-extended-tfx-deploy-machine-learning-guide-machine-learning-pipelines machine-learning

    TFX: come funziona Tensorflow Extended?

    Dicembre 9, 2020

Quello che Google pensa ti possa piacere

Prodotti che i Cookie dicono potresti trovare interessanti

AI Blog - © 2019-2021 Andrea Provino