Créer une page de paiement personnalisée incluant 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 représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet PaymentIntent qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus.

Si vous collectez des informations de carte en vue d’une utilisation ultérieure avec Setup Intents, listez les moyens de paiement manuellement au lieu d’utiliser des moyens de paiement dynamiques. Pour utiliser Link sans moyens de paiement dynamiques, mettez à jour votre intégration pour transmettre link à payment_method_types.

Lorsque vous créez un PaymentIntent, proposez dynamiquement à vos clients les moyens de paiement les plus pertinents, y compris Link, en utilisant des moyens de paiement dynamiques. Pour utiliser des moyens de paiement dynamiques, n’incluez pas le paramètre payment_method_types. Vous pouvez également activer l’option automatic_payment_methods.

Pour ajouter Link à votre intégration Elements en utilisant des moyens de paiement dynamiques :

1. Dans votre Dashboard, dans les paramètres des moyens de paiement, activez Link.
2. Si vous disposez d’une intégration existante qui répertorie manuellement les moyens de paiement, supprimez le paramètre payment_method_types de votre intégration.

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

Le PaymentIntent 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 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 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.confirmPayment pour mener à bien le paiement à l’aide des informations collectées auprès de votre client grâce aux différents formulaires Elements. Fournissez une return_url à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le paiement effectué.

Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme la page d’autorisation de sa banque, avant d’être redirigé vers votre page return_url.

By default, card and bank payments immediately redirect to the return_url when a payment is successful. If you don’t want to redirect to the return_url, you can use if_required to change the behavior.

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>
  );
}

La return_url correspond à une page de votre site Web qui indique l’état du paiement du PaymentIntent au moment d’afficher la page de redirection. Lorsque Stripe redirige le client vers cette return_url, vous pouvez utiliser les paramètres de requête d’URL suivants afin de vérifier l’état du paiement. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez votre return_url. Ils seront conservés tout au long du processus de redirection.

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez un webhook pour recevoir ces événements et exécuter des actions en conséquence, telles que l’envoi d’une confirmation de commande par e-mail à votre client, l’enregistrement de la vente dans une base de données ou encore le lancement d’un flux de livraison.

Configurez votre intégration de manière à écouter ces événements plutôt que d’attendre un rappel de votre client. Lorsque vous attendez, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de moyens de paiement avec une seule intégration.

En plus de l’événement payment_intent.succeeded, vous pouvez également gérer deux autres événements lorsque vous encaissez des paiements à l’aide du composant Element Payment :

À 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.