Affirm Drop-in integration

This page explains how to add Affirm to your existing Web Drop-in integration.

Requirements

Select which endpoint you are using:

Import resources for v6

If you are using Web Drop-in v6, import the resources you need for Affirm:

import { AdyenCheckout, Affirm} from '@adyen/adyen-web'

API reference

Select which endpoint you are using:

Optional Drop-in configuration

You can add the optional visibility configuration object to have more control over which fields are displayed to the shopper:

If you want to add optional configuration, include this in a configuration object.

const affirmConfiguration = {
  visibility: {
      personalDetails: "hidden", // These fields will not appear on the payment form.
      billingAddress: "readOnly", // These fields will appear on the payment form,
                                //but the shopper cannot edit them.
      deliveryAddress: "editable" // These fields will appear on the payment form,
                                // and the shopper can edit them.
                                // This is the default behavior.
  }
};

Include the affirmConfiguration object when creating a configuration object for Drop-in:

Pass the Drop-in configuration object when creating your instance of AdyenCheckout:

const checkout = await AdyenCheckout(configuration);

Capture the payment

After the goods have been sent, you also need to capture the payment. All Affirm payments have to be manually captured within 28 days, even if you have enabled automatic capture for other payment methods. Capturing the payment is what triggers the installment payment schedule for the shopper. If you do not manually capture the payment within 28 days, the authorization will expire.

If for any reason you need to capture a lesser amount than what was authorised, you need to issue a refund for the difference after the capture. For example, a customer purchases two items of USD 500 each, totaling USD 1,000, but only one is fulfilled. After capturing USD 1,000, you should issue a subsequent refund for the unfulfilled item of USD 500.

Test and go live

To receive your test credentials, contact Affirm. After reviewing your test transactions, Affirm will provide you with the credentials for processing live transactions.

You can check the status of the test payments in your test Customer Area > Transactions > Payments.

Before you can accept live Affirm payments, you need to submit a request for Affirm in your live Customer Area, and provide us with your Affirm live credentials.