TWINT Drop-in integration

This page explains how to add TWINT to your existing Drop-in integration.

The focus of this page is on describing how to use the TwintComponent of the native Twint SDK to enable Twint payments on Drop-in.

Requirements

How it works

1. When a shopper on your app clicks the button to pay with Twint, TwintComponent makes a /payments request which contains subtype: sdk. The ActionComponent is triggered, which determines the transaction flow.

2. The shopper is redirected to the Twint app on their device (or an error is displayed if a Twint app is not installed).

3. After the payment is processed, Twint app will return back to your app using the redirectURL, contained in the payment result.

4. If the payment is successful a /payments/details request is made that contains paymentData, otherwise an error is shown.

Drop-in configuration

Add the following configuration:

• Create a TwintPaymentMethod instance from your payment methods list.

  Create TwintPaymentMethod instance

  Expand view

  Copy link to code block

  Copy code

  Copy code

  let paymentMethod = paymentMethods.paymentMethod(ofType: TwintPaymentMethod.self)

• Create the TwintComponent with the paymentMethod and the configuration.

  Create TwintComponent

  Expand view

  Copy link to code block

  Copy code

  Copy code

  let component = TwintComponent(paymentMethod: paymentMethod, context: adyenContext, configuration: configuration)

• Set your AdyenSession instance as the delegate to let it handle the flow.

  Set AdyenSession

  Expand view

  Copy link to code block

  Copy code

  Copy code

  component.delegate = self.adyenSession

• Your app must configure a callbackAppScheme so that it is reopened when the payment is done.

  Configure callbackAppScheme

  Expand view

  Copy link to code block

  Copy code

  Copy code

  componentConfig.actionComponent.twint = .init(callbackAppScheme: yourReturnURLScheme)

• Your app should call the RedirectComponent in the AppDelegate by adding below method.

  Call RedirectComponent

  Expand view

  Copy link to code block

  Copy code

  Copy code

  func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey: Any] = [:]) -> Bool {
      RedirectComponent.applicationDidOpen(from: url)
      return true
  }

• Register all the apps that will be opened by your app by adding the following entries to your App’s Info.plist file. If this is not done, then TWINT SDK will not find any installed TWINT app.

  Register apps

  Expand view

  Copy link to code block

  Copy code

  Copy code

  <key>LSApplicationQueriesSchemes</key>
  <array>
  <string>twint-issuer1</string>
  <string>twint-issuer2</string>
  <string>twint-issuer3</string>
  <string>twint-issuer4</string>
  <string>twint-issuer5</string>
  <string>twint-issuer6</string>
  <string>twint-issuer7</string>
  <string>twint-issuer8</string>
  <string>twint-issuer9</string>
  <string>twint-issuer10</string>
  <string>twint-issuer11</string>
  <string>twint-issuer12</string>
  <string>twint-issuer13</string>
  <string>twint-issuer14</string>
  <string>twint-issuer15</string>
  <string>twint-issuer16</string>
  <string>twint-issuer17</string>
  <string>twint-issuer18</string>
  <string>twint-issuer19</string>
  <string>twint-issuer20</string>
  <string>twint-issuer21</string>
  <string>twint-issuer22</string>
  <string>twint-issuer23</string>
  <string>twint-issuer24</string>
  <string>twint-issuer25</string>
  <string>twint-issuer26</string>
  <string>twint-issuer27</string>
  <string>twint-issuer28</string>
  <string>twint-issuer29</string>
  <string>twint-issuer30</string>
  <string>twint-issuer31</string>
  <string>twint-issuer32</string>
  <string>twint-issuer33</string>
  <string>twint-issuer34</string>
  <string>twint-issuer35</string>
  <string>twint-issuer36</string>
  <string>twint-issuer37</string>
  <string>twint-issuer38</string>
  <string>twint-issuer39</string>
  <string>twint-issuer40</string>
  <string>twint-issuer41</string>
  <string>twint-issuer42</string>
  <string>twint-issuer43</string>
  <string>twint-issuer44</string>
  <string>twint-issuer45</string>
  <string>twint-issuer46</string>
  <string>twint-issuer47</string>
  <string>twint-issuer48</string>
  <string>twint-issuer49</string>
  <string>twint-issuer50</string>
  </array>

Recurring payments

To make recurring payments for TWINT, you need to:

1. Create a shopper token.
2. Use the token to make future payments for the shopper.

Create a token

To create a token, include in your /payments request:

• storePaymentMethod: true
• shopperReference: Your unique identifier for the shopper (minimum length three characters).

When the payment details have been stored, you receive a webhook containing:

• eventCode: RECURRING_CONTRACT
• originalReference: The pspReference of the initial payment.
• pspReference: This is the token you need to make recurring payments for this shopper.

Make a payment with a token

To make a payment with the token, include in your /payments request:

• paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT webhook.

  You can also get this value using the /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.

curl https://checkout-test.adyen.com/checkout/v69/payments \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
   "amount":{
      "value":1000,
      "currency":"CHF"
   },
   "paymentMethod":{
      "type":"twint",
      "storedPaymentMethodId":"7219687191761347"
   },
   "reference":"YOUR_ORDER_NUMBER",
   "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
   "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
   "shopperInteraction":"ContAuth",
   "recurringProcessingModel": "Subscription"
}'

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.

See also