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.
Mis à jour 2 months ago