Accepter un paiement

Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la fonctionnalité d’enregistrement des moyens de paiement, qui permet à Payment Element de :

• De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
• Enregistrer les moyens de paiement lorsque les clients y consentent
• Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
• Mise à jour automatique des cartes perdues ou expirées lorsque les clients les remplacent

Enregistrez les moyens de paiement.

Réutilisez un moyen de paiement précédemment enregistré.

Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Lors de la création d’un PaymentIntent sur votre serveur, créez également un CustomerSession en fournissant l’ID d’objet Customer et en activant le composant payment_element pour votre session. Configurez les fonctionnalités des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de payment_method_save vous permet d’afficher une case à cocher invitant les clients à enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez spécifier setup_future_usage sur un PaymentIntent ou une session Checkout pour remplacer le comportement par défaut à l’enregistrement d’un moyen de paiement. Ainsi, vous enregistrez automatiquement le moyen de paiement en vue d’une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer.

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/create-intent-and-customer-session' do
  intent = Stripe::PaymentIntent.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: 
{{CUSTOMER_ID}},
  })
  customer_session = Stripe::CustomerSession.create({
    customer: 
{{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end

Votre instance Elements utilise la clé secrète du client de la session Client pour accéder aux moyens de paiement enregistrés de ce client. Gérez les erreurs correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.

Créez l’instance Elements à l’aide des clés secrètes du client pour le PaymentIntent et la session Client. Ensuite, utilisez cette instance d’Elements pour créer un Payment Element.

// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre setup_future_usage sur le PaymentIntent et le paramètre allow_redisplay sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.

Exiger la collecte du CVC

Au besoin, spécifiez require_cvc_recollection lors de la création du PaymentIntent pour appliquer la collecte du CVC lors des paiements par carte.

Détecter la sélection d’un moyen de paiement enregistré

Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement change du composant Element Payment, qui contient le moyen de paiement sélectionné.

paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

Utilisez Link dans le composant Payment Element pour permettre à vos clients de payer plus rapidement. Vous pouvez renseigner automatiquement les informations de tout client connecté utilisant déjà Link, même s’il a enregistré ses informations dans Link avec une autre entreprise. L’intégration du composant Payment Element inclut par défaut une invite Link dans le formulaire de paiement par carte. Pour gérer Link dans le composant Payment Element, rendez-vous dans vos paramètres des moyens de paiement.

Collecter l’adresse e-mail du client pour l’authentification ou l’inscription Link

Options d’intégration

L’intégration de Link au composant Payment Element peut se faire de deux façons. Parmi celles-ci, Stripe recommande de transmettre l’adresse e-mail du client au composant Payment Element, le cas échéant. N’oubliez pas de tenir compte du fonctionnement de votre tunnel de paiement lorsque vous choisissez l’une des options suivantes :

Pour modifier des attributs du Paymentintent tels que le montant (par exemple, les codes de réduction ou les frais d’expédition) après l’affichage du composant Payment Element, vous pouvez modifier le PaymentIntent sur votre serveur, puis appeler elements.fetchUpdates pour faire apparaître le nouveau montant dans le composant Payment Element. Cet exemple vous montre comment créer un endpoint de serveur capable de mettre à jour le montant du PaymentIntent :

get '/update' do
  intent = Stripe::PaymentIntent.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end

Cet exemple vous montre comment mettre à jour l’interface utilisateur pour refléter ces modifications côté client :

(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();

Payment Element prend en charge de nombreux moyens de paiement par défaut. Vous devez prendre des mesures supplémentaires pour activer et afficher certains moyens de paiement.

Affirm

Pour utiliser Affirm, vous devez d’abord l’activer dans le Dashboard. Lorsque vous créez un PaymentIntent avec le moyen de paiement Affirm, vous devez inclure une adresse de livraison. Cet exemple suggère de transmettre les informations de livraison côté client après que votre client a sélectionné son moyen de paiement. En savoir plus sur l’utilisation d’Affirm avec Stripe.

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US',
        },
      },

    },
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (e.g., payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Tester Affirm

Découvrez comment tester différents scénarios à l’aide du tableau suivant :

Afterpay (Clearpay)

Lorsque vous créez un PaymentIntent avec Afterpay comme moyen de paiement, vous devez inclure une adresse de livraison. En savoir plus sur l’utilisation d’Afterpay avec Stripe.

Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. L’exemple ci-dessous utilise l’attribut automatic_payment_methods, mais vous pouvez répertorier afterpay_clearpay dans les types de moyens de paiement. Dans la dernière version de l’API, le paramètre automatic_payment_methods est facultatif, car Stripe l’active déjà par défaut. Quelle que soit l’option choisie, veillez à activer Afterpay Clearpay dans le Dashboard.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]"=true \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"=CA \
  -d "shipping[address][country]"=US \
  -d "shipping[address][postal_code]"=94111

Tester Afterpay (Clearpay)

Découvrez comment tester différents scénarios à l’aide du tableau suivant :

Apple Pay et Google Pay

Lorsque vous activez les paiements par carte bancaire, nous affichons Apple Pay et Google Pay pour les clients dont l’environnement remplit les conditions d’affichage du portefeuille. Pour accepter des paiements provenant de ces portefeuilles, vous devez également :

• Activez-les dans les paramètres des moyens de paiement. Apple Pay est activé par défaut.
• Fournissez votre application via HTTPS en développement et en production.
• Enregistrez votre domaine.
• Récupérez des mises à jour à partir du serveur si vous mettez à jour le montant d’un PaymentIntent pour que la fenêtre modale de paiement du portefeuille reste synchronisée.

En savoir plus sur l’utilisation d’Apple Pay et de Google Pay avec Stripe.

Prélèvement automatique ACH

Lorsque vous utilisez le composant Element Payment avec le prélèvement automatique ACH comme moyen de paiement, procédez comme suit :

1. Créez un objet Customer.

   Command Line

   Sélectionner une langue

   cURL

   Stripe CLI

   Ruby

   Python

   PHP

   Java

   Node.js

   Go

   .NET

   No results

   curl -X POST https://api.stripe.com/v1/customers \
     -u "
   sk_test_BQokikJOvBiI2HlWgH4olfQ2
   :"

2. Indiquez l’ID du client lors de la création du PaymentIntent.

   Command Line

   Sélectionner une langue

   cURL

   Stripe CLI

   Ruby

   Python

   PHP

   Java

   Node.js

   Go

   .NET

   No results

   curl https://api.stripe.com/v1/payment_intents \
     -u "
   sk_test_BQokikJOvBiI2HlWgH4olfQ2
   :" \
     -d amount=1099 \
     -d currency=usd \
     -d setup_future_usage=off_session \
     -d customer={{CUSTOMER_ID}} \
     -d "payment_method_types[]"=us_bank_account

3. Sélectionnez une méthode de vérification.

Lorsque vous utilisez le prélèvement automatique ACH avec le Payment Element, vous pouvez uniquement sélectionner automatic ou instant .

En savoir plus sur l’utilisation du prélèvement automatique ACH avec Stripe.

Tester le prélèvement automatique ACH

BLIK

Lorsqu’il utilise Payment Element avec BLIK, l’utilisateur peut fermer la fenêtre modale l’invitant à autoriser le paiement dans son application bancaire. Cela déclenche une redirection vers votre return_url et ne renvoie pas l’utilisateur vers la page de paiement. En savoir plus sur l’utilisation de BLIK avec Stripe.

Afin de gérer la fermeture des fenêtres modales par les utilisateurs au niveau du gestionnaire côté serveur pour votre return_url, inspectez le PaymentIntent et vérifiez si son status est succeeded ou requires_action (ce qui signifie que le client a fermé la boîte de dialogue sans autoriser le paiement), puis traitez chaque cas de la manière appropriée.

Moyens de paiement par code QR

En cas d’utilisation du Payment Element avec un moyen de paiement par code QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), l’utilisateur peut fermer la fenêtre modale dans laquelle est affiché le code. Cette action entraîne une redirection vers votre page return_url et non vers la page de paiement.

Pour gérer la fermeture des fenêtre modales de code QR par les utilisateurs au niveau du gestionnaire côté serveur pour votre return_url, inspectez le PaymentIntent et vérifiez si son status est succeeded ou requires_action (ce qui signifie que le client a fermé la boîte de dialogue sans effectuer le paiement), puis traitez chaque cas de la manière appropriée.

Vous pouvez également empêcher la redirection automatique vers votre page return_url en transmettant le paramètre facultatif avancé redirect=if_required, qui permet d’éviter toute redirection lors de la fermeture d’une fenêtre modale de code QR.

Cash App Pay

Le Payment Element affiche un formulaire dynamique différent selon qu’il s’agit d’un site Web de bureau ou d’un site Web mobile, car il utilise différentes méthodes d’authentification du client. En savoir plus sur l’utilisation de Cash App Pay avec Stripe.

PayPal

Pour utiliser PayPal, assurez-vous d’être sur un domaine enregistré.