On this page, you can find additional configuration for adding TWINT to your Components integration.
Before you begin
This page assumes you have already:
You don't need to send additional fields for TWINT. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:
- /sessions: This is the default with Components v5.0.0 or later.
- /payments: If you implemented an additional use case.
Step 1: Create a DOM element
Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:
Step 2: Create an instance of the Component
create method of your
AdyenCheckout instance, in this case
checkout, to create the Component:
const twintComponent = checkout.create('twint').mount('#twint-container');
To make recurring payments for TWINT, you need to:
Create a token
To create a token, include in your /payments request:
- shopperReference: Your unique identifier for the shopper (minimum length three characters).
When the payment details have been stored, you receive a webhook containing:
pspReferenceof the initial payment.
pspReference: This is the token you need to make recurring payments for this shopper.
Make sure your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. If you have not requested this additional configuration yet, contact our Support Team.
Make a payment with a token
To make a payment with the token, include in your /payments request:
pspReferencefrom the RECURRING_CONTRACT webhook.
You can also get this value by using the /listRecurringDetails endpoint.
shopperReference: The unique shopper identifier that you specified when creating the token (minimum length three characters).
recurringProcessingModel: Subscription or UnscheduledCardOnFile.
For more information about the
recurringProcessingModel fields, refer to Recurring transaction types.
Capture the payment
By default, TWINT payments are captured automatically. This means that the Capture Delay setting in your Customer Area is set to Immediate or 1–7 days.
In case Capture Delay is set to Manual, then you need to manually capture the payment. The authorization for TWINT payments expires after 7 days, so make sure you capture the payment before then.
modificationAmount: The amount that the shopper should pay.
The following example shows how to make a partial capture request:
Any unclaimed amount that is left over after partially capturing a payment is automatically cancelled.
Test and go live
Check the status of TWINT test payments in your Customer Area > Transactions > Payments.