Créer une page de paiement personnalisée incluant Link

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

Utilisez nos bibliothèques officielles pour accéder à l’API de 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'

Stripe utilise un objet PaymentIntent pour représenter votre intention de percevoir le paiement d’un client, qui suit les tentatives de paiement et les changements d’état de paiement tout au long du processus.

Si vous collectez des informations de carte en vue d’une utilisation ultérieure avec Setup Intents, répertoriez les modes de paiement manuellement au lieu d’utiliser des modes de paiement dynamiques. Pour utiliser Link sans modes 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 modes de paiement les plus pertinents, y compris Link, à l’aide de modes de paiement dynamiques. Pour utiliser des modes 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 à l’aide de modes de paiement dynamiques :

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

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

L’objet PaymentIntent comprend une clé secrète du client utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au 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 courriel. En fonction de votre flux de paiement, vous avez les options suivantes : transmettre une adresse courriel à Payment Element, collecter l’adresse courriel directement dans le Payment Element ou utiliser le Link Authentication Element. Parmi celles-ci, Stripe recommande de transmettre une adresse courriel du client au Payment Element si disponible.

Transmettre dans un courriel

Collecter une adresse courriel

Utiliser le Link Authentication Element

If l’un des critères suivants s’applique à vous :

• Vous voulez un composant unique et optimisé pour la collecte des adresses courriel et l’authentification de Link.
• Vous devez collecter une adresse de livraison auprès de votre client.

Utilisez ensuite le flux d’intégration qui met en œuvre ces éléments : le Link Authentication Element, le Payment Element et l’Address Element facultatif.

Une page de paiement qui prend en charge Link comporte le Link Authentication Element en premier, suivi de l’Address Element et du Payment Element à la fin. Vous pouvez également afficher Link Authentication Element dans des pages distinctes, dans le même ordre, pour les flux de paiement de plusieurs pages.

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

L’intégration fonctionne comme suit :

Vous pouvez désormais configurer votre formulaire de paiement personnalisé à l’aide des composants Elements d’interface utilisateur préconfigurés. 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. Activer le protocole HTTPS au moment d’accepter des paiements réels.

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 finaliser le paiement à l’aide des informations collectées auprès de votre client grâce aux différents formulaires Elements. Ajoutez une return_url à cette fonction pour indiquer où Stripe redirige l’utilisateur une fois le paiement effectué.

Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant que Stripe le redirige vers la 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 que le paiement a abouti. Si vous ne souhaitez pas le rediriger vers la return_url, vous pouvez utiliser if_required pour modifier le comportement.

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

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

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utiliser un webhook pour recevoir ces événements et exécutez des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Configurez votre intégration pour écouter ces événements plutôt que d’attendre un rappel de votre client. Lorsque vous attendez un rappel de votre client, ce dernier peut fermer la fenêtre de son navigateur ou quitter 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 modes de paiement avec une seule intégration.

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

À l’heure actuelle, Link fonctionne uniquement avec les cartes de crédit, les cartes de débit et les achats admissibles effectués à partir d’un compte bancaire des États-Unis. Link exige l’enregistrement de domaine.

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

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

Sources de financement multiples

Au fur et à mesure que Stripe ajoute des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec le même délai de règlement des transactions et les mêmes garanties que les paiements par carte et par compte bancaire.

Authentification des cartes et 3D Secure

Link prend en charge l’authentification 3D Secure 2 (3DS2) pour les paiements par carte. 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 authentifiés avec succès à l’aide de 3D Secure sont couverts par un transfert de responsabilité.

Pour déclencher les flux de demande d’authentification 3DS2 avec Link dans un bac à sable, utilisez la carte de test suivante avec n’importe quel CVC, code postal et date d’expiration future : 4000000000003220

.

Dans un bac à sable, 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, consultez la page sur l’authentification 3D Secure.