# Paiements TWINT Comment accepter TWINT, un moyen de paiement populaire en Suisse. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/twint/accept-a-payment?payment-ui=checkout. > Stripe peut automatiquement proposer les moyens de paiement pertinents à vos clients en évaluant la devise, les restrictions liées aux moyens de paiement et d’autres paramètres. > > - Suivez le guide [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) pour créer une intégration de paiement qui utilise des [moyens de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md). - Si vous ne souhaitez pas utiliser de moyens de paiement dynamiques, suivez les étapes ci-dessous pour configurer manuellement les moyens de paiement dans votre intégration Checkout. TWINT est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suisse. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements à l’aide d’une application mobile TWINT approuvée. Vous recevez une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. ## Déterminer la compatibilité **Lieux d’implantation pris en charge** : Europe, UK **Devises prises en charge** : `chf` **Devises de règlement** : `chf` **Mode de paiement** : Yes **Mode de configuration** : No **Mode d’abonnement** : No Une session Checkout doit remplir toutes les conditions suivantes pour prendre en charge TWINT : - Les *tarifs* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) de tous les postes doivent être exprimés en francs suisses (code de devise `chf`). ## Accepter paiement TWINT > Avant d’utiliser ce guide, commencez par créer une intégration permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) avec Checkout. Celui-ci vous guide tout au long de l’activation de TWINT et vous montre les différences entre l’acceptation de paiements à l’aide de moyens de paiement dynamiques et la configuration manuelle des moyens de paiement. Lors de la création d’une [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez : - Ajouter `twint` à la liste `payment_method_types`. - Veiller à ce que tous les `line_items` utilisent la devise `chf`. #### Page hébergée par Stripe ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=chf" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=twint" \ --data-urlencode "success_url=https://example.com/success" ``` #### Formulaire intégré ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=chf" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=twint" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### Traiter vos commandes Maintenant que vous savez accepter des paiements, découvrez comment [traiter les commandes](https://docs.stripe.com/checkout/fulfillment.md). ## Tester votre intégration Lors du test de votre intégration Checkout, sélectionnez le moyen de paiement ‘TWINT’ et cliquez sur **Payer**. ## Gérer les remboursements En savoir plus sur les [remboursements TWINT](https://docs.stripe.com/payments/twint.md#refunds). ## See also - [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md) - [Personnaliser Checkout](https://docs.stripe.com/payments/checkout/customization.md) # API directe > This is a API directe for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/twint/accept-a-payment?payment-ui=direct-api. > Le contenu de cette section fait référence à un produit *antérieur* (Technology that's no longer recommended). Vous devez plutôt consulter le guide relatif à l’[acceptation d’un paiement](https://docs.stripe.com/payments/accept-a-payment.md) 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](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suisse. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements à l’aide d’une application mobile TWINT approuvée. Vous recevez une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) 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](https://dashboard.stripe.com/register). Pour accéder à l’API Stripe depuis votre application, utilisez nos bibliothèques officielles : #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Créer un PaymentIntent [Côté serveur] Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) 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](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-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`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -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* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à 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. #### Application monopage 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 : #### Ruby ```ruby 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 : ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Rendu côté serveur Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur. Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent : #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## 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](https://docs.stripe.com/payments/elements.md) 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. ```html Checkout ``` Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement. ```javascript // 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('<>'); ``` Lorsque vous confirmez le paiement, transmettez la clé secrète du client. > 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](https://docs.stripe.com/js/payment_intents/confirm_twint_payment) 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. ```javascript // 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](https://docs.stripe.com/payments/payment-intents/verifying-status.md) 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ètre | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `payment_intent` | L’identifiant unique du `PaymentIntent` | | `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) 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`. ## Optional: Gérer la redirection TWINT manuellement Nous vous recommandons d’utiliser Stripe.js pour gérer les redirections et les paiements TWINT côté client avec `confirmTwintPayment`. L’utilisation de Stripe.js vous permet d’étendre votre intégration à d’autres moyens de paiement. Cependant, vous pouvez aussi rediriger manuellement vos clients sur votre serveur en suivant ces étapes : - Créez et confirmez un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) avec un paramètre `payment_method_data` de type `twint`. En précisant le paramètre `payment_method_data`, nous créons un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) et l’utilisons immédiatement avec ce PaymentIntent. Vous devez également renseigner la `return_url`, qui redirige l’utilisateur une fois le paiement effectué. Vous pouvez fournir vos propres paramètres de requête dans cette URL. À la fin du flux de redirection, l’URL finale inclut ces paramètres. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=chf \ -d "payment_method_types[]=twint" \ -d confirm=true \ -d "payment_method_data[type]=twint" \ --data-urlencode "return_url=https://example.com/checkout/complete" ``` Le `PaymentIntent` créé se trouve à l’état `requires_action` et le type de `next_action` est à l’état `redirect_to_url`. ```json { "status": "requires_action", "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } }, "id": "pi_xxx", "object": "payment_intent", "amount": 1000, "client_secret": "pi_xxx_secret_xxx", "confirm": "true", "confirmation_method": "automatic", "created": 1687432192, "currency": "chf", "livemode": true, "charges": { "data": [], "object": "list", "has_more": false, "url": "/v1/charges?payment_intent=pi_xxx" }, "payment_method_types": [ "twint" ] } ``` - Redirigez le client vers l’URL fournie dans la propriété `next_action.redirect_to_url.url`. L’exemple de code fourni ici n’a qu’une valeur illustrative : la méthode de redirection de votre framework web peut différer. Lorsque le client termine le processus de paiement, nous le redirigeons vers l’URL `return_url` spécifiée lors de la création du PaymentIntent. L’URL inclut les paramètres de requête d’URL `payment_intent` et `payment_intent_client_secret`. Si vous avez inclus d’autres paramètres lorsque vous avez spécifié la `return_url`, ils y sont également ajoutés. Nous vous recommandons d’[utiliser des webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) afin de confirmer l’état du paiement. ## Optional: Gérer les événements post-paiement Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison. Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide). - **Gérer les événements manuellement dans le Dashboard** Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués. - **Créer un webhook personnalisé** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Intégrer une application prédéfinie** Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.