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:

• Conosci l’indirizzo email del cliente prima che arrivi alla pagina di pagamento, ad esempio tramite un profilo del cliente.
• Non devi raccogliere l’indirizzo di spedizione del cliente.
• Preferisci utilizzare il campo di inserimento dell’indirizzo email che inserisci prima del modulo di pagamento.

Poi integra Link specificando l’indirizzo email del cliente in Payment Element, in modo da accelerare il pagamento attivando il flusso di autenticazione di Link non appena il cliente raggiunge la fase di pagamento. Questa opzione integra un elemento, ovvero Payment Element.

Link compila automaticamente l’indirizzo email raccolto nel modulo di pagamento per velocizzare il pagamento

Link fornisce una richiesta di autenticazione per un cliente esistente

In questo flusso, continui a raccogliere l’indirizzo email nel campo del modulo prima che il cliente raggiunga la fase di pagamento, poi specifichi l’email in Payment Element. Payment Element autentica il cliente nella fase di pagamento e mostra i dati di pagamento del cliente salvati nel proprio account Link oppure visualizza il modulo di creazione dell’account Link dopo aver inserito i dati della carta. Ecco come si presenta:

Questa opzione di integrazione non raccoglie l’indirizzo di spedizione del cliente. Se devi raccogliere un indirizzo di spedizione, integra Link utilizzando Link Authentication Element, Address Element e Payment Element.

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,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Prefill customer data using the defaultValues option. Passing in the email
      // is required for this integration. The other fields are optional.
      <PaymentElement
        options={{
          defaultValues: {
            billingDetails: {
              email: 'foo@bar.com',
              name: 'John Doe',
              phone: '888-888-8888',
            }
          }
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

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.