TWINT via Checkout.com

TWINT via Checkout.com is Switzerland’s leading mobile payment wallet, supported by all major Swiss banks. Payments are redirect-based, completed via QR code or in-app link. CHF only; minimum 0.01 CHF, maximum 5,000 CHF.

One off payment	Refunds	Recurring	Cancel
✓	✓	x	✓

TWINT via Checkout.com is in beta. Contact your Checkout.com account manager to enable it.

Get started with TWINT via Checkout.com

Before you begin

If this is your first payment method, follow the Get started guide to begin processing payments with Primer.

Configure in the Dashboard

Add Checkout.com to your Dashboard
Go to Integrations, click New Integration, and search for Checkout.com. Enter your Checkout.com credentials.
Activate on the Checkout
Go to Checkout and activate TWINT.
Configure a Workflow
Ensure a Workflow with an Authorization action is set up to process APMs.

Prepare the client session

No additional fields are required beyond the standard orderId, currencyCode, amount, and customer fields.

Prepare the SDK for payments

Web
iOS
Android

Use the payment method type CHECKOUT_TWINT wherever the code below references YOUR_PAYMENT_METHOD_TYPE.

Primer Checkout (recommended)
Universal Checkout (legacy)
Headless Universal Checkout (legacy)

Primer Checkout is our latest web SDK, built around declarative web components. Once TWINT is enabled in your Dashboard, the default <primer-checkout> layout renders it automatically alongside your other methods — no payment-method-specific markup is required.

<primer-checkout client-token="your-client-token"></primer-checkout>

Custom layouts

Only reach for primer-payment-method if you’re building a custom layout and need to place TWINT at a specific position. The element only renders when the type is enabled in your Dashboard and returned by the server for this checkout.

<primer-checkout client-token="your-client-token">
  <primer-main slot="main">
    <div slot="payments">
      <primer-payment-method type="YOUR_PAYMENT_METHOD_TYPE"></primer-payment-method>
    </div>
  </primer-main>
</primer-checkout>

For dynamic rendering based on what the server returns, listen to primer:methods-update or use primer-payment-method-container for declarative filtering.

Set up redirects

If TWINT can’t be shown in a popup, Universal Checkout redirects the customer back to your site using the returnUrl passed in the redirect options. See Handle redirects & deep links for the full flow.

const options = {
  container: "#checkout-container",
  redirect: {
    returnUrl: "https://mystore.com/checkout",
  },
  onCheckoutComplete({ payment }) {
    console.log("Checkout complete.", payment);
  },
};

Show Universal Checkout

TWINT is automatically presented when calling Primer.showUniversalCheckout.

import { Primer } from "@primer-io/checkout-web";

try {
  await Primer.showUniversalCheckout(clientToken, options);
} catch (e) {
  // handle error
}

Check the customization guide to learn how to customize payment method buttons.

Create a RedirectPaymentMethodManager for TWINT using createPaymentMethodManager, then call start() to begin the redirect flow.

const manager = await headless.createPaymentMethodManager("YOUR_PAYMENT_METHOD_TYPE");

if (manager) {
  manager.addEventListener("click", () => {
    // Optional: run custom logic before the redirect flow starts.
  });

  await manager.start();
}

Refer to the full guide for handling payment methods with redirect.

Use the payment method type CHECKOUT_TWINT wherever the code below references YOUR_PAYMENT_METHOD_TYPE.

Set up redirects

Redirect-based payment methods present a webpage or open a third-party app for the customer to authorize the payment. To return to your app once the customer has authorized the payment, include the urlScheme parameter when configuring PrimerPaymentMethodOptions.

let settings = PrimerSettings(
  // ...
  paymentMethodOptions: PrimerPaymentMethodOptions(
    urlScheme: "your-url-scheme://" // e.g. primer://, yourscheme://
  )
  // ...
)

When the customer is redirected back to your app, iOS calls application(_:continue:restorationHandler:). Forward the call to the Primer SDK so the checkout can continue the flow.

import PrimerSDK
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  // ...
  func application(
    _ application: UIApplication,
    continue userActivity: NSUserActivity,
    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
  ) -> Bool {
    return Primer.shared.application(
      application,
      continue: userActivity,
      restorationHandler: restorationHandler
    )
  }
}

Show the payment method

Universal Checkout (drop-in)
Headless Universal Checkout

TWINT is automatically presented when calling Primer.shared.showUniversalCheckout.

class MyViewController: UIViewController {
  func startUniversalCheckout() {
    Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
  }
}

Check the customization guide to learn how to customize payment method buttons.

TWINT requires a Native UI Manager to be presented to the customer.

// 👇 Create the payment method manager
let nativeUIPaymentMethodManager = try PrimerHeadlessUniversalCheckout.NativeUIManager(
  paymentMethodType: "YOUR_PAYMENT_METHOD_TYPE"
)

// 👇 Show the payment method
try nativeUIPaymentMethodManager.showPaymentMethod(intent: .checkout)

See NativeUIManager.init for the full API. As many redirect-based payment methods share this approach, we recommend centralizing the implementation — see the worked example in the Native UI Manager guide.

Use the payment method type CHECKOUT_TWINT wherever the code below references YOUR_PAYMENT_METHOD_TYPE.

Universal Checkout (drop-in)
Headless Universal Checkout

TWINT is automatically presented when calling Primer.instance.showUniversalCheckout.

class CheckoutActivity : AppCompatActivity() {
  private fun setupObservers() {
    viewModel.clientToken.observe(this) { clientToken ->
      showUniversalCheckout(clientToken)
    }
  }

  private fun showUniversalCheckout(clientToken: String) {
    Primer.instance.showUniversalCheckout(this, clientToken)
  }
}

Check the customization guide to learn how to customize payment method buttons.

TWINT requires a Native UI Manager to be presented to the customer.

// 👇 Create the payment method manager
val nativeUiManager = PrimerHeadlessUniversalCheckoutNativeUiManager.newInstance("YOUR_PAYMENT_METHOD_TYPE")

// 👇 Show the payment method
nativeUiManager.showPaymentMethod(this, PrimerSessionIntent.CHECKOUT)

See NativeUiManager.newInstance for the full API. As many redirect-based payment methods share this approach, we recommend centralizing the implementation — see the worked example in the Native UI Manager guide.

Go live

Use production Checkout.com credentials. TWINT is available in Switzerland with CHF only, with amounts between 0.01 and 5,000 CHF.

​Get started with TWINT via Checkout.com

​Before you begin

​Configure in the Dashboard

​Prepare the client session

​Prepare the SDK for payments

​Custom layouts

Set up redirects

Show Universal Checkout

​Set up redirects

​Show the payment method

​Go live

Get started with TWINT via Checkout.com

Before you begin

Configure in the Dashboard

Prepare the client session

Prepare the SDK for payments

Custom layouts

Set up redirects

Show the payment method

Go live