Configurer des paiements futurs à l'aide d'Elements et de Link

Tout d’abord, créez un compte Stripe ou connectez-vous.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

# Available as a gem
sudo gem install stripe

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

Pour configurer un moyen de paiement en vue de paiements ultérieurs, vous devez l’associer à un objet Customer. Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Les objets Customer permettent de réutiliser des moyens de paiement et de suivre plusieurs paiements.

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

Un SetupIntent est un objet qui représente votre intention, au cours d’une session, de configurer le moyen de paiement d’un client pour les paiements futurs. Il permet également de suivre l’état de la session. Sur votre serveur, créez un SetupIntent en spécifiant link et les autres moyens de paiement que vous voulez prendre en charge :

curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]"=card \
  -d "payment_method_types[]"=link

Pour découvrir comment configurer d’autres moyens de paiement, consultez le guide Configurer des paiements futurs.

Récupérer la clé secrète du client

Le SetupIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {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 authentifie un client à l’aide de son adresse e-mail. En fonction de votre tunnel de paiement, vous disposez des options suivantes : transmettre une adresse e-mail au composant Payment Element, la collecter directement dans le composant Payment Element ou utiliser le composant Link Authentication Element. Stripe vous recommande, si possible, de transmettre l’adresse e-mail du client au composant Payment Element.

Transmettre une adresse e-mail

Collecter une adresse e-mail

Utiliser le composant Link Authentication Element

Si l’un de ces cas s’applique à votre situation :

• Vous voulez un composant unique et optimisé pour la collecte des adresses e-mail et l’authentification Link.
• Vous devez collecter l’adresse de livraison de votre client.

Utilisez le flux d’intégration qui implémente les composants Link Authentication Element, Payment Element et Address Element (facultatif).

Une page de paiement sur laquelle Link est activé comprend le composant Link Authentication Element, suivi de l’Address Element et enfin du Payment Element. Vous pouvez également afficher le Link Authentication Element sur des pages distinctes, dans le même ordre, pour les tunnels de paiement multipages.

Créer un formulaire de paiement à l’aide de plusieurs composants Elements

L’intégration fonctionne comme suit :

Vous pouvez désormais personnaliser votre formulaire de paiement grâce aux composants d’interface utilisateur préconfigurés d’Elements. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit commencer par https:// et non par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez HTTPS lorsque vous êtes prêt à accepter des paiements en mode production.

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'}}}/>

Utilisez stripe.confirmSetup pour finaliser la configuration à l’aide des informations que vous avez collectées. Ajoutez une return_url à cette fonction pour que Stripe puisse rediriger l’utilisateur une fois la configuration terminée. Si un paiement Link ou par carte aboutit, Stripe redirige immédiatement le client vers la page return_url.

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.confirmSetup({
      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>
  );
}

Au moment de débiter votre client, utilisez l’ID des objets Customer et PaymentMethod pour créer un PaymentIntent. Pour trouver un moyen de paiement à débiter, répertoriez les moyens de paiement associés à votre client.

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

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement, avec les paramètres suivants :

• Assignez la valeur true à la propriété confirm du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
• Définissez payment_method sur l’ID du PaymentMethod
• Définissez customer sur l’ID du client.
• Définissez off_session sur true. Si votre client doit s’authentifier alors qu’il n’utilise pas activement votre site ou votre application, le PaymentIntent enverra une erreur.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

À l’heure actuelle, Link fonctionne uniquement pour les cartes de crédit, les cartes de débit et les achats admissibles effectués via un compte bancaire américain. Link nécessite un enregistrement de domaine.

You can create sandbox accounts for Link using any valid email address. The following table shows the fixed one-time passcode values that Stripe accepts for authenticating sandbox accounts:

Pour tester des moyens de paiement spécifiques, consultez les exemples de tests du composant Payment Element.

Sources de financement multiples

Dans la mesure où Stripe prend en charge des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec les mêmes délais de virement de fonds et les mêmes garanties que pour les paiements par carte ou par compte bancaire.

Authentification de carte bancaire et 3D Secure

Link prend en charge l’authentification 3D Secure 2 (3DS2) pour les paiements par carte bancaire. 3DS2 impose aux clients une étape de vérification supplémentaire auprès de l’émetteur de la carte au moment du paiement. Les paiements ayant été authentifiés avec 3D Secure sont couverts par un transfert de responsabilité.

To trigger 3DS2 authentication challenge flows with Link in a sandbox, use the following test card with any CVC, postal code, and future expiration date: 4000000000003220

.

In a sandbox, the authentication process displays a mock authentication page. On that page, you can either authorize or cancel the payment. Authorizing the payment simulates successful authentication and redirects you to the specified return URL. Clicking the Failure button simulates an unsuccessful attempt at authentication.

Pour obtenir plus d’informations, veuillez consulter la page dédiée à l’authentification 3D Secure.