Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usage
Moyens de paiement
Interfaces de paiement
Scénarios de paiement
Paiements par TPE
Autres produits Stripe

Paiements TWINT

Comment accepter TWINT, un moyen de paiement populaire en Suisse.

Copier la page

Mise en garde

Le contenu de cette section fait référence à un produit antérieur. Vous devez plutôt consulter le guide relatif à l’acceptation d’un paiement pour en savoir plus sur le chemin d’intégration le plus récent. Stripe prend toujours en charge ce produit, néanmoins cette prise en charge peut prendre fin si le produit devient obsolète.

TWINT est un moyen de paiement à usage unique utilisé en Suisse. Il permet aux clients d’authentifier et approuver leurs paiements à l’aide d’une application mobile TWINT approuvée.

Vous recevez une notification immédiate indiquant si le paiement a abouti ou échoué.

Configurer Stripe
Côté serveur

Dans un premier temps, vous devez créer un compte Stripe. S’inscrire maintenant.

Pour accéder à l’API Stripe depuis votre application, utilisez nos bibliothèques officielles :

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'

Créer un PaymentIntent
Côté serveur

Un PaymentIntent est un objet qui représente votre intention d’encaisser un paiement d’un client et suit le processus de paiement. Pour créer un PaymentIntent qui accepte un moyen de paiement TWINT, spécifiez le montant à collecter, avec chf comme devise et twint dans la liste payment_method_types. Si vous gérez une liste de types de moyens de paiement que vous transmettez lors de la création d’un PaymentIntent, ajoutez-y twint.

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

Récupérer la clé secrète du client

Le PaymentIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction fetch du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :

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

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :

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

Recueillir les informations sur le moyen de paiement et envoyer le paiement
Côté client

Lorsqu’un client clique pour payer avec TWINT, utilisez Stripe.js pour soumettre le paiement à Stripe. Stripe.js est la bibliothèque JavaScript de base pour créer les tunnels de paiement : elle gère automatiquement les opérations complexes telles que la redirection décrite ci-dessous, et facilite l’extension de votre intégration à d’autres moyens de paiement. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant à la section head de votre fichier HTML.

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

Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement.

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

Lorsque vous confirmez le paiement, transmettez la clé secrète du client.

Mise en garde

La clé secrète du client doit être utilisée avec prudence, car elle permet d’accéder au PaymentIntent. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

Utilisez stripe.confirmTwintPayment pour rediriger l’utilisateur depuis votre page vers la page du prestataire de services de paiement local. Vous devez préciser l’URL return_url, qui redirige l’utilisateur une fois le paiement effectué.

Le client sélectionne le moyen de paiement spécifique sur la page du prestataire de services de paiement local.

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

Faites pointer l’attribut return_url vers une page qui fournit l’état du paiement en vérifiant l’état du PaymentIntent. Lorsque Stripe redirige le client vers cette page, nous ajoutons les paramètres de requête d’URL suivants à return_url pour les utiliser dans l’appel de vérification. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous spécifiez l’attribut return_url. Ces paramètres sont conservés tout au long du processus de redirection.

ParamètreDescription
payment_intentL’identifiant unique du PaymentIntent
payment_intent_client_secretLa clé secrète du client de l’objet PaymentIntent

Tester l'intégration TWINT

Testez votre intégration TWINT en affichant la page de redirection à l’aide de vos clés API de test. Vous pouvez tester la réussite du paiement en l’authentifiant sur la page de redirection. Le PaymentIntent passe alors de l’état requires_action à succeeded. Pour tester un échec d’authentification de l’utilisateur, utilisez vos clés API de test et accédez à la page de redirection. Sur cette page, cliquez sur Échec du paiement test. Votre PaymentIntent passe de l’état requires_action à requires_payment_method.

Cette page vous a-t-elle été utile ?
OuiNon
Besoin d'aide ? Contactez le service Support.
Rejoignez notre programme d'accès anticipé.
Consultez notre log des modifications.
Des questions ? Contactez l'équipe commerciale.
LLM ? Lire llms.txt.
Propulsé par Markdoc