---
title: "Twint iOS Component"
description: "Add Twint to your Components integration."
url: "https://docs.adyen.com/payment-methods/twint/ios-component"
source_url: "https://docs.adyen.com/payment-methods/twint/ios-component.md"
canonical: "https://docs.adyen.com/payment-methods/twint/ios-component"
last_modified: "2026-06-01T15:33:15+02:00"
language: "en"
---

# Twint iOS Component

Add Twint to your Components integration.

[View source](/payment-methods/twint/ios-component.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 Component

### Before-You-Begin

## Requirements

| Requirement           | Description                                                                                                                                                                                                              |   |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - |
| **Integration type**  | Make sure that you have an existing Sessions flow [iOS Components integration](/online-payments/build-your-integration/sessions-flow?platform=iOS\&integration=Components).                                              |   |
| **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=iOS\&integration=Components#handle-the-redirect). `action.type`: **redirect** |   |
| **Setup steps**       | Before you begin, [add Twint in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                               |   |

### 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=iOS\&integration=Components#create-a-payment-session).

### Add-Configuration

## Add additional configuration for Twint

You do not need to add any configuration parameters for Twint.

### Initialize

## Initialize the Component for Twint

To [initialize](#initialize-the-component) Twint, use the `TwintComponent` class.

**Initialize the Component**

```swift
let paymentMethods = session.sessionContext.paymentMethods
// Check that the payment method is supported before showing the Component.
guard let paymentMethod = paymentMethods.paymentMethod(ofType: TwintPaymentMethod.self) else { return }
// Create an instance of TwintComponent.
let component = TwintComponent(paymentMethod: paymentMethod,
                                        context: context,
                                        // Set the configuration object that you created for Twint.
                                        configuration: twintConfiguration)
self.currentComponent = component
// Set the session as the delegate.
component.delegate = session
// Present the Component.
let componentViewController = viewController(for: component)
present(componentViewController)
```

### 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/).

## 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 Component

### Before-You-Begin

## Requirements

| Requirement           | Description                                                                                                                                                                                                               |   |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| **Integration type**  | Make sure that you have an existing Advanced flow [iOS Components integration](/online-payments/build-your-integration/advanced-flow?platform=iOS\&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=iOS\&integration=Components#handle-the-redirect). `action.type`: **redirect** |   |
| **Setup steps**       | Before you begin, [add Twint in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                |   |

### Add-Configuration

## Add additional configuration for Twint

You do not need to add any configuration parameters for Twint.

### Initialize

## Initialize the Component for Twint

To [initialize](#initialize-the-component) Twint, use the `TwintComponent` class.

**Initialize the Component**

```swift
// Check that the payment method is supported before showing the Component.
guard let paymentMethod = paymentMethods.paymentMethod(ofType: TwintPaymentMethod.self) else { return }
// Create an instance of TwintComponent.
let component = TwintComponent(paymentMethod: paymentMethod,
                                        context: context,
                                        // Set the configuration object that you created for Twint.
                                        configuration: twintConfiguration)
self.currentComponent = component
// Set the Component as the delegate.
component.delegate = self
// Present the Component.
let componentViewController = viewController(for: component)
present(componentViewController)
```

### 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 when you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=iOS\&integration=Components#make-a-payment).

### 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/).

## 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/).

## 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/).
