Payment-method icon

Affirm iOS Component integration

Add Affirm to your existing iOS Components integration.

This page explains how to add Affirm to your existing Components integration.

Requirements

Select the server-side flow that your integration uses:

Requirement Description
Integration type Make sure that you have built a Sessions flow Components integration.
Setup steps Before you begin, add Affirm in your Customer Area.

API reference

Select which endpoint you are using:

This is the default with Components v5.0.0 or later.

Parameter name Required Description
shopperName -white_check_mark- Shopper's first name and last name.
telephoneNumber -white_check_mark- The shopper's phone number.
shopperEmail -white_check_mark- The shopper's email address.
shopperReference -white_check_mark- A unique reference to identify the shopper (minimum length three characters).
billingAddress The address where to send the invoice.
deliveryAddress The address where the purchased goods should be delivered. If blank or missing, billingAddress is used by default.
lineItems Price and product information about the purchased items. This is optional, but we recommend to include this data to improve approval rates.
Expand view
Copy link to code block
Copy code
Copy code
curl https://checkout-test.adyen.com/v69/sessions \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
"merchantAccount":"YOUR_MERCHANT_ACCOUNT",
"countryCode":"US",
"amount":{
"currency":"USD",
"value":5000
},
"shopperReference":"YOUR_UNIQUE_SHOPPER_ID",
"reference":"YOUR_ORDER_NUMBER",
"shopperName":{
"firstName":"Simon",
"lastName":"Hopper"
},
"telephoneNumber":"+1612345678",
"shopperEmail":"s.hopper@example.com",
"billingAddressstate.data.billingAddress from onSubmit":{
"city":"San Francisco",
"country":"US",
"houseNumberOrName":"274",
"postalCode":"94107",
"stateOrProvince":"CA",
"street":"Brennan St."
},
"deliveryAddressstate.data.deliveryAddress from onSubmit":{
"city":"San Francisco",
"country":"US",
"houseNumberOrName":"274",
"postalCode":"94107",
"stateOrProvince":"CA",
"street":"Brennan St."
},
"returnUrl":"my-app://adyen",
"lineItems":[
{
"quantity":"1",
"amountExcludingTax":"331",
"description":"Shoes",
"id":"Item #1",
"taxAmount":"69",
"productUrl":"https://your-company.com/item1/",
"imageUrl":"https://your-company.com/item1.jpg"
},
{
"quantity":"2",
"amountExcludingTax":"248",
"description":"Socks",
"id":"Item #2",
"taxAmount":"52",
"productUrl":"https://your-company.com/item2/",
"imageUrl":"https://your-company.com/item2.jpg"
}
]
}'

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:

Component configuration
Expand view
Copy link to code block
Copy code
Copy code
let paymentMethods = session.sessionContext.paymentMethods
// Check that the payment method is supported before showing the Component.
guard let paymentMethod = paymentMethods.paymentMethod(ofType: AffirmPaymentMethod.self) else { return }
let configuration = AffirmComponent.Configuration()
let component = AffirmComponent(paymentMethod: paymentMethod,
context: context,
configuration: configuration)
self.currentComponent = component
// Set the session as the delegate.
component.delegate = session
present(component)

v4.x.x

If your integration uses an earlier version of iOS Components:

Component configuration
Expand view
Copy link to code block
Copy code
Copy code
// Check that the payment method is supported before showing the Component.
guard let paymentMethod = paymentMethods.paymentMethod(ofType: AffirmPaymentMethod.self) else { return }
let style = FormComponentStyle()
let component = AffirmComponent(paymentMethod: paymentMethod,
apiContext: context,
style: style)
present(component)

There are no configuration steps specific to Affirm required for Components.

Optional configuration

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

Parameter name Description
personalDetails Shopper name, phone number, and email address.
billingAddress The address where to send the invoice.
deliveryAddress The address where the purchased goods should be delivered.

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

Copy code
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.
}
};

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
  • The payment method-specific configuration.
Copy code
const affirm = new (checkout, affirmConfiguration).mount('#affirm-container');

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.

Copy code
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 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.

See also