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 pour une utilisation future, consultez Configurer des paiements futurs.

Lorsque vous créez un PaymentIntent, proposez de manière dynamique à 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.

Pour ajouter Link à votre intégration d’éléments en utilisant des moyens de paiement dynamiques :

1. Dans les paramètres moyens de paiement de votre Dashboard, 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 Element Payment, la collecter directement dans le composant Element Payment ou utiliser le composant Element Contact Details. Stripe vous recommande, si possible, de transmettre l’adresse e-mail du client au composant Element Payment.

Transmettre une adresse e-mail

Collecter une adresse e-mail

Utilisez le composant Element Contact Details

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 Element Contact Details, Payment et Address (facultatif).

Une page de paiement sur laquelle Link est activé comprend le composant Element Contact Details, suivi du composant Element Address et enfin du composant Element Payment. Vous pouvez également afficher le composant Element Contact Details 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,
  ContactDetailsElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

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

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<ContactDetailsElement onChange={(event) => {
  setEmail(event.value.email);
}} />

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

Par défaut, les paiements bancaires et les paiements par carte redirigent immédiatement le client vers la return_url une fois le paiement abouti. Si vous ne voulez pas le rediriger vers la return_url, vous pouvez modifier le comportement par défaut en utilisant if_required.

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_oKhSR5nslBRnBZpjO6KuzZeX');

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 effectués à partir d’un compte bancaire américain éligible. Link requiert un enregistrement de domaine.

Vous pouvez créer des comptes environnement de test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes environnement de test :

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

Pour déclencher les flux de demande d’authentification complexes 3DS2 dan sun environnement de test avec Link, utilisez la carte de test suivante avec n’importe quel CVC, code postal et date d’expiration ultérieure : 4000000000003220

.

Dans un environnement de test, une page d’authentification factice s’affiche pour le processus d’authentification. Sur cette page, vous pouvez autoriser ou annuler le paiement. L’autorisation du paiement simule une authentification réussie et vous redirige vers l’URL de retour spécifiée. Un clic sur le bouton Échec simule une tentative d’authentification infructueuse.

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