Accettare un pagamento utilizzando Stripe Elements e l'API ChargesAPI Charges

Accetta pagamenti online da clienti statunitensi e canadesi.

API precedente

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

L’API Charges non supporta le seguenti funzionalità, molte delle quali sono necessarie per la conformità delle carte di credito:

Usa Stripe Elements, i nostri componenti di interfaccia utente preconfigurati, per creare un modulo di pagamento che ti consenta di raccogliere in modo sicuro i dati della carta di un cliente senza manipolare dati sensibili. I dati della carta vengono quindi convertiti in un token rappresentativo che puoi inviare in tutta sicurezza ai tuoi server. Il tuo server può utilizzare questo token per creare un addebito.

Configurare Stripe

Innanzitutto, devi creare un account Stripe. Registrati ora.

Utilizza le nostre librerie per accedere all’API Stripe dalla tua applicazione:

Creare il modulo di pagamento
Lato client

Per raccogliere in modo sicuro i dati delle carte dai tuoi clienti, Stripe Elements crea per te componenti di interfaccia utente ospitati da Stripe, che vengono quindi inseriti nel tuo modulo di pagamento senza che tu debba crearli direttamente.

Configurare Stripe Elements

Per integrare Elements nella tua pagina web, aggiungi questo tag di script nella sezione head della tua pagina HTML:

payment.html
<script src="https://js.stripe.com/v3/"></script>

Questo script deve essere sempre caricato direttamente da https://js.stripe.com.

Crea un’istanza di Elements con il seguente JavaScript nella pagina di pagamento:

client.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Una volta caricato Elements, puoi creare un contenitore DOM vuoto con ID univoco nel tuo modulo di pagamento ovunque vuoi che Elements aggiunga il proprio campo di immissione. Ti consigliamo di collocare questo contenitore all’interno di un tag <label> o accanto a un tag <label> con un attributo forche corrisponda all’id univoco del contenitore di Elements. In tal modo, l’elemento diventa automaticamente attivo quando il cliente fa clic sull’etichetta corrispondente.

Ad esempio:

payment.html
<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display Element errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

Una volta caricato il modulo, crea un’istanza di un elemento card e montala sul contenitore di Elements creato sopra:

client.js
// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

card Element semplifica il modulo e riduce al minimo il numero di campi obbligatori inserendo un unico campo di immissione flessibile che raccoglie in modo sicuro tutti i dati necessari relativi alla carta.

In alternativa, combina cardNumber Element, cardExpiry Element e cardCvc Element per creare un modulo flessibile con più campi di immissione per la carta.

Nota

Acquisisci sempre il codice postale per aumentare i tassi di accettazione delle carte e ridurre le frodi.

The single line Card Element automatically collects and sends the customer’s postal code to Stripe. If you build your payment form with split Elements (Card Number, Expiry, CVC), add a separate input field for the customer’s postal code.

Consulta la nostra documentazione di riferimento su Stripe.js per un elenco completo dei tipi di componenti Elements supportati.

Creare un token
Lato client

Aggiungi un listener di eventi che rilevi quando il cliente invia i dati della sua carta e utilizza stripe.createToken(card) per tokenizzare tali dati:

client.js
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

createToken accetta anche un secondo parametro facoltativo (non utilizzato in questo esempio) contenente informazioni supplementari sulla carta del cliente. La funzione restituisce un parametro Promise che viene risolto con un oggetto result. Questo oggetto può generare le seguenti risposte:

result.token: un token è stato creato correttamente.
result.error: si è verificato un errore. Sono inclusi gli errori di convalida lato client. Consulta la documentazione di riferimento dell’API per conoscere tutti gli errori possibili.

Se l’oggetto contiene un result.token, invialo al tuo server. In caso contrario, mostra al cliente un errore.

Inviare il token al tuo server
Lato client

Invia il token al tuo server con tutte le informazioni supplementari raccolte:

client.js
const stripeTokenHandler = (token) => {
  // Insert the token ID into the form so it gets submitted to the server
  const form = document.getElementById('payment-form');
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

Creare un addebito con il token
Lato server

Una volta che il client ha pubblicato il token sul tuo server, puoi utilizzarlo per creare un addebito. Sul server, cattura il token Stripe nei parametri POST inviati dal tuo modulo. A questo punto, è sufficiente una chiamata API per effettuare un addebito sulla carta:

La risposta alla creazione di un addebito sarà un addebito o un errore con un codice di errore. Se la risposta ha esito positivo, evadi l’ordine del cliente e mostra una pagina indicante che l’addebito è riuscito. In caso contrario, mostra una pagina di errore.

Verificare l’integrazione

Se riesci a inserire correttamente il numero di una carta di test nel tuo modulo HTML, invialo al server e verifica che abbia creato l’addebito. La tua integrazione è così terminata.

Complimenti! Hai completato un’integrazione base per pagamenti con l’API Charges. Questa API non supporta l’espansione delle aziende o clienti al di fuori di Stati Uniti e Canada. Per pagamenti più sicuri e globali, scopri come accettare un pagamento con l’API Payment Intents.

Vedi anche

Puoi ottenere maggiori informazioni su Elements e su come salvare le carte con l’API Charges.