On this page, you can find additional configuration for adding TWINT to your Components integration.
Before you begin
This page assumes you've already:
API reference
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 advanced use case, or integrated Components before v5.0.0.
Component configuration
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:
<div id="twint-container"></div>Step 2: Create an instance of the Component
Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:
const twintComponent = checkout.create('twint').mount('#twint-container');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.
Partial capture
TWINT supports partial capture, but not multiple partial captures. To partially capture a TWINT payment, specify in your /payments/paymentPspReference/captures request:
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.
Before you can accept live TWINT payments, you need to submit a request for TWINT in your live Customer Area.