Accepter un paiement

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

• Inviter les acheteurs à consentir à enregistrer un moyen de paiement
• Enregistrer les moyens de paiement lorsque les acheteurs donnent leur consentement
• Afficher aux acheteurs les moyens de paiement enregistrés pour leurs prochains achats
• Mise à jour automatique des cartes perdues ou expirées lorsque les clients les remplacent

Enregistrez les modes de paiement.

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

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

Lors de la création d’un PaymentIntent sur votre serveur, vous créez également une session CustomerSession fournissant un ID d’objet Customer et activant le composant payment_element pour votre session. Configurez les fonctionnalités des modes 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 mode de paiement. Ainsi, vous enregistrez automatiquement le mode 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 CustomerSession pour accéder aux modes de paiement enregistrés de ce client. Traitez les erreurs correctement lorsque vous créez la session CustomerSession. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session CustomerSession à l’instance Elements, car ceci est facultatif.

Créez l’instance Elements à l’aide des clés secrètes du client pour le PaymentIntent et la CustomerSession. Ensuite, utilisez cette instance 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 récupération du CVC

Vous pouvez également spécifier require_cvc_recollection lors de la création du PaymentIntent afin d’exiger à nouveau la collecte du CVC lorsque le client paie par carte.

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

Pour contrôler le contenu dynamique lorsqu’un moyen de paiement enregistré est sélectionné, écoutez l’événement change de Payment Element, qui est rempli avec 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 Payment Element pour permettre à vos clients de payer plus rapidement. Vous pouvez remplir automatiquement les informations de tout client connecté qui utilise déjà Link, qu’il ait initialement enregistré ou non 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 modes de paiement.

Recueillir l’adresse de courriel d’un client pour l’authentification ou l’inscription à Link

Options d’intégration

Il existe deux façons d’intégrer Link au Payment Element. Parmi ceux-ci, Stripe recommande de transmettre l’adresse de courriel du client au Payment si disponible. N’oubliez pas de tenir compte du fonctionnement de votre processus de paiement lorsque vous choisissez entre ces options :

Vous pouvez mettre à jour les attributs du PaymentIntent après la présentation du Payment Element, tels que le montant (par exemple, les codes de réduction ou les frais de livraison). Vous pouvez mettre à jour le PaymentIntent sur votre serveur, puis appeler elements.fetchUpdates pour faire figurer le nouveau montant dans le Payment Element. Cet exemple vous montre comment créer le point de terminaison du serveur qui met à jour le montant sur le 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();
  }
})();

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

Affirm

Pour commencer à utiliser Affirm, vous devez 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 sur le client après que le client ait sélectionné son moyen de paiement. En savoir plus sur l’utilisation de 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

Apprenez 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 de Afterpay avec Stripe.

Vous pouvez gérer les modes de paiement à partir du Dashboard. Stripe gère le retour des modes de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement. L’exemple ci-dessous utilise l’attribut automatic_payment_methods, mais vous pouvez répertorier afterpay_clearpay avec les types de modes de paiement. Dans la dernière version de l’API, la définition du paramètre automatic_payment_methods est facultative, car Stripe active sa fonctionnalité par défaut. Quelle que soit l’option que vous choisissez, assurez-vous d’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 les paiements avec Afterpay (Clearpay)

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

Apple Pay et Google Pay

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

• Activez-les dans vos paramètres des moyens de paiement. Apple Pay est activé par défaut.
• Utilisez votre application via HTTPS en mode développement et production.
• Enregistrez votre domaine.
• Récupérer 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 numérique reste synchronisée.

Pour en savoir plus sur l’utilisation de Apple Pay et Google Pay avec Stripe.

Prélèvement automatique ACH

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

1. Créer 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. Spécifiez 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électionner une méthode de vérification

Lorsque vous utilisez le moyen de paiement par prélèvement automatique ACH avec le Payment Element, vous ne pouvez sélectionner que 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

Lorsque vous utilisez le Payment Element avec BLIK, l’utilisateur peut fermer la fenêtre modale pour autoriser le paiement dans son application. 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.

Pour gérer les situations où des utilisateurs ferment des boîtes de dialogue modales, accédez au gestionnaire côté serveur de votre return_url, et vérifiez si le paramètre status a pour valeur 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 comme il convient.

Moyens de paiement par code QR

Lorsque vous utilisez le 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 de dialogue sur laquelle est affichée le code. Cette action entraîne une redirection vers votre page return_url et non pas vers la page de paiement.

Pour gérer les situations où des utilisateurs ferment des boîtes de dialogue modales du code QR, accédez au gestionnaire côté serveur de votre return_url, et vérifiez si le paramètre status a pour valeur 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 comme il convient.

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 après la fermeture de la fenêtre modale du code QR.

Paiement en espèces par application

Le Payment Element affiche un formulaire dynamique différemment sur le Web de bureau ou le 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 que vous êtes sur un domaine enregistré.