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.

If you collect card details for future usage with Setup Intents, list payment methods manually instead of using dynamic payment methods. To use Link without dynamic payment methods, update your integration to pass link to payment_method_types.

When you create a PaymentIntent, dynamically offer your customers the most relevant payment methods, including Link, by using dynamic payment methods. To use dynamic payment methods, don’t include the payment_method_types parameter. Optionally, you can also enable automatic_payment_methods.

To add Link to your Elements integration using dynamic payment methods:

1. In your Dashboard payment method settings, turn on 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 authenticates a customer by using their email address. Depending on your checkout flow, you have the following options: pass an email to the Payment Element, collect it directly within the Payment Element, or use the Link Authentication Element. Of these, Stripe recommends passing a customer email address to the Payment Element if available.

Transmettre dans un courriel

Collecter une adresse courriel

Utiliser le Link Authentication Element

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

• You want a single, optimized component for email collection and Link authentication.
• Vous devez collecter une adresse de livraison auprès de votre client.

Then use the integration flow that implements these elements: the Link Authentication Element, Payment Element and optional Address Element.

A Link-enabled checkout page has the Link Authentication Element at the beginning, followed by the Address Element, and the Payment Element at the end. You can also display the Link Authentication Element on separate pages, in this same order, for multi-page checkout flows.

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 :

Currently, Link only works with credit cards, debit cards, and qualified US bank account purchases. Link requires domain registration.

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 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 supports 3D Secure 2 (3DS2) authentication for card payments. 3DS2 requires customers to complete an additional verification step with the card issuer when paying. Payments that have been successfully authenticated using 3D Secure are covered by a liability shift.

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

.

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.