--- title: "Web Drop-in" description: "Add TWINT to your Drop-in integration." url: "https://docs.adyen.com/payment-methods/twint/web-drop-in" source_url: "https://docs.adyen.com/payment-methods/twint/web-drop-in.md" canonical: "https://docs.adyen.com/payment-methods/twint/web-drop-in" last_modified: "2026-05-25T12:55:01+02:00" language: "en" --- # Web Drop-in Add TWINT to your Drop-in integration. [View source](/payment-methods/twint/web-drop-in.md) You can add TWINT to your existing integration. The following instructions show only what you must add to your integration specifically for TWINT. If an instruction on this page corresponds with a step in the main integration guide, it includes a link to corresponding step of the main integration guide. The additions you must make depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses: ## Sessions flow Drop-in ### Drop-In-Before-You-Begin ## Requirements | Requirement | Description | | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Sessions flow [Web Drop-in integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in). | | | **Checkout API** | Make sure that you use Checkout API v68 or later. | | | **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add TWINT in your Customer Area](/payment-methods/add-payment-methods). | | ### Drop-In-Add-Parameters-Sessions-Request ## Add additional parameters to your /sessions request You do not need to add any parameters when you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in#create-a-payment-session). ### Drop-In-Import-Optional ## Import TWINT (optional) When you [import Adyen Web](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in#get-adyen-web), you can optionally import individual payment methods to optimize performance by using [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). To do this, include `Twint`. **Import** ```javascript import { AdyenCheckout, Dropin, Twint } from '@adyen/adyen-web'; ``` ### Drop-In-Recurring ## Recurring payments To make recurring payments for TWINT, you need to: 1. [Create a shopper token](#create-a-token). 2. [Use the token to make future payments for the shopper](#make-payment-with-token). ### Create a token To create a token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `storePaymentMethod`: **true** * [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper (minimum length three characters). When the payment details have been stored, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing: * `type`: **recurring.token.created** * `shopperReference`: your unique identifier for the shopper. * `eventId`: the `pspReference` of the initial payment. * `storedPaymentMethodId`: the token that you need to make recurring payments for this shopper. Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area). ### Make a payment with a token To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook. You can also get this value using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/Recurring/latest/post/listRecurringDetails) endpoint. * `shopperReference`: The unique shopper identifier that you specified when creating the token (minimum length three characters). * `shopperInteraction`: **ContAuth**. * `recurringProcessingModel`: **Subscription** or **UnscheduledCardOnFile**. For more information about the `shopperInteraction` and `recurringProcessingModel` fields, refer to [Tokenization](/online-payments/tokenization/). ### Drop-In-Test-And-Go-Live ## Test and go live Check the status of TWINT test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**. Before you can accept live TWINT payments, you need to [submit a request for TWINT](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/). ## Advanced flow Drop-in ### Drop-In-Before-You-Begin ## Requirements | Requirement | Description | | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Advanced flow [Web Drop-in integration](/online-payments/build-your-integration/advanced-flow?platform=%7B%7BgetParameter%28%27platform%27%29%7D%7D\&integration=Drop-in). | | | **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Drop-in#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add TWINT in your Customer Area](/payment-methods/add-payment-methods). | | ### Drop-In-Import-Optional ## Import TWINT (optional) When you [import Adyen Web](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Drop-in#get-adyen-web), you can optionally import individual payment methods to optimize performance by using [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). To do this, include `Twint`. **Import** ```javascript import { AdyenCheckout, Dropin, Twint } from '@adyen/adyen-web'; ``` ### Drop-In-Add-Parameters-Payments-Request ## Add additional parameters to your /payments request You do not need to add any parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request. ### Drop-In-Recurring ## Recurring payments To make recurring payments for TWINT, you need to: 1. [Create a shopper token](#create-a-token). 2. [Use the token to make future payments for the shopper](#make-payment-with-token). ### Create a token To create a token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `storePaymentMethod`: **true** * [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper (minimum length three characters). When the payment details have been stored, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing: * `type`: **recurring.token.created** * `shopperReference`: your unique identifier for the shopper. * `eventId`: the `pspReference` of the initial payment. * `storedPaymentMethodId`: the token that you need to make recurring payments for this shopper. Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area). ### Make a payment with a token To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook. You can also get this value using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/Recurring/latest/post/listRecurringDetails) endpoint. * `shopperReference`: The unique shopper identifier that you specified when creating the token (minimum length three characters). * `shopperInteraction`: **ContAuth**. * `recurringProcessingModel`: **Subscription** or **UnscheduledCardOnFile**. For more information about the `shopperInteraction` and `recurringProcessingModel` fields, refer to [Tokenization](/online-payments/tokenization/). ### Drop-In-Test-And-Go-Live ## Test and go live Check the status of TWINT test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**. Before you can accept live TWINT payments, you need to [submit a request for TWINT](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/). ## Capture the payment By default, TWINT payments are captured automatically. This means that the **Capture Delay** setting in your [Customer Area](https://ca-test.adyen.com/) is set to **Immediate** or **1–7 days**. In case **Capture Delay** is set to **Manual**, then you need to [manually capture the payment](/online-payments/capture#manual-capture). 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](/online-payments/capture) a TWINT payment, specify in your  [/payments/{paymentPspReference}/captures](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures) request: * `modificationAmount`: The amount that the shopper should pay. The following example shows how to make a partial capture request: **/capture request** ```json { "reference":"PSP_REFERENCE", "amount":{ "value":"2500", "currency":"CHF" }, "merchantAccount":"YOUR_MERCHANT ACCOUNT" } ``` Any unclaimed amount that is left over after partially capturing a payment is automatically cancelled. ## Recurring payments To make recurring payments for TWINT, you need to: 1. [Create a shopper token](#create-a-token). 2. [Use the token to make future payments for the shopper](#make-payment-with-token). ### Create a token To create a token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `storePaymentMethod`: **true** * [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper (minimum length three characters). When the payment details have been stored, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing: * `type`: **recurring.token.created** * `shopperReference`: your unique identifier for the shopper. * `eventId`: the `pspReference` of the initial payment. * `storedPaymentMethodId`: the token that you need to make recurring payments for this shopper. Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area). ### Make a payment with a token To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook. You can also get this value using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/Recurring/latest/post/listRecurringDetails) endpoint. * `shopperReference`: The unique shopper identifier that you specified when creating the token (minimum length three characters). * `shopperInteraction`: **ContAuth**. * `recurringProcessingModel`: **Subscription** or **UnscheduledCardOnFile**. For more information about the `shopperInteraction` and `recurringProcessingModel` fields, refer to [Tokenization](/online-payments/tokenization/).