Salvare una carta senza autenticazione dell'istituto bancario

Prima di iniziare questa guida, devi creare un account Stripe. Registrati ora.

Crea una pagina di pagamento per acquisire i dati della carta del cliente. Usa Stripe Elements, una libreria di interfaccia utente che ti consente di creare moduli di pagamento personalizzati. Per iniziare a utilizzare Elements, includi la libreria Stripe.js con il seguente script sulla pagina di pagamento.

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

Carica sempre Stripe.js direttamente da js.stripe.com per garantire la conformità alle norme PCI. Non includere lo script in un pacchetto e non utilizzarne una copia in self-hosting.

Per sfruttare al massimo la funzionalità avanzata contro le frodi di Stripe, includi questo script in ogni pagina del sito, non solo in quella di pagamento. Se includi lo script in ogni pagina, Stripe può rilevare comportamenti sospetti che potrebbero essere indicativi di frodi mentre gli utenti navigano sul tuo sito web.

Aggiungere Elements alla pagina

Per acquisire in modo sicuro i dati delle carte dai tuoi clienti, Elements crea per te dei componenti di interfaccia utente ospitati da Stripe, che vengono quindi inseriti nel tuo modulo di pagamento, anziché essere creati direttamente da te. Per definire il punto di inserimento di questi componenti, crea elementi DOM (contenitori) vuoti con ID univoci nel tuo modulo di pagamento.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Poi, per creare un’istanza dell’oggetto Stripe, specifica come primo parametro la tua chiave API pubblicabile. Quindi, crea un’istanza dell’oggetto Elements e usala per montare un elemento card nel DOM.

card Element semplifica il modulo di pagamento e riduce al minimo il numero di campi obbligatori inserendo un unico campo di immissione flessibile che acquisisce in modo sicuro tutti i dati 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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

Un componente di Stripe Elements contiene un iframe che invia in modo sicuro a Stripe le informazioni sul pagamento tramite una connessione HTTPS. Affinché l’integrazione funzioni, anche l’indirizzo della pagina di completamento del pagamento deve iniziare con https:// anziché http://.

Puoi eseguire il test dell’integrazione senza utilizzare HTTPS. Abilitalo quando è tutto pronto per accettare i pagamenti in modalità live.

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Invia l’ID del PaymentMethod risultante al tuo server.

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Salva la carta associando il PaymentMethod a un cliente. Puoi utilizzare l’oggetto Customer per memorizzare altre informazioni sul cliente, ad esempio i dati di spedizione e l’indirizzo email.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Se hai un oggetto Customer esistente, puoi associarvi il PaymentMethod.

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}

A questo punto, associa l’ID del cliente e l’ID del PaymentMethod alla tua rappresentazione interna di un cliente, se ne hai una.

Quando è tutto pronto, recupera gli ID del PaymentMethod e del cliente a cui addebitare il pagamento. Puoi farlo salvando gli ID di entrambi nel database o utilizzando l’ID del cliente per cercare tutti i PaymentMethods disponibili del cliente.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Usa l’ID del PaymentMethod e l’ID del cliente per creare un nuovo PaymentIntent. Imposta error_on_requires_action su true per rifiutare i pagamenti che richiedono azioni da parte del cliente, come l’autenticazione a due fattori.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

Quando un tentativo di pagamento non va a buon fine, anche la richiesta non riesce. Viene visualizzato un codice di stato HTTP 402 e Stripe restituisce un errore. Devi chiedere al cliente di tornare all’applicazione (ad esempio inviando un’email) per completare il pagamento. Per determinare il motivo del rifiuto del pagamento da parte della società emittente della carta, verifica il codice di errore generato dalla libreria dell’API Stripe o il codice last_payment_error.decline_code del PaymentIntent.

Notify your customer that the payment failed and direct them to the payment form you made in Step 1 where they can enter new card details. Send that new PaymentMethod ID to your server to attach to the Customer object and make the payment again.

In alternativa, puoi creare un PaymentIntent e salvare una carta in un’unica chiamata API se hai già creato un oggetto Customer.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Setting setup_future_usage to on_session indicates to Stripe that you wish to save the card for later, without triggering unnecessary authentication.

Stripe provides test cards you can use in a sandbox to simulate different cards’ behavior. Use these cards with any CVC, postal code, and expiry date in the future.