Accepter un paiement Afterpay ou Clearpay

Pour commencer, il vous faut un compte Stripe. S’inscrire.

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'

Un PaymentIntent est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Créez tout d’abord un PaymentIntent sur votre serveur, puis indiquez le montant à encaisser ainsi que la devise. Si votre intégration inclut déjà l’API Payment Intents, ajoutez afterpay_clearpay à la liste des types de moyens de paiement valides pour votre PaymentIntent.

Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. L’exemple ci-dessous utilise l’attribut automatic_payment_methods, mais vous pouvez répertorier afterpay_clearpay dans les types de moyens de paiement. Dans la dernière version de l’API, le paramètre automatic_payment_methods est facultatif, car Stripe l’active déjà par défaut. Quelle que soit l’option choisie, veillez à activer Afterpay Clearpay dans le Dashboard.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]"=true \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"=CA \
  -d "shipping[address][country]"=US \
  -d "shipping[address][postal_code]"=94111

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

Options supplémentaires du moyen de paiement

Vous pouvez préciser un paramètre reference facultatif dans les options des moyens de paiement pour votre PaymentIntent qui définit un identifiant de commande interne pour le paiement. Bien que ces informations ne soient généralement pas visibles ni par l’entreprise ni par le consommateur, l’équipe d’assistance interne d’Afterpay peut y accéder lors des demandes d’assistance manuelles. L’identifiant est limité à 128 caractères et ne doit contenir que des lettres, des chiffres, des traits de soulignement, des barres obliques inversées et des tirets.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \
  -d "payment_method_options[afterpay_clearpay][reference]"="order_123"

À cette étape, vous effectuerez les paiements avec Afterpay côté client en utilisant Stripe.js.

Configurer Stripe.js

Lorsqu’un client clique pour payer avec Afterpay, nous vous recommandons d’utiliser Stripe.js pour soumettre le paiement à Stripe. Stripe.js est notre bibliothèque JavaScript de base pour créer les tunnels de paiement. Elle gère automatiquement les opérations complexes telles que la redirection décrite ci-dessous, et vous permettra de facilement étendre votre intégration à d’autres moyens de paiement à l’avenir. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant en haut de votre fichier HTML.

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement.

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx',
);

Au lieu de transmettre au client l’objet PaymentIntent dans son intégralité, utilisez la clé secrète du client de l’étape 2. Cette clé est différente de vos clés API qui servent à authentifier les requêtes envoyées aux API Stripe.

La clé secrète du client doit être utilisée avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

Utilisez stripe.confirmAfterpayClearpayPayment pour exécuter la redirection hors de votre page et effectuer le paiement. Ajoutez une adresse return_url à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le paiement effectué sur le site web ou l’application mobile Afterpay.

// Redirects away from the client
const {error} = await stripe.confirmAfterpayClearpayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },
    return_url: 'https://example.com/checkout/complete',
  }
);
if (error) {
  // Inform the customer that there was an error.
}

Lorsque votre client effectue un paiement, Stripe le redirige vers l’URL return_url et inclut les paramètres de requête d’URL suivants. La page de redirection peut utiliser ces paramètres pour récupérer l’état du PaymentIntent et ainsi afficher l’état du paiement pour le client.

Lorsque vous spécifiez une URL return_url, vous pouvez également ajouter vos propres paramètres de requête à utiliser sur la page de redirection.

Lorsque le client est redirigé vers votre site, vous pouvez utiliser le payment_intent_client_secret pour interroger le PaymentIntent et communiquer l’état de la transaction à votre client.