No momento, esta página não está disponível em português

TWINT Component

Add TWINT to an existing Components integration.

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 additional use case.

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');

Recurring payments

To make recurring payments for TWINT, you need to:

Create a shopper token.
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 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:

paymentMethod.storedPaymentMethodId: The pspReference from 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).
shopperInteraction: ContAuth.
recurringProcessingModel: Subscription or UnscheduledCardOnFile.

For more information about the shopperInteraction and recurringProcessingModel fields, refer to Recurring transaction types.

curl https://checkout-test.adyen.com/v69/payments \
-H "x-API-key: YOUR_X-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"
}'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "CHF",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "twint",
    :storedPaymentMethodId => "7219687191761347"
  },
  :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
  :shopperReference => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT",
  :shopperInteraction => "ContAuth",
  :recurringProcessingModel => "Subscription"
})

// Set YOUR_X-API-KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you're ready to accept live payments.
Client client = new Client("YOUR_X-API-KEY", Environment.TEST);
Checkout checkout = new Checkout(client);

PaymentsRequest paymentsRequest = new PaymentsRequest();

String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
paymentsRequest.setMerchantAccount(merchantAccount);

Amount amount = new Amount();
amount.setCurrency("CHF");
amount.setValue(15000L);
paymentsRequest.setAmount(amount);

DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
paymentMethodDetails.setStoredPaymentMethodId("7219687191761347");
paymentMethodDetails.setType("twint");
paymentsRequest.setPaymentMethod(paymentMethodDetails);

paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
paymentsRequest.setShopperInteraction("ContAuth");
paymentsRequest.setRecurringProcessingModel("Subscription");

PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "CHF",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "twint",
    "storedPaymentMethodId" => "7219687191761347"
  ),
  "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
  "shopperReference" => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  "recurringProcessingModel" => "Subscription",
  "shopperInteraction" => "ContAuth",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'CHF'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'twint',
      'storedPaymentMethodId': '7219687191761347'
   },
   'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
   'shopperReference': 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j'
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT',
   'shopperInteraction':'ContAuth',
   'recurringProcessingModel': 'Subscription'
})

// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Adyen.Model.Checkout.Amount("CHF", 1000);
var details = new Adyen.Model.Checkout.DefaultPaymentMethodDetails{
  Type = "twint",
  StoredPaymentMethodId = "7219687191761347"
};
var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  ShopperReference = "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
  RecurringProcessingModel = Adyen.Model.Checkout.PaymentRequest.RecurringProcessingModelEnum.Subscription,
  ShopperInteraction = Adyen.Model.Checkout.PaymentRequest.ShopperInteractionEnum.ContAuth,
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);

// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "CHF", value: 1000 },
    paymentMethod: {
        type: 'twint',
        storedPaymentMethodId: "7219687191761347"
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
    returnUrl: "https://your-company.com/checkout?shopperOrder=12xy..",
    shopperInteraction: "ContAuth",
    recurringProcessingModel: "Subscription"
}).then(res => res);

https://docs.adyen.com/pt/pt/payment-methods/twint/web-component#twint-recurring

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:

{
   "reference":"PSP_REFERENCE",
   "amount":{
      "value":"2500",
      "currency":"CHF"
   },
   "merchantAccount":"YOUR_MERCHANT ACCOUNT"
}

https://docs.adyen.com/pt/pt/payment-methods/twint/web-component#-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.