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.

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.

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

Receive and store the checkout_id from the /api/v2/checkout/direct response.

{
    "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

Use the affirm.checkout function and configure the checkout object to launch the Affirm modal.

Call the affirm.checkout function
Set the checkoutAri parameter with the checkout_id
Set the mode parameter to 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.