Aperçu

With our Inline integration, you can highlight Affirm’s value proposition early in the checkout flow and set clear expectations with your customers.

How It Works

When a customer selects Affirm as a payment option, the view expands to display the following information:

• Value propositions: Highlights some of the benefits of paying with Affirm.
• En savoir plus sur Affirm : un lien En savoir plus qui ouvre notre modal éducatif.
• Payment Timeline: le calendrier et le montant de chaque paiement.

Inline Flow

1. Render Affirm Checkout

Créez un objet de caisse et lancez l'expérience en ligne Affirm à l'aide des fonctions affirm.checkout.open() et affirm.checkout.inline() .

affirm.checkout({
          total: 15099
        });
affirm.checkout.inline({
          merchant: {
            inline_container: "custom-inline-checkout-container"
          },
        });

2. Specify an ID in the Merchant Object

Fournissez un conteneur et spécifiez un identifiant dans l'objet commerçant à l'aide de la clé « inline_conteneur ». La définition d'un conteneur spécifie l'endroit où vous souhaitez que l'option de paiement s'affiche et assure qu'elle est correctement espacée.

"merchant": {
        "inline_container": "my-special-classname"
      },

📘

Important

If you don’t specify an id, affirm.js looks for a container named with a default ID of affirm-inline-checkout-container.

Recette

Our Inline value proposition integration recipe provides a step-by-step walk-through of the code sample.

Exemple

Platform Integrations

Inline is currently available for the Magento 2 (Adobe Commerce), WooCommerce, and Shopify Plus e-commerce platforms.