• 🏡 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
rust-react-webassembly-privacy-preserving-machine-learning

Rust, WebAssembly, React e un MVP

Dicembre 21, 2020
privacy-preserving-tracking-app-immuni-italia-bending-spoons-guida-italia-machine-learning-data-science-blog

Privacy Preserving Tracing App: cosa significa davvero?

Aprile 24, 2020
Next Post
Previous Post

Una pubblicità che non vedi se usi AdBlock

EXPAND YOUR KNOWLEDGE

  • Blockchain Developer

    Circuito aritmetico

    Novembre 1, 2022
  • machine-learning

    Un nuovo inizio

    Settembre 4, 2021
  • Zero Knwoledge Proof Article Privacy Preserving

    Zero Knowledge Proof: zk-SNARK e zk-STARK | Prova a conoscenza zero

    Luglio 8, 2021
  • oblivious-transfer-spiegazione-italiano-ot-explanation Privacy Preserving

    Oblivious Transfer (OT)

    Luglio 6, 2021
  • Aleo Studio Website Preview machine-learning

    Aleo Studio: un IDE per Zero-Knowledge Proofs Applications

    Luglio 1, 2021
  • privacy-enhancing-technologies-data-machine-learning-data-science Privacy Preserving

    Perché il Privacy Tech è un vantaggio competitivo micidiale

    Giugno 17, 2021
  • bloom-filter-spiegazione-italian Privacy Preserving

    Bloom Filter

    Giugno 3, 2021
  • trusted-execution-environment-tee-data-science-come-fuziona Data Science, Privacy Preserving

    Trusted Execution Environment | Cos’è un TEE?

    Giugno 2, 2021
  • Crypto Custody services machine-learning

    Crypto Custody: Guida alla custodia delle criptomonete

    Maggio 26, 2021
  • deep-q-learning-q-learning-reinforcement-learning machine-learning

    Deep Q-Learning

    Aprile 27, 2021

Quello che Google pensa ti possa piacere

Prodotti che i Cookie dicono potresti trovare interessanti

AI Blog - © 2019-2021 Andrea Provino