Modal Checkout with Direct Checkout

Aperçu

Avec le paiement par modal, vos clients passent par le flux de demande de prêt Affirm dans une fenêtre modale tout en restant sur votre site. Donc, les clients bénéficient d'un processus transparent, car ce flux ne redirige pas vers un site affirm.com. Le paiement modal permet également d'activer les callbacks côté client afin que vous puissiez recevoir la confirmation de paiement de affirm.js au lieu de 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.

Étape 1 : Envoyer l'objet de paiement à Affirm

Appelez la /api/v2/checkout/direct pour envoyer l'objet checkout à 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"
     }
}
'

Étape 2 : Recevoir le checkout_id de la réponse

Recevez et stockez le checkout_id 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"
}

Étape 3 : Lancer la modale Affirm

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

• Appeler la fonction affirm.checkout
• Définissez le paramètre checkoutAri avec le checkout_id
• Définissez le paramètre mode à 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.