This page explains how to add Affirm to your existing Components integration.
Requirements
Select the server-side flow that your integration uses:
API reference
Select which endpoint you are using:
Component configuration
v5.0.0 or later
If your integration uses iOS Components v5.0.0 or later, configure and create an instance of the Affirm Component:
v4.x.x
If your integration uses an earlier version of iOS Components:
There are no configuration steps specific to Affirm required for Components.
Optional configuration
Pre-filled shopper data
You can add configuration with the shopper's information, so that you can pre-fill the payment form.
The data property includes the following information that you can pre-fill:
| Property | Description | Data type |
|---|---|---|
personalDetails.firstName |
The shopper's first name. | String |
personalDetails.lastName |
The shopper's last name. | String |
personalDetails.dateOfBirth |
The shopper's date of birth. Format: YYYY-MM-DD. |
String |
personalDetails.shopperEmail |
The shoppers' email address. | String |
personalDetails.telephoneNumber |
The shopper's telephone number. | String |
billingAddress.street |
The street name for the billing address. | String |
billingAddress.houseNumberOrName |
The house number or name for the billing address. | String |
billingAddress.postalCode |
The postal code for the billing address. | String |
billingAddress.city |
The city for the billing address. | String |
billingAddress.stateOrProvince |
The state, province, or region for the billing address. | String |
billingAddress.country |
The two-character ISO 3166-1 alpha-2 country code for the billing address. | String |
deliveryAddress.street |
The street name for the delivery address. | String |
deliveryAddress.houseNumberOrName |
The house number or building name for the delivery address. | String |
deliveryAddress.postalCode |
The postal code for the delivery address. | String |
deliveryAddress.city |
The city for the delivery address. | String |
deliveryAddress.stateOrProvince |
The state, province, or region for the delivery address. | String |
deliveryAddress.country |
The two-character ISO 3166-1 alpha-2 country code for the delivery address. | String |
Payment form fields configuration
In the payment form, you can configure if groups of fields are visible or can be edited by the shopper.
Use the visibility property to configure groups of fields with the possible values:
- hidden: The fields do not show up in the payment form.
- readOnly: The fields show up in the payment form with the pre-filled values. The shopper cannot change the values. If you set any group of fields with this value, you must provide the corresponding information in the pre-filled object.
- editable: The fields show up in the payment form with the pre-filled values. The shopper can change the values.
| Fields | Default value |
|---|---|
companyDetails |
hidden |
personalDetails |
editable |
billingAddress |
editable |
deliveryAddress |
editable |
bankAccount |
hidden |
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout. - The payment method-specific configuration.
const affirmComponent = new (checkout, affirmConfiguration).mount('#affirm-container');v5.x.x or earlier
Use the create method of your AdyenCheckout instance, in this case checkout, to create an instance of the Component. Add the configuration object if you created one.
const affirmComponent = checkout.create('affirm', affirmConfiguration).mount('#affirm-container');Capture the payment
After the goods have been sent, you also need to capture the payment. All Affirm payments have to be captured within 28 days. Capturing the payment is what triggers the installment payment schedule for the shopper. If you do not 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.