# Paiements MobilePay

Comment accepter MobilePay, un moyen de paiement très répandu au Danemark et en Finlande.

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/mobilepay/accept-a-payment?payment-ui=checkout.

MobilePay est un wallet par carte [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé au Danemark et en Finlande. Il permet à votre client de s’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) des paiements à l’aide de l’application MobilePay.

Lorsque votre client paie avec MobilePay, Stripe effectue une transaction par carte en utilisant les données de carte que nous recevons de MobilePay. 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 MobilePay 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

**Devises prises en charge** : `eur, dkk, sek, nok`

**Devises de règlement** : `eur, dkk, sek, 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 MobilePay :

- Pour tous les postes, 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) doivent être exprimés en euros, en couronnes danoises, en couronnes suédoises ou en couronnes norvégiennes (codes de devises `eur`, `dkk` ou `sek` `nok`).

## 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 MobilePay

Lors de la création d’une nouvelle [session Checkout](https://docs.stripe.com/api/checkout/sessions.md), vous devez :

1. Ajouter `mobilepay` à la liste des `payment_method_types`.
1. S’assurer que tous vos `line_items` utilise la devise`eur`, `dkk`, `sek` ou `nok`.

#### Page hébergée par Stripe

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=dkk" \
  -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]=mobilepay" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulaire intégré

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=dkk" \
  -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]=mobilepay" \
  --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

#### Tester des applications web mobiles

Pour tester votre intégration, choisissez MobilePay 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 MobilePay, 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é à MobilePay pour envoyer une notification push à votre application mobile MobilePay. Vous pouvez autoriser ou refuser un paiement dans l’application mobile MobilePay.

## Optional: Autoriser un paiement et le saisir ultérieurement

MobilePay prend en charge [l’autorisation et la capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md).

### Indiquer à Stripe d’autoriser uniquement

Pour indiquer que vous souhaitez séparer l’autorisation de la capture, définissez [capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) sur `manual` lors de la création de la session Checkout. Ce paramètre indique à Stripe d’autoriser uniquement le montant sur la carte du client associée à MobilePay.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=mobilepay" \
  -d "line_items[0][price_data][currency]=dkk" \
  -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 "payment_intent_data[capture_method]=manual" \
  --data-urlencode "success_url=https://example.com/success.html"
```

