Caisse par 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

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 de caisse direct , suivez ces étapes pour récupérer l'identifiant de caisse côté 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.