# Paiements Vipps Pour comprendre comment accepter les paiements Vipps, un moyen de paiement très répandu en Norvège. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/vipps/accept-a-payment?payment-ui=checkout. Vipps est un portefeuille électronique [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Norvège. Il permet à votre client d’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) ses paiements à l’aide de l’application Vipps. Lorsque votre client paie avec Vipps, Stripe effectue une transaction par carte à l’aide des données de carte que nous recevons de Vipps. Le traitement de la transaction par carte est invisible pour votre intégration, et Stripe [vous informe immédiatement](https://docs.stripe.com/payments/payment-methods.md#payment-notification) de la réussite ou de l’échec du paiement. > 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. Utilisez ce guide pour activer Vipps sur [Checkout](https://docs.stripe.com/payments/checkout.md), notre formulaire de paiement hébergé, et découvrir les différences entre l’acceptation de paiements via des moyens de paiement dynamiques et la configuration manuelle des moyens de paiement. ## Déterminer la compatibilité **Lieux d’implantation pris en charge** : EEA, GB **Devises prises en charge** : `nok` **Devises de règlement** : `nok` **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 Vipps : - 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 couronnes norvégiennes (code de devise `NOK`). ## Configurer Stripe [Côté serveur] Tout d’abord, vous avez besoin d’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 Vipps Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez : 1. Fournissez l’en-tête d’aperçu `vipps_preview=v1` avec votre [API version](https://docs.stripe.com/sdks/set-version.md) dans les requêtes. 1. Ajoutez `vipps` à la liste des `payment_method_types`. 1. Assurez-vous que tous vos `line_items` utilisent la devise `nok`. #### Page hébergée par Stripe ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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]=vipps" \ --data-urlencode "success_url=https://example.com/success" ``` #### Formulaire intégré ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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]=vipps" \ --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). ## 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. ## Tester l'intégration Pour tester votre intégration dans un environnement de test, cela vous redirige vers une page de paiement test, dans laquelle vous pouvez autoriser ou refuser le paiement test. En mode production, saisissez le numéro de téléphone associé à Vipps pour envoyer une notification push à votre application mobile Vipps. Vous pouvez autoriser ou refuser le paiement dans l’application mobile Vipps. ## Autoriser un paiement et le saisir ultérieurement Vipps prend en charge [l’autorisation et la capture séparées](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) avec une période de retenue de 7 jours. Stripe annule le PaymentIntent et envoie un événement [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) si le paiement n’est pas capturé pendant la période de 7 jours. ### Indiquer à Stripe d’autoriser uniquement Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option [capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) sur `manual` lorsque vous créez la session Checkout. Ce paramètre indique à Stripe de n’autoriser que le montant figurant sur la carte du client associée à Vipps. #### Page hébergée par Stripe ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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_intent_data[capture_method]=manual" \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=vipps" \ --data-urlencode "success_url=https://example.com/success.html" ``` #### Formulaire intégré ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d "line_items[0][price_data][currency]=nok" \ -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_intent_data[capture_method]=manual" \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=vipps" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` Une fois l’autorisation accordée, Stripe envoie un événement [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consultez la page [Événements](https://docs.stripe.com/api/events.md) pour en savoir plus. ### Capturer les fonds Une fois l’autorisation réussie, l’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe à `requires_capture` et vous pouvez [capturer](https://docs.stripe.com/api/payment_intents/capture.md) les fonds autorisés. Stripe ne prend en charge que les captures manuelles du montant total. ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \ -u "<>:" \ -d amount_to_capture=2000 ``` ## Optional: Annulation Vous pouvez annuler des paiements Vipps avant leur expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement Vipps. ## Échecs de paiement Les transactions Vipps peuvent échouer si la transaction par carte sous-jacente est refusée. En savoir plus sur les [refus de paiement par carte](https://docs.stripe.com/declines/card.md). Dans ce cas, le PaymentMethod est dissocié et l’état du PaymentIntent passe automatiquement à `requires_payment_method`. Lorsque l’état du PaymentIntent est `requires_action`, votre client doit authentifier le paiement dans les 5 minutes. Si aucune action n’est effectuée au bout de 5 minutes, le PaymentMethod est dissocié et l’état du PaymentIntent passe automatiquement à `requires_payment_method`. ## Remboursements et litiges Stripe effectue une transaction par carte à l’aide de rails de paiement par carte standard dans le cadre d’une transaction Vipps. Les [remboursements](https://docs.stripe.com/refunds.md) et les [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard. ## See also - [En savoir plus sur Vipps](https://docs.stripe.com/payments/vipps.md) - [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/vipps/accept-a-payment?payment-ui=elements. Vipps est un portefeuille électronique [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Norvège. Il permet à votre client d’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) ses paiements à l’aide de l’application Vipps. Lorsque votre client paie avec Vipps, Stripe effectue une transaction par carte à l’aide des données de carte que nous recevons de Vipps. Le traitement de la transaction par carte est invisible pour votre intégration, et Stripe [vous informe immédiatement](https://docs.stripe.com/payments/payment-methods.md#payment-notification) de la réussite ou de l’échec du paiement. Ce guide vous explique comment intégrer un formulaire de paiement Stripe personnalisé à votre site Web ou à votre application à l’aide de [Payment Element](https://docs.stripe.com/payments/payment-element.md). Le Payment Element vous permet de prendre en charge Vipps et d’autres moyens de paiement automatiquement. Pour les configurations et personnalisations avancées, consultez le guide d’intégration [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md). ## Configurer Stripe [Côté serveur] Tout d’abord, vous avez besoin d’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' ``` ## Créer un PaymentIntent [Côté serveur] Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) pour représenter votre intention de collecter le paiement d’un client. Cet objet suit les tentatives de débit et les changements d’état de paiement tout au long du processus. Spécifiez manuellement les moyens de paiement en les répertoriant à l’aide de l’attribut `payment_method_types`. Créez un PaymentIntent sur votre serveur avec un montant, une devise et la liste des moyens de paiement que vous souhaitez proposer. 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. Pour activer les paiements Vipps lors de la création d’un PaymentIntent, vous devez inclure l’en-tête d’aperçu `vipps_preview=v1` dans vos requêtes API. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1000 \ -d currency=nok \ -d "payment_method_types[]=vipps" ``` ### 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('<>', { betas: 'vipps_pm_beta_1', apiVersion: vipps_preview=v1, }); ``` ### 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('<>', { betas: 'vipps_pm_beta_1', apiVersion: vipps_preview=v1, }); 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 les transactions Les clients peuvent authentifier les transactions Vipps avec des applications mobiles ou de bureau. Le client utilisé par l’objet Customer détermine la méthode d’authentification après l’appel de `confirmPayment`. #### Authentification par application mobile Une fois que vous avez appelé `confirmPayment`, Stripe redirige vos clients vers Vipps pour qu’ils autorisent ou refusent le paiement. Une fois que vos clients ont autorisé le paiement, la page les redirige vers la `return_url` du Payment Intent. 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 5 minutes, puis l’état du PaymentIntent 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. #### Authentification via une application Web de bureau Après avoir appelé `confirmPayment`, Stripe redirige vos clients vers une page hébergée par Vipps, où ils peuvent saisir le numéro de téléphone associé à leur compte Vipps. Une notification push est alors envoyée à leur application Vipps afin qu’ils puissent authentifier le paiement. Une fois le paiement authentifié par le client, la page le redirige vers le `return_url`. Si vous préférez ne pas rediriger les clients sur le Web après le paiement, transmettez `redirect: if_required` au Payment Element. Une session d’authentification expire au bout de 5 minutes, puis l’état du PaymentIntent 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. ## 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. ## Tester l'intégration #### Tester des applications Web mobiles Pour tester votre intégration, choisissez Vipps comme moyen de paiement et appuyez sur **Payer**. Dans un environnement de test, cela vous redirige vers une page de paiement de test, dans laquelle vous pouvez autoriser ou refuser le paiement. En mode production, le bouton **Payer** vous redirige vers l’application mobile Vipps, où vous pouvez autoriser ou refuser le paiement. #### Test des applications Web de bureau Pour tester votre intégration dans un environnement de test, cela vous redirige vers une page de paiement test, dans laquelle vous pouvez autoriser ou refuser le paiement test. En mode production, saisissez le numéro de téléphone associé à Vipps pour envoyer une notification push à votre application mobile Vipps. Vous pouvez autoriser ou refuser le paiement dans l’application mobile Vipps. ## Optional: Autoriser un paiement et le saisir ultérieurement Vipps prend en charge [l’autorisation et la capture séparées](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) avec une période de retenue de 7 jours. Stripe annule le PaymentIntent et envoie un événement [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) si le paiement n’est pas capturé pendant la période de 7 jours. ### Indiquer à Stripe d’autoriser uniquement Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) sur `manual` lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe de n’autoriser que le montant figurant sur la carte du client associée à Vipps. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1099 \ -d currency=dkk \ -d capture_method=manual \ -d "payment_method_types[]=vipps" \ -d "payment_method_data[type]=vipps" ``` Une fois l’autorisation accordée, Stripe envoie un événement [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consultez la page [Événements](https://docs.stripe.com/api/events.md) pour en savoir plus. ### Capturer les fonds Une fois l’autorisation réussie, l’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe à `requires_capture` et vous pouvez [capturer](https://docs.stripe.com/api/payment_intents/capture.md) les fonds autorisés. Stripe ne prend en charge que les captures manuelles du montant total. ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount_to_capture=1099 ``` ## Optional: Annulation Vous pouvez annuler des paiements Vipps avant leur expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement Vipps. ## Échecs de paiement Les transactions Vipps peuvent échouer si la transaction par carte sous-jacente est refusée. En savoir plus sur les [refus de paiement par carte](https://docs.stripe.com/declines/card.md). Dans ce cas, le PaymentMethod est dissocié et l’état du PaymentIntent passe automatiquement à `requires_payment_method`. Lorsque l’état du PaymentIntent est `requires_action`, votre client doit authentifier le paiement dans les 5 minutes. Si aucune action n’est effectuée au bout de 5 minutes, le PaymentMethod est dissocié et l’état du PaymentIntent passe automatiquement à `requires_payment_method`. ## Remboursements et litiges Stripe effectue une transaction par carte à l’aide de rails de paiement par carte standard dans le cadre d’une transaction Vipps. Les [remboursements](https://docs.stripe.com/refunds.md) et les [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard. # API directe > This is a API directe for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/vipps/accept-a-payment?payment-ui=direct-api. Vipps est un portefeuille électronique [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé en Norvège. Il permet à votre client d’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) ses paiements à l’aide de l’application Vipps. Lorsque votre client paie avec Vipps, Stripe effectue une transaction par carte à l’aide des données de carte que nous recevons de Vipps. Le traitement de la transaction par carte est invisible pour votre intégration, et Stripe [vous informe immédiatement](https://docs.stripe.com/payments/payment-methods.md#payment-notification) de la réussite ou de l’échec du paiement. ## Configurer Stripe [Côté serveur] Tout d’abord, vous avez besoin d’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' ``` ## 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 de collecter un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement à chaque étape. Créez un `PaymentIntent` sur votre serveur et précisez le montant à percevoir ainsi qu’une devise prise en charge (`nok`). Si votre intégration inclut déjà l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `vipps` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). Veillez à inclure l’en-tête `vipps_preview=v1` dans vos requêtes API pour activer Vipps. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1099 \ -d currency=nok \ -d "payment_method_types[]=vipps" \ -d "payment_method_data[type]=vipps" ``` ### Exemple de réponse ```json { "id": "pi_12345", "amount": 1099, "client_secret": "pi_12345_secret_abcdef", "currency": "nok", "payment_method": "pm_12345", "payment_method_types": [ "vipps" ], "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 du PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-id) de l’[étape 2](https://docs.stripe.com/payments/vipps/accept-a-payment.md#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é, Stripe initie le paiement. 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 le client après qu’il a procédé au paiement. ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/confirm \ -u "<>:" \ --data-urlencode "return_url=https://example.com/checkout/complete" ``` ### Exemple de réponse ```json { "id": "pi_12345", "amount": 1099, "currency": "nok", "payment_method": "pm_12345", "next_action": { "redirect_to_url": { "return_url": "https://example.com/checkout/complete", "url": "https://pm-redirects.stripe.com/authorize/acct_123/pa_nonce_abc" }, "type": "redirect_to_url" }, "payment_method_types": [ "vipps" ], "status": "requires_action" } ``` Pour autoriser le paiement, redirigez votre client vers l’URL spécifiée dans le champ [next_action[redirect_to_url][url]](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-redirect_to_url-url). - Sur un ordinateur de bureau, l’URL ouvre une page d’accueil Vipps sur laquelle le client peut saisir le numéro de téléphone associé à son compte Vipps. Il peut ensuite utiliser l’application mobile Vipps pour autoriser le paiement. - Sur un appareil mobile, l’URL ouvre directement l’application Vipps (le cas échéant) ou redirige vers la page d’accueil Vipps, de la même façon que sur un ordinateur de bureau. Votre client dispose de 5 minutes pour ouvrir l’URL de redirection et autoriser le paiement dans l’application Vipps. Si le paiement par carte sous-jacent échoue, le client peut choisir une autre carte et réessayer d’autoriser l’opération dans l’application Vipps. S’il n’est pas autorisé dans les 5 minutes, le paiement échoue et l’état du PaymentIntent passe à `requires_payment_method`. ## 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. ## Tester l'intégration À l’aide de vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes), créez un PaymentIntent. Après avoir confirmé le PaymentIntent, suivez l’URL de redirection `next_action` qui vous mènera vers une page de test avec des options pour valider ou non le paiement. - Cliquez sur **Autoriser le paiement test** pour tester le cas où le paiement a réussi. 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`. ## Optional: Autoriser un paiement et le saisir ultérieurement Vipps prend en charge [l’autorisation et la capture séparées](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md) avec une période de retenue de 7 jours. Stripe annule le PaymentIntent et envoie un événement [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) si le paiement n’est pas capturé pendant la période de 7 jours. ### Indiquer à Stripe d’autoriser uniquement Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) sur `manual` lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe de n’autoriser que le montant figurant sur la carte du client associée à Vipps. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount=1099 \ -d currency=dkk \ -d capture_method=manual \ -d "payment_method_types[]=vipps" \ -d "payment_method_data[type]=vipps" ``` Une fois l’autorisation accordée, Stripe envoie un événement [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consultez la page [Événements](https://docs.stripe.com/api/events.md) pour en savoir plus. ### Capturer les fonds Une fois l’autorisation réussie, l’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe à `requires_capture` et vous pouvez [capturer](https://docs.stripe.com/api/payment_intents/capture.md) les fonds autorisés. Stripe ne prend en charge que les captures manuelles du montant total. ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; vipps_preview=v1" \ -d amount_to_capture=1099 ``` ## Optional: Annulation Vous pouvez annuler des paiements Vipps avant leur expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement Vipps. ## Échecs de paiement Les transactions Vipps peuvent échouer si la transaction par carte sous-jacente est refusée. En savoir plus sur les [refus de paiement par carte](https://docs.stripe.com/declines/card.md). Dans ce cas, le PaymentMethod est dissocié et l’état du PaymentIntent passe automatiquement à `requires_payment_method`. Lorsque l’état du PaymentIntent est `requires_action`, votre client doit authentifier le paiement dans les 5 minutes. Si aucune action n’est effectuée au bout de 5 minutes, le PaymentMethod est dissocié et l’état du PaymentIntent passe automatiquement à `requires_payment_method`. ## Remboursements et litiges Stripe effectue une transaction par carte à l’aide de rails de paiement par carte standard dans le cadre d’une transaction Vipps. Les [remboursements](https://docs.stripe.com/refunds.md) et les [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard.