# Paiements Swish Comment accepter Swish, un moyen de paiement populaire en Suède. Swish est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suède. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID. Vous recevez une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. > 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. Ce guide explique comment activer Swish sur [Checkout](https://docs.stripe.com/payments/checkout.md), notre formulaire de paiement hébergé, et vous montre les différences entre accepter un paiement par carte et accepter un paiement Swish. ## Déterminer la compatibilité **Lieux d’implantation pris en charge** : Europe **Devises prises en charge** : `sek` **Devises de règlement** : `sek` **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 les paiements Swish : - 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 SEK. ## Configurer Stripe [Côté serveur] Dans un premier temps, vous devez créer un compte Stripe. [S’inscrire maintenant](https://dashboard.stripe.com/register). Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application : #### 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' ``` ## Accepter un paiement > Ce guide s’appuie sur l’intégration de base Checkout permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout). ### Activer le moyen de paiement Swish Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez : 1. Ajoutez `swish` à la liste des `payment_method_types`. 1. Veiller à ce que tous vos `line_items` utilisent la devise `sek`. #### Page hébergée par Stripe ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=sek" \ -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]=swish" \ --data-urlencode "success_url=https://example.com/success" ``` #### Page entièrement intégrée ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=sek" \ -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]=swish" \ --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). ## 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é** [Créez un gestionnaire de webhooks personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) pour écouter les événements et concevoir des flux de paiement asynchrones sur mesure. Testez et déboguez votre intégration de webhooks en local avec la 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. ## Optional: Tester l'intégration #### Test des applications Web mobiles Pour tester votre intégration, choisissez Swish comme moyen de paiement et appuyez sur **Payer**. Dans un environnement de test, cela vous redirige vers une page de paiement, dans laquelle vous pouvez autoriser ou refuser le paiement. En mode production, le bouton **Payer** vous redirige vers l’application mobile Swish, où vous pouvez autoriser ou refuser le paiement. #### Test des applications Web de bureau Pour tester votre intégration, scannez le QR code à l’aide d’une application de lecture de QR code sur votre appareil mobile. Dans un environnement de test, la charge utile du QR code contient une URL qui vous redirige vers une page de paiement sur laquelle vous pouvez approuver ou refuser le paiement test. En mode production, vous devez scanner le code QR depuis l’application mobile Swish. Après avoir scanné le code QR, vous pouvez approuver ou refuser le paiement dans l’application mobile Swish. ## Échecs de paiement Swish utilise plusieurs données pour décider du refus d’une transaction (par exemple, s’il n’y a pas assez de fonds sur le compte bancaire du client ou si ce dernier a cliqué sur **Annuler** dans l’application). Dans ce cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et le statut de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method` Hormis le refus d’un paiement, dans le cas d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) Swish à l’état `requires_action`, les clients doivent effectuer le paiement sous 3 minutes. En l’absence d’action sous 3 minutes, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`. ## See also - [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md) - [Personnaliser Checkout](https://docs.stripe.com/payments/checkout/customization.md) # Elements > This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/swish/accept-a-payment?payment-ui=elements. Swish est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suède. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID. Vous recevez une [notification immédiate](https://docs.stripe.com/payments/payment-methods.md#payment-notification) indiquant si le paiement a abouti ou échoué. Ce guide vous montre comment intégrer un formulaire de paiement Stripe personnalisé à votre site Web ou application à l’aide de [Payment Element](https://docs.stripe.com/payments/payment-element.md). Le Payment Element permet de prendre automatiquement en charge Swish et d’autres moyens de paiement. Pour les configurations et personnalisations avancées, consultez le guide d’intégration consacré à l’[acceptation des paiements](https://docs.stripe.com/payments/accept-a-payment.md). ## Configurer Stripe [Côté serveur] Pour commencer, vous devez créer un compte Stripe. [Inscrivez-vous maintenant](https://dashboard.stripe.com/register). Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application : #### 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] Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus. #### Gérer les moyens de paiement dans le Dashboard Créez un PaymentIntent sur votre serveur en spécifiant un montant et une devise. Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le renvoi des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Avant de créer le Payment Intent, veillez à activer **Swish** sur la page des [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods). Définissez toujours le montant à débiter côté serveur car il s’agit d’un environnement sécurisé, contrairement à l’environnement client. De cette façon, un client malveillant ne pourra pas fixer son propre tarif. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` #### Répertorier manuellement les moyens de paiement Si vous ne souhaitez pas utiliser le Dashboard ou spécifier manuellement des moyens de paiement, vous pouvez les répertorier à l’aide de l’attribut `payment_method_types`. Sur votre serveur, créez un PaymentIntent en spécifiant un montant, une devise et une liste de moyens de paiement. Spécifiez toujours le montant à débiter côté serveur, un environnement sécurisé, à la différence du côté client. Cette précaution empêchera les éventuels clients malveillants de fixer leurs propres tarifs. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1000 \ -d currency=sek \ -d "payment_method_types[]=swish" ``` ### 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 ``` ## Collecter les informations de paiement [Côté client] Collectez les informations de paiement du client avec le [Payment Element](https://docs.stripe.com/payments/payment-element.md). Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement. Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement. Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) de l’iframe doit être défini sur égal à `"payment *"`. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’[activer](https://docs.stripe.com/security/guide.md#tls) lorsque vous souhaitez commencer à accepter des paiements réels. #### HTML + JS ### Configurer Stripe.js Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans une offre groupée ni en héberger de copie. ```html Checkout ``` Créez une instance de Stripe 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('<>'); ``` ### Ajouter le Payment Element à votre page de paiement Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement : ```html
``` Lors du chargement du formulaire précédent, créez une instance du composant Payment Element et intégrez-la au nœud DOM conteneur. Lorsque vous créez l’instance [Elements](https://docs.stripe.com/js/elements_object/create), transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à l’étape précédente dans les `options` : Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Optional: Autofill user's saved payment methods. If the customer's // email is known when the page is loaded, you can pass the email // to the linkAuthenticationElement on mount: // // linkAuthenticationElement.mount("#link-authentication-element", { // defaultValues: { // email: 'jenny.rosen@example.com', // } // }) // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configurer Stripe.js Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm : ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Ajouter le fournisseur Elements à votre page de paiement et le configurer Pour utiliser le composant Payment Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publique, puis transmettez au fournisseur `Elements` l’élément `Promise` renvoyé. Transmettez également la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’étape précédente en tant que `options`, toujours au fournisseur `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Ajouter le composant Element Payment Utilisez le composant `PaymentElement` pour créer votre formulaire : ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
// Optional: Autofill user's saved payment methods. If the customer's // email is known when the page is loaded, you can pass the email // to the linkAuthenticationElement // // ); }; export default CheckoutForm; ``` ## Envoyer le paiement à Stripe [Côté client] Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour effectuer le paiement à l’aide des informations du composant Payment Element. Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. L’utilisateur sera immédiatement redirigé vers la page `return_url` après un paiement réussi par carte. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Pour appeler [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux hooks, vous pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` Veillez à ce que le paramètre `return_url` corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page `return_url`, nous fournissons les paramètres de requête d’URL suivants : | 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`. | > Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine `stripe.com` à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble. Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’[état du PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL `return_url` ; ils seront conservés tout au long du processus de redirection. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## Rediriger et authentifier des transactions Les acheteurs peuvent authentifier les transactions Swish avec des applications mobiles ou de bureau. Le client utilisé par l’acheteur détermine la méthode d’authentification après l’appel de `confirmPayment`. #### Authentification des applications mobiles Après avoir appelé `confirmPayment`, les clients sont redirigés vers Swish pour approuver ou refuser le paiement. Une fois qu’ils ont autorisé le paiement, ils sont redirigés vers la `return_url`. Stripe ajoute `payment_intent`, `payment_intent_client_secret`, `redirect_pm_type` et `redirect_status` comme paramètres de requête d’URL (ainsi que tous les paramètres de requête existants dans la `return_url`). Une session d’authentification expire au bout de 3 minutes, puis l’état du PaymentIntent repasse à `require_payment_method`. Après le changement d’état, l’acheteur voit s’afficher une erreur de paiement et doit recommencer le processus de paiement. #### Authentification des applications Web de bureau Après avoir appelé confirmPayment, un code QR s’affiche sur la page Web. Vos clients peuvent scanner le code QR à l’aide de l’appareil photo de leur appareil mobile ou de l’application mobile Swish, puis authentifier le paiement à l’aide de Swish. Quelques secondes après l’authentification du paiement par le client, la fenêtre modale du code QR se ferme automatiquement et vous pouvez traiter la commande. Stripe redirige vers l’URL `return_url` fois le paiement effectué. Si vous ne souhaitez pas effectuer de redirection après le paiement sur le Web, transmettez `redirect: if_required` au Payment Element. Une session d’authentification expire au bout de 3 minutes. Vous pouvez rafraîchir le code QR jusqu’à 20 fois avant que l’état du PaymentIntent ne repasse à `require_payment_method`. Après le changement d’état, le client voit s’afficher une erreur de paiement et doit recommencer le processus de 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é** [Créez un gestionnaire de webhooks personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) pour écouter les événements et concevoir des flux de paiement asynchrones sur mesure. Testez et déboguez votre intégration de webhooks en local avec la 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. ## Optional: Tester l'intégration #### Test des applications Web mobiles Pour tester votre intégration, choisissez Swish comme moyen de paiement et appuyez sur **Payer**. Dans un environnement de test, cela vous redirige vers une page de paiement, dans laquelle vous pouvez autoriser ou refuser le paiement. En mode production, le bouton **Payer** vous redirige vers l’application mobile Swish, où vous pouvez autoriser ou refuser le paiement. #### Test des applications Web de bureau Pour tester votre intégration, scannez le QR code à l’aide d’une application de lecture de QR code sur votre appareil mobile. Dans un environnement de test, la charge utile du QR code contient une URL qui vous redirige vers une page de paiement sur laquelle vous pouvez approuver ou refuser le paiement test. En mode production, vous devez scanner le code QR depuis l’application mobile Swish. Après avoir scanné le code QR, vous pouvez approuver ou refuser le paiement dans l’application mobile Swish. ## Échecs de paiement Swish utilise plusieurs données pour décider du refus d’une transaction (par exemple, s’il n’y a pas assez de fonds sur le compte bancaire du client ou si ce dernier a cliqué sur **Annuler** dans l’application). Dans ce cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et le statut de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method` Hormis le refus d’un paiement, dans le cas d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) Swish à l’état `requires_action`, les clients doivent effectuer le paiement sous 3 minutes. En l’absence d’action sous 3 minutes, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`. # API directe > This is a API directe for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/swish/accept-a-payment?payment-ui=direct-api. Swish est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suède. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID. 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éclarations obligatoires Pour respecter les règles de Swish, vous devez afficher le texte suivant dans votre tunnel de paiement à l’écran avant que le client n’autorise le paiement Swish : - Pour les localisations en anglais : « Stripe Technology Europe Limited (“Stripe”) has acquired the claim for payment. Therefore your payment will be made to Stripe. » - Pour les localisations en suédois : « Stripe Technology Europe Limited (“Stripe”) har övertagit fordran på betalning. Din betalning görs därför till Stripe ». - Pour les autres langues, une traduction équivalente du texte ci-dessus. Si vous intégrez Swish via un formulaire de paiement ou un composant d’interface utilisateur hébergé par Stripe, tel que [Checkout](https://docs.stripe.com/payments/checkout.md) ou le [Payment Element](https://docs.stripe.com/payments/payment-element.md), Stripe affiche cet avis pour vous. ## Configurer Stripe [Côté serveur] Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application : #### 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 émis par un client et suit le cycle de vie du processus de paiement étape par étape. Pour commencer, créez un `PaymentIntent` sur votre serveur et précisez le montant à encaisser et la devise. Si vous avez déjà créé une intégration à l’aide de l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `swish` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `PaymentIntent`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=6000 \ -d currency=sek \ -d "payment_method_types[]=swish" \ -d "payment_method_data[type]=swish" \ -d "payment_method_options[swish][reference]=Order-123" ``` > #### Remarque > > Vous pouvez définir la référence de la commande à présenter à votre client dans l’application Swish. ### Réponse ```json { "id": "pi_12345", "amount": 6000, "client_secret": "pi_12345_secret_abcdef", "currency": "sek", "payment_method": "pm_12345", "payment_method_types": [ "swish" ], "payment_method_options": { "swish": { "reference": "Order-123", }, }, "status": "requires_confirmation" } ``` ### 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 ``` ## Confirmer le PaymentIntent Utilisez l’[id](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-id) du PaymentIntent de l’[étape 2](https://docs.stripe.com/payments/swish/accept-a-payment.md#direct-api-create-payment-intent) pour *confirmer* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) le PaymentIntent. Cette action indique que le client souhaite payer avec le *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) spécifié. Une fois le PaymentIntent confirmé, le paiement est déclenché. Le paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) détermine la page vers laquelle Stripe doit rediriger l’utilisateur après avoir procédé au paiement. Initiez le paiement Swish en confirmant le PaymentIntent. Incluez une `return_url` vers laquelle rediriger votre client une fois le paiement effectué. ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/confirm \ -u "<>:" \ --data-urlencode "return_url=https://example.com/checkout/complete" ``` ### Réponse ```json { "id": "pi_12345", "amount": 6000, "currency": "sek", "payment_method": "pm_12345", "next_action": { "swish_handle_redirect_or_display_qr_code": { "hosted_instructions_url": "https://stripe.com/hiu-pi_123", "qr_code": { "data": "abc123", "image_url_png": "https://qr.stripe.com/qr_123.png", "image_url_svg": "https://qr.stripe.com/qr_123.svg" } }, "type": "swish_handle_redirect_or_display_qr_code" }, "payment_method_types": [ "swish" ], "payment_method_options": { "swish": { "reference": "Order-123", }, }, "status": "requires_action" } ``` Pour autoriser le paiement, redirigez votre client vers l’URL indiquée dans le champ [next_action[swish_handle_redirect_or_display_qr_code][hosted_instructions_url]](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-swish_handle_redirect_or_display_qr_code-hosted_instructions_url) ou chargez cette page dans un iframe. Cette page présente à la fois le code QR et un bouton de redirection vers l’application Swish. - Les clients utilisant un ordinateur de bureau peuvent scanner le code QR à l’aide de l’application Swish, puis autoriser le paiement. - Les clients utilisant un appareil mobile peuvent cliquer sur un bouton qui les redirige vers l’application Swish, où ils peuvent autoriser le paiement. > #### Remarque > > Votre client dispose de 3 minutes pour autoriser le paiement dans l’application Swish, après quoi le paiement échoue et le PaymentIntent bascule sur `requires_payment_method`. ## Traiter la commande [Côté serveur] [Utilisez une méthode telle que les webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) pour gérer le *traitement* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) de la commande. Lorsque votre client effectue le paiement, l’état du `PaymentIntent` passe à `succeeded` et le PaymentIntent envoie l’événement *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded). À défaut de paiement, le `PaymentIntent` envoie l’événement webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) et repasse à l’état `requires_payment_method`. ## Optional: Utiliser la méthode d'autorisation alternative Les clients peuvent ne pas être en mesure de scanner un code QR ou de suivre une redirection mobile. Utilisez cette méthode d’autorisation alternative pour leur permettre de saisir leur numéro de téléphone et d’ouvrir l’application Swish manuellement. Cette fonctionnalité est actuellement en version bêta sur invitation uniquement. Pour obtenir un accès anticipé, [contactez le service Support](https://support.stripe.com/). ## 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é** [Créez un gestionnaire de webhooks personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) pour écouter les événements et concevoir des flux de paiement asynchrones sur mesure. Testez et déboguez votre intégration de webhooks en local avec la 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. ## Optional: Tester votre intégration 1. Testez la méthode d’autorisation par défaut. À l’aide de vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes), créez et confirmez un PaymentIntent. Après avoir confirmé le PaymentIntent, suivez l’URL dans le champ [next_action[swish_handle_redirect_or_display_qr_code][hosted_instructions_url]](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-swish_handle_redirect_or_display_qr_code-hosted_instructions_url) vers une page de test contenant des options pour autoriser ou forcer l’échec du paiement. - Cliquez sur **Autorisation du paiement test** pour tester le cas où le paiement aboutit. Le PaymentIntent passe de `requires_action` à `succeeded`. - Cliquez sur **Échec du paiement test** pour tester le cas où le client ne parvient pas à s’authentifier. Le PaymentIntent passe de `requires_action` à `requires_payment_method`. | Adresse e-mail | Description | | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `{any_prefix}@{any_domain}` | Simule un paiement Swish autorisé par un client au bout de 1 minute : le *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) arrive après environ 1 minute. En mode production, ce webhook arrive immédiatement après l’autorisation du paiement. Exemple : anything@example.com | | `{any_prefix}succeed_immediately@{any_domain}` | Simule un paiement Swish autorisé immédiatement par votre client. Le webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) arrive en quelques secondes. En mode production, ce webhook arrive immédiatement après l’autorisation du paiement. Exemple : succeed_immediately@example.com | | `{any_prefix}expire_immediately@{any_domain}` | Simule un paiement Swish qui expire avant que votre client ne l’autorise. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) arrive en quelques secondes. Exemple : expire_immediately@example.com | | `{any_prefix}expire_with_delay@{any_domain}` | Simule un paiement Swish qui expire avant que votre client ne l’autorise. Le webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) arrive après environ 3 minutes. Exemple : expire_with_delay@example.com | ## Optional: Annulation Vous pouvez annuler des paiements Swish avant leur expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement Swish. ## Échecs de paiement Swish utilise plusieurs données pour décider du refus d’une transaction (par exemple, s’il n’y a pas assez de fonds sur le compte bancaire du client ou si ce dernier a cliqué sur **Annuler** dans l’application). Dans ce cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et le statut de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method` Hormis le refus d’un paiement, dans le cas d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) Swish à l’état `requires_action`, les clients doivent effectuer le paiement sous 3 minutes. En l’absence d’action sous 3 minutes, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`. # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/swish/accept-a-payment?payment-ui=mobile&platform=ios. Swish est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suède. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID. 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éclarations obligatoires Pour respecter les règles de Swish, vous devez afficher le texte suivant dans votre tunnel de paiement à l’écran avant que le client n’autorise le paiement Swish : - Pour les localisations en anglais : « Stripe Technology Europe Limited (“Stripe”) has acquired the claim for payment. Therefore your payment will be made to Stripe. » - Pour les localisations en suédois : « Stripe Technology Europe Limited (“Stripe”) har övertagit fordran på betalning. Din betalning görs därför till Stripe ». - Pour les autres langues, une traduction équivalente du texte ci-dessus. Si vous intégrez Swish via un formulaire de paiement ou un composant d’interface utilisateur hébergé par Stripe, tel que [Checkout](https://docs.stripe.com/payments/checkout.md) ou le [Payment Element](https://docs.stripe.com/payments/payment-element.md), Stripe affiche cet avis pour vous. Nous vous recommandons d’utiliser le composant [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios), un formulaire de paiement intégrable, pour ajouter Swish (et d’autres moyens de paiement) à votre intégration, avec un minimum d’effort. Ce guide explique comment accepter les paiements Swish depuis votre application mobile native à l’aide de votre propre formulaire de paiement personnalisé. Si vous acceptez Swish depuis votre application mobile d’origine, vos clients sont redirigés vers l’application mobile Swish pour authentifier la transaction. Le paiement est authentifié lors de la redirection. L’achat ne nécessite aucune action supplémentaire dans l’application mobile Swish et le client est redirigé vers votre site. ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### 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' ``` ### Côté client Le [SDK iOS de Stripe](https://github.com/stripe/stripe-ios) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-ios/index.html). Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures. #### Swift Package Manager Pour installer le SDK, veuillez suivre les étapes ci-dessous : 1. Dans Xcode, sélectionnez **File** > **Add Package Dependencies…** puis saisissez `https://github.com/stripe/stripe-ios-spm` en tant qu’URL du référentiel. 1. Sélectionnez le dernier numéro de version, visible sur notre [page des versions](https://github.com/stripe/stripe-ios/releases). 1. Ajoutez le produit **StripePaymentsUI** à la [cible de votre application](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si vous n’avez pas de fichier [Podfile](https://guides.cocoapods.org/syntax/podfile.html), exécutez la commande suivante pour en créer un : ```bash pod init ``` 1. Ajoutez cette ligne à votre `Podfile` : ```podfile pod 'StripePaymentsUI' ``` 1. Exécutez la commande suivante : ```bash pod install ``` 1. À partir de maintenant, n’oubliez pas d’utiliser le fichier .xcworkspace au lieu du fichier .xcodeproj pour ouvrir votre projet dans Xcode. 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, il vous suffit d’exécuter : ```bash pod update StripePaymentsUI ``` #### Carthage 1. Si vous ne l’avez pas encore fait, installez la version la plus récente de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Ajoutez cette ligne à votre `Cartfile` : ```cartfile github "stripe/stripe-ios" ``` 1. Suivez les [instructions d’installation de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Veillez à intégrer tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. Pour mettre à jour ultérieurement le SDK vers la version la plus récente, exécutez la commande suivante : ```bash carthage update stripe-ios --platform ios ``` #### Cadre manuel 1. Accédez à notre [page des versions GitHub](https://github.com/stripe/stripe-ios/releases/latest), puis téléchargez et décompressez **Stripe.xcframework.zip**. 1. Faites glisser **StripePaymentsUI.xcframework** vers la section **Embedded Binaries (Fichiers binaires incorporés)** des paramètres **General (Général)** de votre projet Xcode. Veillez à sélectionner **Copy items if needed (Copier les éléments si nécessaire)**. 1. Répétez l’étape 2 pour tous les cadres requis listés [ici](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. À l’avenir, pour mettre à jour vers la version la plus récente de notre SDK, répétez les étapes 1 à 3. > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-ios/releases) sur GitHub. Pour recevoir une notification lors de la publication d’une nouvelle version, [surveillez les versions](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) à partir du référentiel. Configurez le SDK avec votre [clé publiable](https://dashboard.stripe.com/test/apikeys) Stripe au démarrage de votre application. Cela lui permet d’envoyer des requêtes à l’API Stripe. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Créer un PaymentIntent [Côté serveur] [Côté client] ### Côté serveur Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Pour créer et confirmer un `PaymentIntent` sur votre serveur : - Indiquez le montant à encaisser et la devise. - Ajoutez `swish` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `PaymentIntent`. Assurez-vous que Swish est activé dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Définissez `payment_method_data[type]` sur `swish` pour créer un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) et l’utiliser immédiatement avec ce PaymentIntent. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=6000 \ -d currency=sek \ -d "payment_method_types[]=swish" \ -d "payment_method_data[type]=swish" \ --data-urlencode "return_url=payments-example://stripe-redirect" ``` Le PaymentIntent renvoyé contient la *clé secrète du client* (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)), que vous utiliserez pour *confirmer* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) le PaymentIntent. Renvoyez cette clé secrète côté client pour permettre son utilisation à l’étape suivante. ### Côté client Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la *clé secrète du client* (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)) qu’il contient. #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? // ...continued from previous step override func viewDidLoad() { // ...continued from previous step startCheckout() } func startCheckout() { // Request a PaymentIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ## Envoyer le paiement à Stripe [Côté client] Lorsqu’un client appuie sur le bouton de paiement avec Swish, confirmez le `PaymentIntent` pour finaliser le paiement. Configurez un objet `STPPaymentIntentParams` avec la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) du `PaymentIntent`. La clé secrète est différente de vos clés API qui servent à authentifier les requêtes de l’API Stripe. Elle doit être utilisée avec prudence, car elle peut servir à réaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client. ### Configurer une URL de redirection Le SDK iOS présente une vue Web dans votre application afin d’effectuer le paiement Swish. Si vous souhaitez qu’une fois l’authentification effectuée, la vue Web disparaisse automatiquement, sans que votre client ait à la fermer, vous pouvez paramétrer une URL personnalisée ou un lien universel, puis configurer votre délégation d’application de façon à transférer l’URL au SDK. #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } // This method handles opening universal link URLs (for example, "https://example.com/stripe_ios_callback") func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool { if userActivity.activityType == NSUserActivityTypeBrowsingWeb { if let url = userActivity.webpageURL { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } } } return false } ``` Transmettez l’URL en tant que `return_url` lorsque vous confirmez le PaymentIntent. Une fois l’authentification effectuée sur la vue Web, Stripe redirige l’utilisateur vers la `return_url`. ### Confirmer le paiement Swish Finalisez le paiement en appelant `STPPaymentHandler confirmPayment`. Une vue Web s’affiche pour permettre au client d’effectuer le paiement avec Swish. Le bloc de finalisation est ensuite appelé avec le résultat du paiement. #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) // Swish doesn't require additional parameters so we only need to pass the initialized // STPPaymentMethodSwishParams instance to STPPaymentMethodParams let swish = STPPaymentMethodSwishParams() let paymentMethodParams = STPPaymentMethodParams(swish: swish, billingDetails: nil, metadata: nil) paymentIntentParams.paymentMethodParams = paymentMethodParams paymentIntentParams.returnURL = "payments-example://stripe-redirect" STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded // ... case .canceled: // Payment canceled // ... case .failed: // Payment failed // ... @unknown default: fatalError() } } ``` ## 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é** [Créez un gestionnaire de webhooks personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) pour écouter les événements et concevoir des flux de paiement asynchrones sur mesure. Testez et déboguez votre intégration de webhooks en local avec la 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. ## Optional: Tester l'intégration Testez votre intégration Swish en affichant la page de redirection à l’aide de vos clés API de test. Vous pouvez tester la réussite de paiement en l’authentifiant sur la page de redirection. Le [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) bascule 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**. Le [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) bascule alors de l’état `requires_action` à `requires_payment_method`. En mode production, le bouton **Payer** vous redirige vers l’application mobile Swish, où vous pouvez autoriser ou refuser le paiement. ## Optional: Annulation Vous pouvez annuler des paiements Swish avant leur expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement Swish. ## Échecs de paiement Swish utilise plusieurs données pour décider du refus d’une transaction (par exemple, s’il n’y a pas assez de fonds sur le compte bancaire du client ou si ce dernier a cliqué sur **Annuler** dans l’application). Dans ce cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et le statut de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method` Hormis le refus d’un paiement, dans le cas d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) Swish à l’état `requires_action`, les clients doivent effectuer le paiement sous 3 minutes. En l’absence d’action sous 3 minutes, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`. # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/swish/accept-a-payment?payment-ui=mobile&platform=android. Swish est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suède. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID. 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éclarations obligatoires Pour respecter les règles de Swish, vous devez afficher le texte suivant dans votre tunnel de paiement à l’écran avant que le client n’autorise le paiement Swish : - Pour les localisations en anglais : « Stripe Technology Europe Limited (“Stripe”) has acquired the claim for payment. Therefore your payment will be made to Stripe. » - Pour les localisations en suédois : « Stripe Technology Europe Limited (“Stripe”) har övertagit fordran på betalning. Din betalning görs därför till Stripe ». - Pour les autres langues, une traduction équivalente du texte ci-dessus. Si vous intégrez Swish via un formulaire de paiement ou un composant d’interface utilisateur hébergé par Stripe, tel que [Checkout](https://docs.stripe.com/payments/checkout.md) ou le [Payment Element](https://docs.stripe.com/payments/payment-element.md), Stripe affiche cet avis pour vous. Nous vous recommandons d’utiliser le composant [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android), un formulaire de paiement intégrable, pour ajouter Swish (et d’autres moyens de paiement) à votre intégration, avec un minimum d’effort. Ce guide explique comment accepter les paiements Swish depuis votre application mobile native à l’aide de votre propre formulaire de paiement personnalisé. Si vous acceptez les paiements Swish depuis votre application mobile native, vos clients sont redirigés vers l’application mobile Swish pour authentification. Le paiement est authentifié lors de la redirection. La finalisation de l’achat ne nécessite aucune action supplémentaire dans l’application mobile Swish. Le client est ensuite redirigé vers votre site. ## Configurer Stripe [Côté serveur] [Côté client] Tout d’abord, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register). ### Côté serveur Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### 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' ``` ### Côté client Le [SDK Stripe Android](https://github.com/stripe/stripe-android) est disponible en open source et [fait l’objet d’une documentation complète](https://stripe.dev/stripe-android/). Pour installer le SDK, ajoutez `stripe-android` au bloc `dependencies` de votre fichier [app/build.gradle](https://developer.android.com/studio/build/dependencies) : #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.9.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.9.0") } ``` > Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des [versions](https://github.com/stripe/stripe-android/releases) sur GitHub. Pour savoir quand une nouvelle version est disponible, [surveillez les versions du référentiel](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Configurez le SDK avec votre [clé publique](https://dashboard.stripe.com/apikeys) Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe `Application` : #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) lors de vos activités de test et de développement et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. Les échantillons de code de Stripe utilisent également [OkHttp](https://github.com/square/okhttp) et [GSON](https://github.com/google/gson) pour envoyer des requêtes HTTP à un serveur. ## Créer un PaymentIntent [Côté serveur] [Côté client] ### Côté serveur Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Pour créer et confirmer un `PaymentIntent` sur votre serveur : - Indiquez le montant à encaisser et la devise. - Ajoutez `swish` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `PaymentIntent`. Assurez-vous que Swish est activé dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Définissez `payment_method_data[type]` sur `swish` pour créer un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) et l’utiliser immédiatement avec ce PaymentIntent. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=6000 \ -d currency=sek \ -d "payment_method_types[]=swish" \ -d "payment_method_data[type]=swish" \ -d "payment_method_options[swish][reference]=Order-123" ``` Le PaymentIntent renvoyé contient la *clé secrète du client* (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)), que vous utiliserez pour *confirmer* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) le PaymentIntent. Renvoyez cette clé secrète côté client pour permettre son utilisation à l’étape suivante. ### Côté client Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la *clé secrète du client* (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)) qu’il contient. #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... startCheckout() } private fun startCheckout() { // Request a PaymentIntent from your server and store its client secret in paymentIntentClientSecret // Click View full sample to see a complete implementation } } ``` ## Envoyer le paiement à Stripe [Côté client] Lorsqu’un client appuie sur le bouton de paiement avec Swish, confirmez le `PaymentIntent` pour finaliser le paiement. Configurez un objet `ConfirmPaymentIntentParams` avec la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) du `PaymentIntent`. La clé secrète est différente de vos clés API qui servent à authentifier les requêtes de l’API Stripe. Elle doit être utilisée avec prudence, car elle peut servir à réaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client. ### Confirmer le paiement Swish Pour terminer le paiement, appelez la méthode [confirm de PaymentLauncher](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/confirm.html). Une page Web s’affiche dans laquelle le client peut finaliser le paiement avec Swish. Une fois l’opération terminée, le `PaymentResultCallback` fourni est appelé avec le résultat du paiement. #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { // ... private val paymentLauncher: PaymentLauncher by lazy { val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext) PaymentLauncher.create( activity = this, publishableKey = paymentConfiguration.publishableKey, stripeAccountId = paymentConfiguration.stripeAccountId, callback = ::onPaymentResult, ) } // … private fun startCheckout() { // ... val swishParams = PaymentMethodCreateParams.createSwish() val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = swishParams, clientSecret = paymentIntentClientSecret, // Add a mandate ID or MandateDataParams if you // want to set this up for future use… ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { // Handle the payment result… } } ``` ## 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é** [Créez un gestionnaire de webhooks personnalisé](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) pour écouter les événements et concevoir des flux de paiement asynchrones sur mesure. Testez et déboguez votre intégration de webhooks en local avec la 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. ## Optional: Tester l'intégration Testez votre intégration Swish en affichant la page de redirection à l’aide de vos clés API de test. Vous pouvez tester la réussite de paiement en l’authentifiant sur la page de redirection. Le [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) bascule 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**. Le [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) bascule alors de l’état `requires_action` à `requires_payment_method`. En mode production, le bouton **Payer** vous redirige vers l’application mobile Swish, où vous pouvez autoriser ou refuser le paiement. ## Optional: Annulation Vous pouvez annuler des paiements Swish avant leur expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement Swish. ## Échecs de paiement Swish utilise plusieurs données pour décider du refus d’une transaction (par exemple, s’il n’y a pas assez de fonds sur le compte bancaire du client ou si ce dernier a cliqué sur **Annuler** dans l’application). Dans ce cas, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et le statut de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method` Hormis le refus d’un paiement, dans le cas d’un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) Swish à l’état `requires_action`, les clients doivent effectuer le paiement sous 3 minutes. En l’absence d’action sous 3 minutes, le [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) est détaché et l’état de l’objet [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) passe automatiquement à `requires_payment_method`. # React Native > This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/swish/accept-a-payment?payment-ui=mobile&platform=react-native. Swish est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Suède. Il permet aux clients d’[authentifier et approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) leurs paiements via l’application mobile Swish et l’application mobile suédoise BankID. 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éclarations obligatoires Pour respecter les règles de Swish, vous devez afficher le texte suivant dans votre tunnel de paiement à l’écran avant que le client n’autorise le paiement Swish : - Pour les localisations en anglais : « Stripe Technology Europe Limited (“Stripe”) has acquired the claim for payment. Therefore your payment will be made to Stripe. » - Pour les localisations en suédois : « Stripe Technology Europe Limited (“Stripe”) har övertagit fordran på betalning. Din betalning görs därför till Stripe ». - Pour les autres langues, une traduction équivalente du texte ci-dessus. Si vous intégrez Swish via un formulaire de paiement ou un composant d’interface utilisateur hébergé par Stripe, tel que [Checkout](https://docs.stripe.com/payments/checkout.md) ou le [Payment Element](https://docs.stripe.com/payments/payment-element.md), Stripe affiche cet avis pour vous. ## Configurer Stripe [Côté serveur] [Côté client] Pour commencer, vous devez créer un compte Stripe. [Inscrivez-vous maintenant](https://dashboard.stripe.com/register). ### Côté serveur Cette intégration exige des endpoints sur votre serveur qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur : #### 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' ``` ### Côté client Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) : #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Ensuite, installez les autres dépendances nécessaires : - Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ## Créer un PaymentIntent [Côté serveur] [Côté client] ### Côté serveur Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) est un objet qui représente votre intention de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Pour créer et confirmer un `PaymentIntent` sur votre serveur : - Indiquez le montant à encaisser et la devise. - Ajoutez `swish` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) pour votre `PaymentIntent`. Assurez-vous que Swish est activé dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=6000 \ -d currency=sek \ -d "payment_method_types[]=swish" \ --data-urlencode "return_url=payments-example://stripe-redirect" ``` Le PaymentIntent renvoyé contient la *clé secrète du client* (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)), que vous utiliserez pour *confirmer* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) le PaymentIntent. Renvoyez cette clé secrète côté client pour permettre son utilisation à l’étape suivante. ### Côté client Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la *clé secrète du client* (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)) qu’il contient : ```javascript function PaymentScreen() { const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'sek', }), }); const {clientSecret} = await response.json(); return clientSecret; }; const handlePayPress = async () => { // See below }; return (