Une fois l’autorisation effectué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). Pour en savoir plus, consultez la section [Événements](https://docs.stripe.com/api/events.md).

### 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 complet.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=2000
```

## Optional: Annulation

Vous pouvez annuler les paiements MobilePay avant leur date d’expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement MobilePay.

## Échecs de paiement

Les transactions MobilePay 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&nbsp;minutes. Si aucune action n’est effectuée au bout de 5&nbsp;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 MobilePay. 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 MobilePay](https://docs.stripe.com/payments/mobilepay.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/mobilepay/accept-a-payment?payment-ui=elements.

MobilePay est un wallet par carte [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé au Danemark et en Finlande. Il permet à votre client de s’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) des paiements à l’aide de l’application MobilePay.

Lorsque votre client paie avec MobilePay, Stripe effectue une transaction par carte en utilisant les données de carte que nous recevons de MobilePay. 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 automatiquement en charge MobilePay et d’autres moyens de paiement. 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]

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&nbsp;:

#### 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 **MobilePay** sur la page des [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods).

Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malveillants puissent définir leurs propres prix.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true"
```

#### Répertorier les moyens de paiement manuellement

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 "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d currency=eur \
  -d "payment_method_types[]=mobilepay"
```

### 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&nbsp;:

#### 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&nbsp;:

```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&nbsp;:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```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&nbsp;Element](https://docs.stripe.com/payments/payment-element.md). Le Payment&nbsp;Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment&nbsp;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&nbsp;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
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement&nbsp;:

```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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 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&nbsp;:

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Lors du chargement du formulaire précédent, créez une instance du composant Payment&nbsp;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`&nbsp;:

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&nbsp;:

```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('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Ajouter le composant Element Payment

Utilisez le composant `PaymentElement` pour créer votre formulaire&nbsp;:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      // 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
      //
      // <LinkAuthenticationElement id="link-authentication-element"
        // Prefill the email field like so:
        // options={{defaultValues: {email: 'foo@bar.com'}}}
      // /><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

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&nbsp;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 (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

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&nbsp;:

| 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`&nbsp;; ils seront conservés tout au long du processus de redirection.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// 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 clients peuvent authentifier les transactions MobilePay avec des applications mobiles ou de bureau. L’objet Customer que le client utilise détermine la méthode d’authentification après avoir appelé `confirmPayment`.

#### Authentification par application mobile

Une fois que vous avez appelé `confirmPayment`, Stripe redirige vos clients vers MobilePay pour approuver ou refuser le paiement. Une fois que vos clients ont autorisé le paiement, ils sont redirigés 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&nbsp;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 MobilePay, où ils peuvent saisir le numéro de téléphone associé à leur compte MobilePay. Une notification push est alors envoyée à leur application MobilePay afin qu’ils puissent authentifier le paiement. Une fois le paiement authentifié par le client, la page le redirige vers la `return_url`. Si vous préférez ne pas rediriger les clients sur le Web après le paiement, transmettez `redirect: if_required` au composant Payment Element.

Une session d’authentification expire au bout de 5&nbsp;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 MobilePay 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 MobilePay, 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é à MobilePay pour envoyer une notification push à votre application mobile MobilePay. Vous pouvez autoriser ou refuser un paiement dans l’application mobile MobilePay.

## Optional: Autoriser un paiement et le saisir ultérieurement

MobilePay prend en charge [l’autorisation et la capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md).

### 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 d’autoriser uniquement le montant figurant sur la carte du client associée à MobilePay.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=dkk \
  -d capture_method=manual \
  -d "payment_method_types[]=mobilepay" \
  -d "payment_method_data[type]=mobilepay"
```

Une fois l’autorisation effectué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). Pour en savoir plus, consultez la section [Événements](https://docs.stripe.com/api/events.md).

### 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 complet.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=1099
```

## Optional: Annulation

Vous pouvez annuler les paiements MobilePay avant leur date d’expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement MobilePay.

## Échecs de paiement

Les transactions MobilePay 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&nbsp;minutes. Si aucune action n’est effectuée au bout de 5&nbsp;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 réseaux de carte standard dans le cadre d’une transaction MobilePay. Les [remboursements](https://docs.stripe.com/refunds.md) et [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/mobilepay/accept-a-payment?payment-ui=direct-api.

MobilePay est un wallet par carte [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé au Danemark et en Finlande. Il permet à votre client de s’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) des paiements à l’aide de l’application MobilePay.

Lorsque votre client paie avec MobilePay, Stripe effectue une transaction par carte en utilisant les données de carte que nous recevons de MobilePay. 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]

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&nbsp;:

#### 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 auprès d’un client et qui suit le cycle de vie du processus de paiement étape par étape. Créez un `PaymentIntent` sur votre serveur et spécifiez le montant à collecter ainsi qu’une devise prise en charge (`eur`, `dkk`, `sek` ou `nok`). Si votre intégration inclut déjà l’[API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `mobilepay` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=dkk \
  -d "payment_method_types[]=mobilepay" \
  -d "payment_method_data[type]=mobilepay"
```

### Exemple de réponse

```json
{
  "id": "pi_12345",
  "amount": 1099,
  "client_secret": "pi_12345_secret_abcdef",
  "currency": "dkk",
  "payment_method": "pm_12345",
  "payment_method_types": [
     "mobilepay"
  ],
  "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&nbsp;:

#### 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&nbsp;:

```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&nbsp;:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```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) de PaymentIntent de l’[étape 2](https://docs.stripe.com/payments/mobilepay/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é. Stripe initie un paiement après confirmation du PaymentIntent. L’adresse [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) indique à Stripe où rediriger le client une fois le paiement effectué.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/confirm \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "return_url=https://example.com/checkout/complete"
```

### Exemple de réponse

```json
{
  "id": "pi_12345",
  "amount": 1099,
  "currency": "dkk",
  "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": [
     "mobilepay"
  ],
  "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 MobilePay sur laquelle le client peut saisir le numéro de téléphone associé à son compte MobilePay. Il peut ensuite utiliser l’application mobile MobilePay pour autoriser le paiement.
- Sur un appareil mobile, l’URL ouvre directement l’application MobilePay (le cas échéant) ou redirige vers la page d’accueil MobilePay, 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 MobilePay. Si le paiement par carte sous-jacent échoue, votre client peut choisir une autre carte et réessayer dans l’application MobilePay. Si le paiement 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 postpaiement

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 permettant de 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 **Faire échouer le paiement test** pour tester l’échec de l’authentification du client. Le PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Autoriser un paiement et le saisir ultérieurement

MobilePay prend en charge [l’autorisation et la capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md).

### 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 d’autoriser uniquement le montant figurant sur la carte du client associée à MobilePay.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=dkk \
  -d capture_method=manual \
  -d "payment_method_types[]=mobilepay" \
  -d "payment_method_data[type]=mobilepay"
```

Une fois l’autorisation effectué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). Pour en savoir plus, consultez la section [Événements](https://docs.stripe.com/api/events.md).

### 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 complet.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=1099
```

## Optional: Annulation

Vous pouvez annuler les paiements MobilePay avant leur date d’expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement MobilePay.

## Échecs de paiement

Les transactions MobilePay 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&nbsp;minutes. Si aucune action n’est effectuée au bout de 5&nbsp;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 réseaux de carte standard dans le cadre d’une transaction MobilePay. Les [remboursements](https://docs.stripe.com/refunds.md) et [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard.


# 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/mobilepay/accept-a-payment?payment-ui=mobile&platform=ios.

MobilePay est un wallet par carte [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé au Danemark et en Finlande. Il permet à votre client de s’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) des paiements à l’aide de l’application MobilePay.

Lorsque votre client paie avec MobilePay, Stripe effectue une transaction par carte en utilisant les données de carte que nous recevons de MobilePay. 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 recommande 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 MobilePay et d’autres moyens de paiement à votre intégration, avec un minimum d’effort.

Ce guide explique comment accepter MobilePay depuis votre application mobile native à l’aide de votre formulaire de paiement personnalisé. Votre application mobile native redirige votre client vers l’application mobile MobilePay pour effectuer le paiement. La finalisation de l’achat ne nécessite aucune action supplémentaire dans l’application mobile MobilePay.

## 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&nbsp;:

#### 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&nbsp;:

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&nbsp;:
   ```bash
   pod init
   ```
1. Ajoutez cette ligne à votre `Podfile`&nbsp;:
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. Exécutez la commande suivante&nbsp;:
   ```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&nbsp;:
   ```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`&nbsp;:
   ```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&nbsp;:
   ```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&nbsp;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 = "<<YOUR_PUBLISHABLE_KEY>>"
        // 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&nbsp;:

- Spécifiez le montant à collecter et une devise prise en charge (`eur`, `dkk`, `sek` ou `nok`).
- Ajoutez `mobilepay` à 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 d’activer MobilePay dans les [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
- Définissez `payment_method_data[type]` sur `mobilepay` 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 "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=dkk \
  -d "payment_method_types[]=mobilepay" \
  -d "payment_method_data[type]=mobilepay" \
  --data-urlencode "return_url=payments-example://stripe-redirect"
```

Le PaymentIntent inclut une *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)). Envoyez la clé secrète du client au client 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 à 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.

#### 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]

Lorsque votre client appuie sur le bouton pour payer via MobilePay, 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 du client 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 à effectuer 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 renvoi

Le client peut quitter votre application pour s’authentifier (par exemple, dans Safari ou dans son application bancaire). Pour lui permettre de revenir automatiquement sur votre application après s’être authentifié, [configurez un schéma d’URL personnalisé](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) et configurez votre délégué d’application pour qu’il transmette l’URL au SDK. Stripe ne prend pas en charge les [liens universels](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content).

#### SceneDelegate

#### Swift

```swift
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (!stripeHandled) {
        // This was not a Stripe url – handle the URL normally as you would
    }
}

```

#### AppDelegate

#### 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
}
```

#### SwiftUI

#### Swift

```swift

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      Text("Hello, world!").onOpenURL { incomingURL in
          let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL)
          if (!stripeHandled) {
            // This was not a Stripe url – handle the URL normally as you would
          }
        }
    }
  }
}
```

### Confirmer le paiement

Utilisez la clé secrète du client du PaymentIntent de l’[étape 2](https://docs.stripe.com/payments/mobilepay/accept-a-payment.md#create-payment-intent) pour confirmer le PaymentIntent à l’aide de [STPPaymentHandler.shared.confirmPayment()](https://stripe.dev/stripe-ios/stripepayments/documentation/stripepayments/stppaymenthandler/confirmpayment\(_:with:completion:\)). Cela ouvre alors directement l’application MobilePay (le cas échéant) ou une vue web affichant la page d’accueil MobilePay. Une fois que le client a autorisé le paiement, le bloc de finalisation contient l’état du paiement.

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
paymentIntentParams.paymentMethodParams = STPPaymentMethodParams(
  mobilePay: STPPaymentMethodMobilePayParams(),
  billingDetails: nil,
  metadata: nil
)
paymentIntentParams.returnURL = "your-app://stripe-redirect" // Set returnURL to your app's return URL that you set up in the previous step

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()
    }
}
```

Votre client dispose de 5 minutes pour autoriser le paiement dans l’application MobilePay. Si le paiement par carte sous-jacent échoue, votre client peut choisir une autre carte et réessayer dans l’application MobilePay.

## 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

Créez un PaymentIntent à l’aide de vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes). 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 permettant de valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour simuler la réussite du paiement. L’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour simuler un échec d’authentification du client. L’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Annulation

Vous pouvez annuler les paiements MobilePay avant leur date d’expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement MobilePay.

## Échecs de paiement

Les transactions MobilePay 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&nbsp;minutes. Si aucune action n’est effectuée au bout de 5&nbsp;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 réseaux de carte standard dans le cadre d’une transaction MobilePay. Les [remboursements](https://docs.stripe.com/refunds.md) et [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard.


# 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/mobilepay/accept-a-payment?payment-ui=mobile&platform=android.

MobilePay est un wallet par carte [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé au Danemark et en Finlande. Il permet à votre client de s’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) des paiements à l’aide de l’application MobilePay.

Lorsque votre client paie avec MobilePay, Stripe effectue une transaction par carte en utilisant les données de carte que nous recevons de MobilePay. 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 recommande 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 MobilePay et d’autres moyens de paiement à votre intégration, avec un minimum d’effort.

Ce guide explique comment accepter MobilePay depuis votre application mobile native à l’aide de votre formulaire de paiement personnalisé. Votre application mobile native redirige votre client vers l’application mobile MobilePay pour effectuer le paiement. La finalisation de l’achat ne nécessite aucune action supplémentaire dans l’application mobile MobilePay.

## 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&nbsp;:

#### 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)&nbsp;:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.3.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.3.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`&nbsp;:

#### Kotlin

```kotlin
import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            "<<YOUR_PUBLISHABLE_KEY>>"
        )
    }
}
```

> 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&nbsp;:

- Spécifiez le montant à collecter et une devise prise en charge (`eur`, `dkk`, `sek` ou `nok`).
- Ajoutez `mobilepay` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). Assurez-vous d’activer MobilePay dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
- Définissez `payment_method_data[type]` sur `mobilepay` pour créer un *moyen de paiement* (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 "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=dkk \
  -d "payment_method_types[]=mobilepay" \
  -d "payment_method_data[type]=mobilepay"
```

Le PaymentIntent inclut une *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)). Envoyez la clé secrète du client au client 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 à 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.

#### 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]

Lorsque votre client appuie sur le bouton pour payer via MobilePay, 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 du client 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 à effectuer 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

Utilisez la clé secrète du client PaymentIntent de l’[étape 2](https://docs.stripe.com/payments/mobilepay/accept-a-payment.md#create-payment-intent) pour confirmer le PaymentIntent à l’aide de la méthode [confirm de PaymentLauncher](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Cela ouvre alors directement l’application MobilePay (le cas échéant) ou une vue web affichant la page d’accueil MobilePay. Une fois que le client a autorisé le paiement, `onPaymentResult` contient l’état du paiement.

#### Kotlin

```kotlin
class CheckoutActivity : AppCompatActivity() {
    // ...
    private lateinit var paymentIntentClientSecret: String
    private val paymentLauncher: PaymentLauncher by lazy {
        PaymentLauncher.create(
            this,
            PaymentConfiguration.getInstance(applicationContext).publishableKey,
            PaymentConfiguration.getInstance(applicationContext).stripeAccountId,
            ::onPaymentResult
        )
    }

    private fun startCheckout() {
        // ...

        val confirmParams = ConfirmPaymentIntentParams
            .createWithPaymentMethodCreateParams(
                paymentMethodCreateParams = PaymentMethodCreateParams.createMobilePay(),
                clientSecret = paymentIntentClientSecret
            )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        val message = when (paymentResult) {
            is PaymentResult.Completed -> {
                "Completed!"
            }
            is PaymentResult.Canceled -> {
                "Canceled!"
            }
            is PaymentResult.Failed -> {
                // This string comes from the PaymentIntent's error message.
                // See: https://docs.stripe.com/api/payment_intents/object#payment_intent_object-last_payment_error-message
                "Failed: " + paymentResult.throwable.message
            }
        }
    }
}
```

Votre client dispose de 5 minutes pour autoriser le paiement dans l’application MobilePay. Si le paiement par carte sous-jacent échoue, votre client peut choisir une autre carte et réessayer dans l’application MobilePay.

## 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

Créez un PaymentIntent à l’aide de vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes). 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 permettant de valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour simuler la réussite du paiement. L’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour simuler un échec d’authentification du client. L’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Annulation

Vous pouvez annuler les paiements MobilePay avant leur date d’expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement MobilePay.

## Échecs de paiement

Les transactions MobilePay 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&nbsp;minutes. Si aucune action n’est effectuée au bout de 5&nbsp;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 réseaux de carte standard dans le cadre d’une transaction MobilePay. Les [remboursements](https://docs.stripe.com/refunds.md) et [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard.


# 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/mobilepay/accept-a-payment?payment-ui=mobile&platform=react-native.

MobilePay est un wallet par carte [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) utilisé au Danemark et en Finlande. Il permet à votre client de s’[authentifier et d’approuver](https://docs.stripe.com/payments/payment-methods.md#customer-actions) des paiements à l’aide de l’application MobilePay.

Lorsque votre client paie avec MobilePay, Stripe effectue une transaction par carte en utilisant les données de carte que nous recevons de MobilePay. 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 recommande d’utiliser le composant [Element Mobile Payment](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=react-native), un formulaire de paiement intégrable, pour ajouter MobilePay et d’autres moyens de paiement à votre intégration, avec le minimum d’effort.

Ce guide explique comment accepter MobilePay à partir de votre application mobile native à l’aide de votre propre formulaire de paiement personnalisé. Votre application mobile native redirige votre client vers une vue Web pour effectuer le paiement sur MobilePay.

## Configurer Stripe [Côté serveur] [Côté client]

Dans un premier temps, vous devez créer un compte Stripe. [S’inscrire 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&nbsp;:

#### 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)&nbsp;:

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

Ensuite, installez les autres dépendances nécessaires&nbsp;:

- 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&nbsp;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 (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> 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&nbsp;:

- Spécifiez le montant à collecter et une devise prise en charge (`eur`, `dkk`, `sek` ou `nok`).
- Ajoutez `mobilepay` à la liste des [types de moyens de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). Assurez-vous d’activer MobilePay dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=dkk \
  -d "payment_method_types[]=mobilepay" \
  --data-urlencode "return_url=payments-example://stripe-redirect"
```

Le PaymentIntent inclut une *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)). Envoyez la clé secrète du client au client 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 à 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&nbsp;:

```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: 'dkk',
      }),
    });
    const {clientSecret} = await response.json();

    return clientSecret;
  };

  const handlePayPress = async () => {
    // See below
  };

  return (
    <View>
      <Button onPress={handlePayPress} title="Pay" />
    </View>
  );
}
```

La clé secrète du client 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 à mener à bien 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 renvoi (iOS uniquement) [Côté client]

Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement *nécessitent* une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés.

Pour fournir une URL de redirection&nbsp;:

1. [Enregistrez](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) une URL personnalisée. Les liens universels ne sont pas pris en charge.
1. [Configurez](https://reactnative.dev/docs/linking) votre URL personnalisée.
1. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous.

> Si vous utilisez Expo, [définissez votre schéma](https://docs.expo.io/guides/linking/#in-a-standalone-app) dans le fichier `app.json`.

```jsx
import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}
```

Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation [Android](https://developer.android.com/training/app-links/deep-linking) et [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app).

## Confirmer le paiement MobilePay [Côté client]

Lorsque votre client presse le bouton de paiement avec MobilePay, appelez [confirmPayment](https://stripe.dev/stripe-react-native/api-reference/index.html#confirmPayment). Une vue web s’affiche pour permettre au client d’autoriser le paiement dans l’application MobilePay. Une fois que le client a autorisé le paiement, la promesse aboutit avec un objet contenant soit un champ `paymentIntent`, soit un champ `error` si le paiement a généré une erreur.

```javascript
import {useConfirmPayment} from '@stripe/stripe-react-native';

function PaymentScreen() {
  const {confirmPayment, loading} = useConfirmPayment();

  const fetchPaymentIntentClientSecret = async () => {
    // See above
  };

  const handlePayPress = async () => {
    // Fetch the client secret from the backend.
    const clientSecret = await fetchPaymentIntentClientSecret();

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'MobilePay',
    });

    if (error) {
      console.log('Payment confirmation error: ', error);
    } else if (paymentIntent) {
      console.log('Successfully confirmed payment: ', paymentIntent);
    }
  };

  return (
    <View>
      <Button onPress={handlePayPress} title="Pay" disabled={loading} />
    </View>
  );
}
```

Votre client dispose de 5 minutes pour autoriser le paiement dans l’application MobilePay. Si le paiement par carte sous-jacent échoue, votre client peut choisir une autre carte et réessayer dans l’application MobilePay.

## 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

Créez un PaymentIntent à l’aide de vos [clés API de test](https://docs.stripe.com/keys.md#test-live-modes). 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 permettant de valider ou non le paiement.

- Cliquez sur **Autorisation du paiement test** pour simuler la réussite du paiement. L’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe de `requires_action` à `succeeded`.
- Cliquez sur **Échec du paiement test** pour simuler un échec d’authentification du client. L’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe de `requires_action` à `requires_payment_method`.

## Optional: Annulation

Vous pouvez annuler les paiements MobilePay avant leur date d’expiration en [annulant le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associé au paiement MobilePay.

## Échecs de paiement

Les transactions MobilePay 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&nbsp;minutes. Si aucune action n’est effectuée au bout de 5&nbsp;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 réseaux de carte standard dans le cadre d’une transaction MobilePay. Les [remboursements](https://docs.stripe.com/refunds.md) et [litiges](https://docs.stripe.com/disputes/how-disputes-work.md) sont soumis aux règles des réseaux Visa et Mastercard.