AfterPay Component

Our AfterPay Component renders AfterPay in your payment form, and collects the required payment information from the shopper.

When making an AfterPay payment, you also need to:

1. Provide the shopper's IP address and information about the purchased items when making a payment request.
2. Capture the payment after the goods have been sent. This triggers the invoice to be sent to the shopper.

Requirements

Select which endpoint you are using:

Show AfterPay in your payment form

To present the AfterPay Component in your payment form:

1. From your server, make a POST /paymentMethods request and specify one of the following combinations of countryCode and amount.currency:

   Country/region	countryCode	amount.currency
   The Netherlands	NL	EUR
   Belgium	BE	EUR

2. Pass the full response from the /paymentMethods call as the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

3. Add the AfterPay Component:

   a. Create a DOM element for AfterPay, placing it where you want the form to be rendered:

   <div id="afterpay-container"></div>

   b. Create an instance of the AfterPay Component, and mount it. You can also include optional configuration for the visibility of the following shopper input fields:

   • personalDetails: Shopper name, date of birth, phone number, and email address.
   • billingAddress: The address where to send the invoice.
   • deliveryAddress: The address where the goods should be delivered.

   If you remove these fields from your payment form, you need to provide this information in your /payments request. For information on the required fields, refer to Make a payment.

   const afterpay = checkout.create("afterpay_default", {
     countryCode: "NL", // the country code from the
                       // `/paymentMethods` request
     visibility: { // Optional configuration
         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 behaviour.
     }
   }).mount('#afterpay-container');;
   

Make a payment

When the shopper selects to pay, the Component calls the onSubmit event, which contains a state.data. If state.isValid is true, collect the state.data and pass this to your server.

From your server, make a /payments request, including:

• The following objects, included in the state.data from the Component:
  • paymentMethod
  • shopperName
  • telephoneNumber
  • shopperEmail
  • dateOfBirth
  • billingAddress
  • deliveryAddress
• shopperIP : The shopper's IP address. AfterPay uses this for risk checks.
• lineItems : Price and product information about the purchased items. This is included on the invoice that AfterPay sends to the shopper.

The following example shows how to make a payment request for EUR 10.

The /payments response contains:

• resultCode: Use this to present the payment result to your shopper.
• pspReference: Our unique reference for the payment.
• merchantReference: Your reference from the /payments request.

Present the payment result

Use the  resultCode that you received in the /payments response to present the payment result to your shopper.

The resultCode values you can receive for AfterPay are:

Capture the payment

After the goods have been sent, you also need to capture the payment. All AfterPay payments have to be manually captured, even if you have enabled automatic capture for other payment methods. Capturing the payment is what triggers the invoice to be sent to the shopper.

Partial captures

To partially capture an AfterPay payment, specify in your /capture request:

• modificationAmount: The amount that the shopper should pay. 
• additionalData.openinvoicedata: Price and product information for the items that the shopper should pay for.

Although the field names are different, the information in additionalData.openinvoicedata is the same as what you provided in lineItems when making a /payments request:

The following example shows how to make a partial capture request if the shopper only kept one pair of socks from the two included in the original payment request.

Any unclaimed amount that is left over after partially capturing a payment is automatically cancelled. When your account is enabled for multiple partial captures, the unclaimed amount after an initial capture is not automatically cancelled.

If you are using partial captures for AfterPay, include the acquirer reference in your standard webhooks. You will then receive the acquirerReference in the additionalData of a CAPTURE webhook. Store this reference, as you will need it when making a (partial) refund request.

Refunds and cancellations

If an AfterPay payment has not yet been captured, you can cancel it. If the AfterPay payment has already been captured and you want to return the funds to the shopper, you need to refund it.

Partial refunds

To partially refund an AfterPay payment, specify in your /refund request:

• modificationAmount: The amount to be refunded to the shopper.
• additionalData.acquirerReference: The acquirerReference of the capture. This is needed if there are multiple partial captures available for the payment. When refunding in your Customer Area, you can add the acquirerReference manually as well.
• additionalData.openinvoicedata: Price and product information about the returned items.

Although the field names are different, the information in additionalData.openinvoicedata is the same as what you provided in lineItems when making a /payments request:

The following example shows how to make a partial refund request if the shopper returned the shoes included in the original payment request.

Test and go live

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

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

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

See also