Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in
OverviewUpgrade your integration
Online payments
OverviewFind your use caseManaged Payments
Payment methods
Payment interfaces
Payment scenarios
In-person payments
Beyond payments

TWINT payments

Learn how to accept TWINT, a popular payment method in Switzerland.

Caution

The content of this section refers to a Legacy product. You should use the Accept a payment guide for the most recent integration path instead. While Stripe still supports this product, this support might end if the product is deprecated.

TWINT is a single-use payment method used in Switzerland. It allows customers to authenticate and approve payments using an approved TWINT mobile app.

You get immediate notification on whether the payment succeeded or failed.

Set up Stripe
Server-side

First, you need a Stripe account. Register now.

To access the Stripe API from your application, use our official libraries:

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Create a PaymentIntent
Server-side

A PaymentIntent is an object that represents your intent to collect a payment from a customer and tracks the payment process. To create a PaymentIntent that accepts a TWINT payment method, specify the amount to collect, chf as the currency, and twint in the payment_method_types list. If you maintain a list of payment method types that you pass when creating a PaymentIntent, add twint to it.

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1000 \
  -d currency=chf \
  -d "payment_method_types[]"=twint

Retrieve the client secret

The PaymentIntent includes a client secret that the client side uses to securely complete the payment process. You can use different approaches to pass the client secret to the client side.

Retrieve the client secret from an endpoint on your server, using the browser’s fetch function. This approach is best if your client side is a single-page application, particularly one built with a modern frontend framework like React. Create the server endpoint that serves the client secret:

main.rb
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

And then fetch the client secret with JavaScript on the client side:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Collect payment method details and submit the payment
Client-side

When a customer clicks to pay with TWINT, use Stripe.js to submit the payment to Stripe. Stripe.js is the foundational JavaScript library for building payment flows. It automatically handles complexities like the redirect described below, and enables you to extend your integration to other payment methods. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Create an instance of Stripe.js with the following JavaScript on your checkout page.

client.js
// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

When you confirm the payment, pass the client secret.

Caution

Handle the client secret carefully, because it allows access to the PaymentIntent. Don’t log it, embed it in URLs, or expose it to anyone but the customer.

Use stripe.confirmTwintPayment to handle the redirect from your page to the local payment page. You must specify the return_url, which redirects the user after they complete the payment.

The customer selects the specific payment method on the local processor’s page.

script.js
// Redirects from the client to the payment processor
stripe.confirmTwintPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      // Billing details is optional.
      billing_details: {
        name: 'Jenny Rosen',
        email: 'jenny@example.com'
      },
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: 'https://example.com/checkout/complete',
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
    console.log(result.error.message);
  }
});

Point return_url to a page that provides the payment status by verifying the status of the PaymentIntent. When Stripe redirects the customer to that page, we append the following URL query parameters to the return_url for use in the verification call. You can also append your own query parameters when you specify the return_url. These parameters persist through the redirect process.

ParameterDescription
payment_intentThe unique identifier for the PaymentIntent
payment_intent_client_secretThe client secret of the PaymentIntent object

Test TWINT integration

Test your TWINT integration with your test API keys by viewing the redirect page. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent transitions from requires_action to succeeded. To test the case where the user fails to authenticate, use your test API keys and view the redirect page. On the redirect page, click Fail test payment. The PaymentIntent transitions from requires_action to requires_payment_method.

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc