Creare una pagina di pagamento personalizzata contenente Link

Innanzitutto crea un account Stripe o accedi.

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'

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.

Se raccogli i dati delle carte per un uso futuro con Setup Intents, elenca i metodi di pagamento manualmente anziché utilizzare metodi di pagamento dinamici. Per utilizzare Link senza metodi di pagamento dinamici, aggiorna l’integrazione specificando link in payment_method_types.

Quando crei un PaymentIntent, offri dinamicamente ai clienti i metodi di pagamento più pertinenti, incluso Link, utilizzando metodi di pagamento dinamici. Per utilizzare metodi di pagamento dinamici, non includere il parametro payment_method_types. Facoltativamente, puoi anche abilitare automatic_payment_methods.

Per aggiungere Link alla tua integrazione Elements utilizzando i metodi di pagamento dinamici:

1. Nelle impostazioni dei metodi di pagamento della Dashboard, attiva Link.
2. Se hai un’integrazione esistente che elenca manualmente i metodi di pagamento, rimuovi il parametro payment_method_types dalla tua integrazione.

Recuperare la chiave privata client

L’oggetto PaymentIntent contiene una chiave privata client, che il lato client usa per completare la procedura di pagamento in modo sicuro. Per specificare la chiave privata sul lato client, puoi utilizzare approcci diversi.

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Link autentica un cliente utilizzando il suo indirizzo email. A seconda del tuo flusso di pagamento, hai le seguenti opzioni: specificare un indirizzo email in Payment Element, raccoglierlo direttamente con Payment Element o utilizzare Link Authentication Element. Tra queste, Stripe consiglia di specificare un indirizzo email del cliente in Payment Element (se disponibile).

Specificare un indirizzo email

Raccogliere un indirizzo email

Usare Link Authentication Element

Se ti trovi in una qualsiasi delle situazioni descritte di seguito:

• Hai bisogno di un unico componente ottimizzato per la raccolta dell’indirizzo email e per l’autenticazione a Link.
• Devi raccogliere un indirizzo di spedizione del cliente.

Poi utilizza il flusso di integrazione che implementa questi elementi: Link Authentication Element, Payment Element e Address Element (facoltativo).

In una pagina di pagamento compatibile con Link, Link Authentication Element si trova all’inizio, seguito da Address Element e poi da Payment Element. Puoi visualizzare Link Authentication Element anche su pagine distinte, nello stesso ordine, per i flussi di pagamento che richiedono l’utilizzo di più pagine.

Creare un modulo di pagamento utilizzando più Element

L’integrazione funziona nel modo seguente:

Ora puoi configurare il tuo modulo di pagamento personalizzato con i componenti dell’interfaccia utente preintegrati di Elements. Affinché l’integrazione funzioni, l’indirizzo della pagina di pagamento deve iniziare con https:// anziché con http:// Puoi eseguire il test dell’integrazione senza utilizzare HTTPS. Abilita HTTPS quando sarà tutto pronto per accettare i pagamenti in modalità live.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

Utilizza stripe.confirmPayment per completare il pagamento con i dati raccolti dal cliente nei diversi moduli Elements. Fornisci un return_url a questa funzione per indicare dove Stripe reindirizza l’utente dopo il completamento del pagamento.

L’utente può essere dapprima reindirizzato su un sito intermedio, come una pagina di autorizzazione bancaria, prima che Stripe lo reindirizzi al return_url.

Per impostazione predefinita, i pagamenti con carta e bancari vengono reindirizzati immediatamente al return_url quando il pagamento va a buon fine. Se vuoi impedire il reindirizzamento a return_url, puoi utilizzare if_required per modificare il comportamento.

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

Il return_url corrisponde a una pagina del tuo sito web che fornisce lo stato del pagamento del PaymentIntent quando visualizzi la pagina di ritorno. Quando Stripe reindirizza il cliente al return_url, puoi utilizzare i seguenti parametri di ricerca dell’URL per verificare lo stato del pagamento. Puoi anche aggiungere i tuoi parametri di ricerca quando specifichi il return_url. Questi parametri di query vengono conservati durante la procedura di reindirizzamento.

Stripe invia un evento payment_intent.succeeded quando il pagamento viene completato. Utilizza un webhook per ricevere questi eventi ed eseguire azioni come l’invio della conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione.

Configura la tua integrazione in modo che ascolti questi eventi anziché attendere un callback dal client. Quando attendi un callback dal client, il cliente può chiudere la finestra del browser o uscire dall’app prima dell’esecuzione del callback. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare diversi tipi di metodi di pagamento con una sola integrazione.

Oltre a gestire l’evento payment_intent.succeeded, puoi gestire anche altri due eventi importanti quando riscuoti pagamenti con Payment Element:

Attualmente Link funziona solo con carte di credito, carte di debito e acquisti su conti bancari qualificati degli Stati Uniti. Link richiede la registrazione del dominio.

Puoi creare account sandbox per Link utilizzando qualsiasi indirizzo email valido. La tabella seguente mostra i valori di passcode monouso fissi che Stripe accetta per autenticare gli account sandbox:

Per testare metodi di pagamento specifici, consulta gli esempi di test di Payment Element.

Più fonti di finanziamento

Quando Stripe fornisce fonti di finanziamento aggiuntive, non è necessario aggiornare l’integrazione. Stripe le supporta automaticamente con le stesse tempistiche di regolamento delle transazioni e le stesse garanzie dei pagamenti con carta e conto corrente.

Autenticazione delle carte e 3D Secure

Link supporta l’autenticazione 3D Secure 2 (3DS2) per i pagamenti con carta. 3DS2 richiede ai clienti di completare un passaggio di verifica aggiuntivo con la società emittente della carta quando paga. I pagamenti autenticati tramite 3D Secure sono coperti da una traslazione di responsabilità.

Per attivare il flusso di autenticazione 3DS2 con Link in una sandbox, utilizza la seguente carta di test con qualsiasi CVC, codice postale e data di scadenza futura: 4000000000003220

.

In una sandbox, la procedura di autenticazione mostra una pagina di autenticazione simulata. In tale pagina puoi autorizzare o annullare il pagamento. L’autorizzazione del pagamento simula la riuscita dell’autenticazione e ti reindirizza all’URL di reindirizzamento specificato. Se fai clic sul pulsante Operazione non riuscita viene simulato un tentativo di autenticazione non andato a buon fine.

Per ulteriori informazioni, consulta la pagina sull’autenticazione 3D Secure.