Pagamenti con carta senza autorizzazione della banca

Crea un'integrazione più semplice con limitazioni legate all'area geografica.

This integration supports businesses accepting only US and Canadian cards. It’s simpler up front, but does not scale to support a global customer base.

Come funziona questa integrazione?

In che cosa si differenzia dall'integrazione globale?

Growing or global businesses should use Stripe’s global integration to support bank requests for two-factor authentication and allow customers to pay with more payment methods.

Creare un modulo di pagamento
Lato client

Elements, parte di Stripe.js, offre componenti dell’interfaccia integrati per la raccolta dei dati sulla carta dai clienti. Sono in hosting su Stripe e inseriti nel tuo modulo di pagamento come iframe, pertanto i dati della carta del cliente non toccheranno mai il tuo codice.

Innanzitutto, includi lo script Stripe.js nell’intestazione di ogni pagina del sito.

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

Così facendo puoi utilizzare le funzionalità antifrode avanzate di Stripe e avrai la possibilità di rilevare comportamenti di navigazione anomali.

Requisiti di sicurezza

Questo script va sempre caricato direttamente da js.stripe.com per garantire la conformità PCI. Non puoi includere lo script in un pacchetto né utilizzarne una copia in self-hosting.

Quando usi Elements, tutti i dati di pagamento vengono inviati tramite una connessione HTTPS sicura.

L’indirizzo della pagina che contiene Elements deve inoltre iniziare con https:// e non con http://. Per ulteriori informazioni sulla ricezione dei certificati SSL e sull’integrazione con il tuo server per attivare una connessione HTTPS sicura, consulta la documentazione sulla sicurezza.

Aggiungere Elements alla pagina

Poi, devi creare un account Stripe. Registrati ora.

Creare elementi DOM (contenitori) vuoti con ID univoci all’interno del modulo di pagamento

payment.html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

Crea un’istanza dell’oggetto Stripe, fornendo la tua chiave API pubblicabile come primo parametro. In seguito, crea un’istanza dell’oggetto Elements e usalo per montare un elemento carta nel contenitore vuoto dell’elemento DOM della pagina.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Usa stripe.createPaymentMethod sul client per acquisire i dati della carta e creare un PaymentMethod quando il cliente invia il modulo di pagamento. Invia l’ID del PaymentMethod al tuo server.

client.js
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

Configurare Stripe
Lato server

Utilizza una libreria ufficiale per inviare richieste all’API Stripe dalla tua applicazione:

Effettuare un pagamento
Lato server

Configura un endpoint sul tuo server per ricevere la richiesta dal cliente.

Stripe utilizza un oggetto PaymentIntent per rappresentare la tua intenzione di riscuotere un pagamento da un cliente, monitorando i tentativi di addebito e le modifiche dello stato del pagamento durante tutta la procedura.

Decidi sempre quanto addebitare al cliente sul server, un ambiente affidabile rispetto a quello del client. In questo modo eviti che eventuali malintenzionati possano scegliere un proprio prezzo.

Crea un endpoint HTTP per rispondere alla richiesta AJAX della fase 1. In quell’endpoint, devi decidere quanto addebitare al cliente. Per creare un pagamento, crea un PaymentIntent utilizzando l’ID del PaymentMethod della fase 1 con il codice seguente:

Avviso

If you set error_on_requires_action to true when confirming a payment, Stripe automatically fails the payment if it requires two-factor authentication from the user.

Risposta dell’API Payment Intents

Quando effettui un pagamento con l’API, la risposta include lo stato del PaymentIntent. Se il pagamento è riuscito, lo stato sarà succeeded.

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

Se il pagamento viene rifiutato, la risposta include il codice e il messaggio di errore. Ecco un esempio di pagamento non riuscito perché la carta richiedeva l’autenticazione a due fattori.

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

Testa l'integrazione

Sono disponibili numerose carte di test che puoi utilizzare in modalità di test per verificare che l’integrazione sia pronta per l’uso. Utilizzale con un CVC, un codice postale e una data di scadenza futura qualsiasi.

Numero	Descrizione
	La transazione ha esito positivo e il pagamento viene elaborato automaticamente.
	Con un codice di rifiuto `insufficient_funds`, la transazione ha sempre esito negativo.
	Richiede l’autenticazione che in questa integrazione non va a buon fine restituendo il codice di rifiuto `authentication_not_handled`.

Consulta l’elenco completo delle carte di test.

Aggiornare l'integrazione per gestire l'autenticazione delle carte

Congratulazioni. Hai completato un’integrazione per i pagamenti di base con carta. Tieni presente che questa integrazione rifiuta le carte che impongono l’autenticazione durante il pagamento.

Se inizi a vedere pagamenti nella Dashboard contrassegnati dalla dicitura Failed, è il momento di aggiornare l’integrazione. L’integrazione globale di Stripe gestisce questi pagamenti invece di rifiutarli automaticamente.