Modale avec Direct Checkout

Activez une expérience de paiement fluide avec la caisse modale d’Affirm en utilisant l’API Paiement direct, tout en gardant les clients sur votre site sans redirections. Apprenez comment envoyer les données de caisse, récupérer l'ID de caisse et lancer la fenêtre modale pour un flux de paiement fluide côté client, avec confirmation en temps réel.

Aperçu

With Modal checkout, your customers go through the the Affirm loan application flow in a modal while remaining on your site. As a result, customers experience a seamless process since this flow doesn't redirect to an affirm.com site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from affirm.js instead of HTTP.

If you're using our Direct Checkout API , follow these steps to retrieve the checkout ID on your server-side. Then, launch the modal from the client-side while supplying the checkout ID.

1. Envoyer l'objet de paiement à Affirm

Call the /api/v2/checkout/direct endpoint to send the checkout object to Affirm.

curl --request POST \
     --url https://api.affirm.com/api/v2/checkout/direct \
     --header 'Accept: application/json' \
     --header 'Content-Type: application/json' \
     --data '
{
     "merchant": {
          "use_vcn": "false"
     }
}
'

2. Recevoir le checkout_id de la réponse

Recevez et stockez l'adresse checkout_id à partir de la réponse /api/v2/checkout/direct.

{
    "redirect_url": "https://sandbox.affirm.com/products/checkout?public_api_key=AF8E24MPN009M9OS&checkout_ari=PO4D77JZ6W5X123T",
    "checkout_id": "PO4D77JZ6W5X123T"
}

3. Lancer la fenêtre modale Affirm

Utilisez la fonction affirm.checkout et configurez l'objet checkout pour lancer la fenêtre modale Affirm.

Appelez la fonction affirm.checkout.
Configurez le paramètre checkoutAri avec l'identifiant de caisse
Réglez le paramètre mode sur modal.
Lancer la fenêtre modale Affirm

affirm.checkout({
  ...
  "checkoutAri"  : "PO4D77JZ6W5X123T",
  "metadata": {
     "mode": "modal"
  }
});
...
affirm.checkout.open();

Recette

Utilisez notre recette de paiement modal pour parcourir le code étape par étape.