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.

Si vous utilisez notre [API Direct Checkout](https://docs.affirm.com/developers/reference/direct), suivez les étapes suivantes pour récupérer l'identifiant du checkout sur votre serveur. Ensuite, lancez la fenêtre modale du côté client tout en fournissant l'identifiant du checkout.

É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.