# Accepter des paiements avec Kriya

Découvrez comment configurer votre intégration avec Kriya.

# Checkout

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

> Stripe propose automatiquement à vos clients de moyens de paiement selon leur devise, les restrictions sur les moyens de paiement et d’autres paramètres. Nous vous recommandons de configurer vos moyens de paiement à partir du Dashboard Stripe en suivant les instructions indiquées sur la page [Accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted).
> 
> Si vous souhaitez continuer à configurer manuellement les moyens de paiement proposés à vos clients avec Checkout, utilisez ce guide. Sinon, mettez à jour votre intégration pour [configurer les moyens de paiement dans le Dashboard](https://docs.stripe.com/payments/dashboard-payment-methods.md).

Kriya est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui offre aux entreprises des modalités de paiement flexibles leur permettant aux entreprises d’acheter ce dont elles ont besoin avec paiement différé.

## Déterminer la compatibilité

**Lieux d’implantation pris en charge** : UK

**Devises prises en charge** : `gbp`

**Devises de règlement** : `gbp`

**Mode de paiement** : Yes

**Mode de configuration** : No

**Mode d’abonnement** : No

Pour prendre en charge les paiements Kriya, une session Checkout doit remplir toutes les conditions suivantes :

- Les *tarifs* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) de tous les postes doivent être exprimés dans la même devise.
- Si vous avez des postes de facture dans différentes devises, créez une session Checkout par devise.

## Accepter un paiement

> Avant d’utiliser ce guide, commencez par créer une intégration permettant d’[accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) avec Checkout.

Ce guide décrit comment activer Kriya et vous montre les différences entre l’acceptation d’un paiement par carte bancaire et l’utilisation de Kriya.

### Activer Kriya en tant que moyen de paiement

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

1. Ajoutez `kriya` à la liste des `payment_method_types`.
1. Assurez-vous que tous les `line_items` sont exprimés dans la même devise.

#### Ruby

```ruby
Stripe::Checkout::Session.create({
  mode: 'payment',payment_method_types: ['card', 'kriya'],
  line_items: [{
    price_data: {# To accept `kriya`, all line items must have currency:gbpcurrency: 'gbp',
      product_data: {
        name: 'T-shirt'
      },
      unit_amount: 1000
    },
    quantity: 1
  }],
  success_url: 'https://example.com/success'
})
```

### Traiter vos commandes

Maintenant que vous savez accepter des paiements, découvrez comment [traiter les commandes](https://docs.stripe.com/checkout/fulfillment.md).

## Tester votre intégration

Lors du test de votre intégration Checkout, sélectionnez Kriya comme moyen de paiement, puis cliquez sur le bouton **Payer**.
![](https://b.stripecdn.com/docs-statics-srv/assets/merchant_checkout_kriya_visible.d2a7f99718fcee14666ea86c0c94af33.png)

## See also

- [En savoir plus sur Kriya](https://docs.stripe.com/payments/kriya.md)
- [Exécution Checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personnalisation de Checkout](https://docs.stripe.com/payments/checkout/customization.md)


# API Checkout Sessions

> This is a API Checkout Sessions for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/kriya/accept-a-payment?payment-ui=elements&api-integration=checkout.

Pour déterminer quelle API répond aux besoins de votre entreprise, consultez la section[guide de comparaison](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Utilisez le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application et proposer des moyens de paiement à vos clients. 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).

## Déterminer la compatibilité

**Lieux d’implantation pris en charge** : UK

**Devises prises en charge** : `gbp`

**Devises de règlement** : `gbp`

**Mode de paiement** : Yes

**Mode de configuration** : No

**Mode d’abonnement** : No

Pour prendre en charge les paiements Kriya, une session Checkout doit remplir toutes les conditions suivantes :

- Les *tarifs* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) de tous les postes doivent être exprimés dans la même devise.
- Si vous avez des postes de facture dans différentes devises, créez une session Checkout par devise.

## Configurer le serveur [Côté serveur]

Utilisez les bibliothèques officielles de Stripe pour accéder à l’API depuis votre application.

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Créer une session Checkout [Côté serveur]

Ajoutez à votre serveur un endpoint qui crée un objet [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) et renvoie la [clé secrète du client](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) à votre front-end. Une session Checkout représente la session d’un client qui paie des achats ponctuels ou des abonnements. Les sessions Checkout expirent 24 heures après leur création.

Nous recommandons d’utiliser des [méthodes de paiement dynamiques](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) pour afficher automatiquement les moyens de paiement les plus pertinents à chaque client, afin d’optimiser le taux de conversion. Vous pouvez également [lister manuellement les méthodes de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), ce qui désactive les options dynamiques.

#### Gérer les moyens de paiement dans le Dashboard

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

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

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    payment_method_types: ['kriya'],
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

## Configurer le front-end [Côté client]

#### HTML + 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 un lot ni en héberger de copie.

Assurez-vous d’être sur la dernière version de Stripe.js en incluant la balise de script suivante `<script src=“https://js.stripe.com/clover/stripe.js”></script>`. En savoir plus sur[Stripe.js versioning](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe propose un paquet npm que vous pouvez utiliser pour charger Stripe.js en tant que module. Consultez le [projet sur GitHub](https://github.com/stripe/stripe-js). La version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) ou une version ultérieure est requise.

Initialiser stripe.js

```js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

#### React

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. Vous avez besoin d’au moins la version&nbsp;5.0.0 pour React Stripe.js et la version&nbsp;8.0.0 pour le chargeur Stripe.js.

```bash
npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0
```

Initialisez une instance `stripe` sur votre front-end avec votre clé publique.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Initialiser Checkout [Côté client]

#### HTML + JS

Créez soit une promesse `clientSecret` qui se résout avec la clé secrète du client, soit définissez directement le clientSecret. Appelez [initCheckout](https://docs.stripe.com/js/custom_checkout/init) en transmettant `clientSecret`. `initCheckout` renvoie une instance [Checkout](https://docs.stripe.com/js/custom_checkout).

L’objet [paiement](https://docs.stripe.com/js/custom_checkout) constitue la base de votre page de paiement et contient les données de la Session Checkout ainsi que les méthodes permettant de mettre la Session à jour.

L’objet renvoyé par [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) contient vos informations tarifaires. Nous vous recommandons de lire et d’afficher le `total` et les `lineItems` de la session dans votre interface utilisateur.

Cela vous permet d’activer de nouvelles fonctionnalités avec un minimum de modifications du code. Par exemple, l’ajout de [prix manuels des devises](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) ne nécessite aucune modification de l’interface utilisateur si vous affichez le `total`.

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

```html
<div id="checkout-container"></div>
```

#### React

Créez `clientSecret` en tant que `Promise<string> | string` contenant le secret client renvoyé par votre serveur.

Encapsulez votre application avec le composant [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), en passant `clientSecret` et l’instance `stripe`.

Utilisez le hook [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) dans vos composants pour obtenir l’objet [Checkout](https://docs.stripe.com/js/custom_checkout), qui contient les données de la Session Checkout et les méthodes pour la mettre à jour.

Utilisez l’objet `Checkout` comme conteneur pour vos tarifs. Nous vous recommandons de lire et d’afficher les attributs `total` et `lineItems` de l’objet `Checkout` dans votre interface utilisateur.

Cela vous permet d’activer des fonctionnalités avec un minimum de modifications du code. Par exemple, l’ajout de [prix manuels des devises](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) ne nécessite aucune modification de l’interface utilisateur si vous affichez le `total`.

```jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);

const App = () => {
  return (
    <CheckoutProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
```

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

const CheckoutForm = () => {const checkoutState = useCheckout();
  switch (checkoutState.type) {
    case "loading": return <div>Loading ...</div>;
    case "error": return <div>Error: {checkoutState.error.message}</div>;
    case "success":
      return (
        <pre>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
          // A formatted total amount
          Total: {checkoutState.checkout.total.total.amount}
        </pre>
      );
  }
};
```

## Collecter les adresses e-mail des clients [Côté client]

#### HTML + JS

Si vous transmettez déjà un [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ou un [Customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) existant avec une adresse e-mail valide définie lors de la création de la session Checkout, vous pouvez ignorer cette étape.

Si vous implémentez votre propre validation d’adresse e-mail, vous pouvez transmettre l’adresse e-mail validée sur [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) et ignorer cette étape.

Créez un champ de saisie de l’adresse pour collecter l’adresse e-mail de votre client. Appelez [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) lorsque votre client finalise la saisie pour valider et enregistrer l’adresse e-mail.

En fonction de la conception de votre formulaire de paiement, vous pouvez appeler `updateEmail` de l’une des manières suivantes&nbsp;:

- Directement avant [l’envoi du paiement](https://docs.stripe.com/payments/kriya/accept-a-payment.md#submit-payment). Vous pouvez également appeler `updateEmail` pour valider plus tôt, par exemple lorsque le focus est retiré de la saisie.
- Avant de passer à l’étape suivante, par exemple en cliquant sur un bouton **Enregistrer**, si votre formulaire comprend plusieurs étapes.

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

```javascript
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Si vous transmettez déjà un [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ou un [Customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) existant avec une adresse e-mail valide définie lors de la création de la session Checkout, vous pouvez ignorer cette étape.

Si vous implémentez votre propre validation d’e-mail, vous pouvez transmettre l’e-mail validé lors de la [confirmation](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) et ignorer cette étape.

Créez un composant pour collecter l’adresse e-mail de votre client. Appelez [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) lorsque votre client finalise la saisie pour valider et enregistrer l’adresse e-mail.

En fonction de la conception de votre formulaire de paiement, vous pouvez appeler `updateEmail` de l’une des manières suivantes&nbsp;:

- Directement avant [l’envoi du paiement](https://docs.stripe.com/payments/kriya/accept-a-payment.md#submit-payment). Vous pouvez également appeler `updateEmail` pour valider plus tôt, par exemple lorsque le focus est retiré de la saisie.
- Avant de passer à l’étape suivante, par exemple en cliquant sur un bouton **Enregistrer**, si votre formulaire comprend plusieurs étapes.

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

const EmailInput = () => {
  const checkoutState = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);
  
  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };
  
  return (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

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

#### HTML + JS

Tout d’abord, créez un élément DOM de conteneur pour monter le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md). Créez ensuite une instance du `Payment Element` à l’aide de [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) et montez-la en appelant [element.mount](https://docs.stripe.com/js/element/mount) et en fournissant soit un sélecteur CSS, soit l’élément DOM du conteneur.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Consultez la [documentation Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) pour connaître les options prises en charge.

Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) de tous les Elements en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) lors de l’initialisation de Checkout sur le front-end.

#### React

Montez le composant [Element Payment](https://docs.stripe.com/payments/payment-element.md) dans le [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

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

const CheckoutForm = () => {
  const checkoutState = useCheckout();
  return (
    <form>
      <PaymentElement options={{layout: 'accordion'}}/>
    </form>
  )
};

export default CheckoutForm;
```

Consultez la [documentation Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) pour connaître les options prises en charge.

Vous pouvez [personnaliser l’apparence](https://docs.stripe.com/payments/checkout/customization/appearance.md) d’Elements dans son entièreté en transmettant [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) au [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Envoyer le paiement [Côté client]

#### HTML + JS

Affichez un bouton **Payer** qui appelle [confirm](https://docs.stripe.com/js/custom_checkout/confirm) depuis l’instance `Checkout` pour soumettre le paiement.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckout({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Affichez un bouton **Payer** qui appelle [confirm](https://docs.stripe.com/js/custom_checkout/confirm) depuis [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) pour soumettre le paiement.

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

const PayButton = () => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const handleClick = () => {
    setLoading(true);
    checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Tester votre intégration

Pour tester votre intégration, choisissez le moyen de paiement et appuyez sur **Payer**. Dans un *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), cela vous redirige vers une page de paiement de test, dans laquelle vous pouvez autoriser ou refuser le paiement.

En mode production, le fait d’appuyer sur **Payer** vous redirige vers le site Web de Kriya. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec Kriya.


# l’API Payment Intents

> This is a l’API Payment Intents for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/kriya/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

Utilisez le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour intégrer un formulaire de paiement Stripe personnalisé sur votre site Web ou application et proposer des moyens de paiement à vos clients. 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]

Pour commencer, [créez un compte Stripe](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'
```

## Collecter les informations de paiement [Côté client]

Vous êtes prêt à recueillir les informations de paiement de votre client à l’aide du composant Element Payment, un composant préconfiguré de l’interface utilisateur qui simplifie cette collecte pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

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 Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant au `head` votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme aux normes PCI. N’incluez pas le script dans un lot et n’en hébergez pas de copie.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/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 composant Payment&nbsp;Element à votre page de paiement

Le Payment Element doit avoir un emplacement sur votre page de paiement. Créez un nœud DOM (conteneur) vide avec 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>
```

#### Contrôler les moyens de paiement dans le Dashboard

Une fois le formulaire ci-dessus chargé, créez une instance Elements avec les paramètres `mode`, `amount` et `currency`. Ces valeurs déterminent les moyens de paiement présentés à votre client. Pour proposer un nouveau moyen de paiement dans votre formulaire, veillez à l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```javascript
const options = {mode:'payment',
  amount:1000,
  currency: 'gbp',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

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

Pour lister manuellement les moyens de paiement que vous souhaitez proposer, ajoutez chacun d’eux à `paymentMethodTypes`.

Ensuite, créez une instance de l’Element Payment et montez-la sur le nœud DOM conteneur.

```javascript
const options = {mode:'payment',
  amount:1000,
  currency: 'gbp',
  paymentMethodTypes: ['kriya'],
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### React

### Configurer Stripe.js

Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Ajouter et configurer le fournisseur Elements sur votre page de paiement

Pour utiliser le composant Payment&nbsp;Element, incluez 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 et transmettez le paramètre `Promise` renvoyé au fournisseur `Elements`.

#### Contrôler les moyens de paiement dans le Dashboard

Le fournisseur `Elements` accepte également les paramètres `mode`, `amount` et `currency`. Ces valeurs déterminent les moyens de paiement présentés à votre client. Pour proposer un nouveau moyen de paiement dans votre formulaire, veillez à l’activer dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```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 = {mode:'payment',
    amount:1000,
    currency: 'gbp',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

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

```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 = {mode:'payment',
    amount:1000,
    currency: 'gbp',
    paymentMethodTypes: ['kriya'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Ajouter le composant Payment Element

Utilisez le composant `PaymentElement` pour créer votre formulaire.

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

const CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Vous pouvez personnaliser le Payment&nbsp;Element pour l’adapter au design de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/elements/appearance-api.md) dans les `options` lors de la création du fournisseur `Elements`.

### Collecter les adresses

Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez&nbsp;:

- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.

## Créer un PaymentIntent [Côté serveur]

> #### Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement
> 
> Accédez à l’[étape&nbsp;5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) du guide «&nbsp;Finaliser&nbsp;» les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise `stripe.confirmPayment` au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.

#### Contrôler les moyens de paiement dans le Dashboard

Lorsque le client envoie votre formulaire de paiement, utilisez un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur avec les paramètres `amount` et `currency`. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

L’objet PaymentIntent contient 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)). Renvoyez cette valeur côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1000,
    currency: 'gbp',
  })
  {client_secret: intent.client_secret}.to_json
end
```

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

Lorsque le client envoie votre formulaire de paiement, utilisez un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) pour faciliter le processus de confirmation et de paiement. Créez un PaymentIntent sur votre serveur avec un `amount`, une `currency` et un ou plusieurs moyens de paiement à l’aide de `payment_method_types`. Pour éviter que des clients malveillants ne puissent définir eux-mêmes leurs tarifs, fixez systématiquement le montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

L’objet PaymentIntent contient 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)). Renvoyez cette valeur côté client afin que Stripe.js l’utilise pour finaliser le processus de paiement en toute sécurité.

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1000,
    currency: 'gbp',
    payment_method_types: ['kriya'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## Envoyer le paiement à Stripe [Côté client]

Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour finaliser 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 à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL `return_url`. Une fois le paiement par carte abouti, l’utilisateur est immédiatement redirigé vers l’URL `return_url`.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez définir le paramètre [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) sur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

#### HTML + JS

```javascript

const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

```

#### React

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

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } else {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}
```

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

## Optional: Autorisation et capture distinctes

Vous pouvez séparer l’autorisation de la capture pour créer un paiement maintenant, mais capturer les fonds ultérieurement. Stripe annule le PaymentIntent et envoie un événement [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) si le paiement n’est pas capturé dans un délai de 7&nbsp;jours.

Si vous avez la certitude de ne pas pouvoir capturer le paiement, nous vous recommandons d’[annuler le PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) plutôt que d’attendre la fin de la période de 7&nbsp;jours.

### Indiquer à Stripe d’autoriser uniquement

Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez [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 sur le compte Kriya du client.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d confirm=true \
  -d currency=gbp \
  -d "payment_method_types[]"=kriya \
  -d "payment_method_data[type]"=kriya \
  -d capture_method=manual \
  --data-urlencode return_url="https://www.example.com/checkout/done"
```

### Capturer les fonds

Une fois l’autorisation réussie, l’[état du PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) passe à `requires_capture`. Pour capturer les fonds autorisés, faites une demande de [capture](https://docs.stripe.com/api/payment_intents/capture.md) du PaymentIntent.

```curl
curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \
  -u "<<YOUR_SECRET_KEY>>:"
```

Par défaut, Stripe capture le montant total autorisé. Vous pouvez également spécifier un montant `amount_to_capture` inférieur ou égal au total.

### (Facultatif) Annuler l’autorisation

Si vous devez annuler une autorisation, vous pouvez [annuler le PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md).

## Tester votre intégration

Pour tester votre intégration, choisissez le moyen de paiement et appuyez sur **Payer**. Dans un *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), cela vous redirige vers une page de paiement de test, dans laquelle vous pouvez autoriser ou refuser le paiement.

En mode production, le fait d’appuyer sur **Payer** vous redirige vers le site Web de Kriya. Vous n’avez pas la possibilité d’autoriser ou de refuser le paiement avec Kriya.

## Codes d’erreur

Le tableau suivant détaille les codes d’erreur courants et les actions recommandées&nbsp;:

| Code d’erreur                                             | Action recommandée                                                                                                                                                                                                                                                                                                                                                                                                                |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Spécifiez une devise prise en charge.                                                                                                                                                                                                                                                                                                                                                                                             |
| `missing_required_parameter`                              | Consultez le message d’erreur pour en savoir plus sur le paramètre requis.                                                                                                                                                                                                                                                                                                                                                        |
| `payment_intent_payment_attempt_failed`                   | Ce code peut apparaître dans le champ [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) d’un PaymentIntent. Consultez le message d’erreur pour connaître la raison détaillée de l’échec et obtenir une suggestion de traitement de l’erreur.                                                                                                         |
| `payment_intent_authentication_failure`                   | Ce code peut apparaître dans le champ [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) d’un PaymentIntent. Consultez le message d’erreur pour connaître le motif détaillé de l’échec et obtenir une suggestion sur la gestion de l’erreur. Cette erreur se produit lorsque vous déclenchez manuellement un échec lors du test de votre intégration. |
| `payment_intent_redirect_confirmation_without_return_url` | Précisez une `return_url` lors de la confirmation d’un PaymentIntent.                                                                                                                                                                                                                                                                                                                                                             |


# API directe

> This is a API directe for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/kriya/accept-a-payment?payment-ui=direct-api.

Kriya est un moyen de paiement [à usage unique](https://docs.stripe.com/payments/payment-methods.md#usage) qui offre aux entreprises des modalités de paiement flexibles leur permettant aux entreprises d’acheter ce dont elles ont besoin avec paiement différé.

## Configurer Stripe [Côté serveur]

Pour commencer, [créez un compte Stripe](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. Créez un `PaymentIntent` sur votre serveur et spécifiez le montant à encaisser ainsi qu’une devise prise en charge. Si vous avez déjà une intégration [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), ajoutez `kriya` à 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 "payment_method_types[]"=kriya \
  -d amount=1000 \
  -d currency=gbp
```

Le `PaymentIntent` contient 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)). Au lieu de transmettre la totalité de l’objet `PaymentIntent`, envoyez la clé secrète vers votre client pour finaliser le processus de paiement en toute sécurité.

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

## Redirection vers Kriya [Côté client]

Lorsqu’un client clique pour payer avec Kriya, utilisez Stripe.js pour soumettre le paiement à Stripe. [Stripe.js](https://docs.stripe.com/payments/elements.md) est la bibliothèque JavaScript qui permet de créer des tunnels de paiement. Elle gère automatiquement les opérations complexes telles que la redirection décrite ci-dessous, et vous permet d’ajouter d’autres moyens de paiement à votre intégration. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML.

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

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

```javascript
// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

Utilisez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) du `PaymentIntent` et appelez `stripe.confirmPayment` pour gérer la redirection Kriya. Ajoutez un `return_url` pour indiquer où Stripe redirige le client une fois qu’il a effectué le paiement.

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async function(event) {
  event.preventDefault();

  // Set the clientSecret of the PaymentIntent
  const { error } = await stripe.confirmPayment({
    clientSecret: clientSecret,
    confirmParams: {
      payment_method_data: {
        type: 'kriya',
      },
      // Return URL where the customer should be redirected after the authorization
      return_url: `${window.location.href}`,
    },
  });

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('error-message');
    errorElement.textContent = result.error.message;
  }
});
```

L’URL `return_url` correspond à une page de votre site Web qui affiche le résultat du paiement. Pour déterminer l’information à afficher, vous pouvez [vérifier l’état](https://docs.stripe.com/payments/payment-intents/verifying-status.md#checking-status) du `PaymentIntent`. Pour ce faire, la redirection de Stripe vers la page `return_url` inclut les paramètres de requête d’URL suivants. Vous pouvez également ajouter vos propres paramètres de requête à la `return_url`. Ils seront conservés pendant tout le processus de redirection.

| Paramètre                      | Description                                                                                                                                       |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | L’identifiant unique du `PaymentIntent`.                                                                                                          |
| `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. |

## Optional: Gérer la redirection manuellement [Côté serveur]

Le meilleur moyen de gérer les redirections est d’utiliser Stripe.js avec `confirmPayment`. Si vous devez rediriger manuellement vos clients&nbsp;:

1. Indiquez l’URL vers laquelle vos clients seront redirigés une fois leur paiement terminé.

```curl
curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \
  --data-urlencode return_url="https://shop.example.com/crtA6B28E1"
```

1. Vérifiez que l’état du `PaymentIntent` est bien `requires_action`. Le type de `next_action` sera `redirect_to_url`.

```json
"next_action": {
  "type": "redirect_to_url",
  "redirect_to_url": {
    "url": "https://hooks.stripe.com/...",
    "return_url": "https://example.com/checkout/complete"
  }
}
```

1. Redirigez le client vers l’URL indiquée dans la propriété `next_action`.

À l’issue du processus de paiement, le client est redirigé vers la destination `return_url`. Les paramètres de requête d’URL `payment_intent` et `payment_intent_client_secret` sont inclus et vous pouvez par ailleurs transmettre vos propres paramètres de requête, comme indiqué plus haut.

## Optional: Gérer les événements post-paiement

Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. Utilisez le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).

- **Gérer les événements manuellement dans le Dashboard**

  Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.

- **Créer un webhook personnalisé**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Intégrer une application prédéfinie**

  Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.

Vous pouvez créer des paiements Kriya dans les devises correspondant à votre pays. La devise locale par défaut pour Kriya est `gbp`.

- gbp: GB

## Codes d’erreur

Le tableau suivant détaille les codes d’erreur courants et les actions recommandées&nbsp;:

| Code d’erreur                                             | Action recommandée                                                                                                                                                                                                                                                                                                                                                                                                                |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Spécifiez une devise prise en charge.                                                                                                                                                                                                                                                                                                                                                                                             |
| `missing_required_parameter`                              | Consultez le message d’erreur pour en savoir plus sur le paramètre requis.                                                                                                                                                                                                                                                                                                                                                        |
| `payment_intent_payment_attempt_failed`                   | Ce code peut apparaître dans le champ [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) d’un PaymentIntent. Consultez le message d’erreur pour connaître la raison détaillée de l’échec et obtenir une suggestion de traitement de l’erreur.                                                                                                         |
| `payment_intent_authentication_failure`                   | Ce code peut apparaître dans le champ [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) d’un PaymentIntent. Consultez le message d’erreur pour connaître le motif détaillé de l’échec et obtenir une suggestion sur la gestion de l’erreur. Cette erreur se produit lorsque vous déclenchez manuellement un échec lors du test de votre intégration. |
| `payment_intent_redirect_confirmation_without_return_url` | Précisez une `return_url` lors de la confirmation d’un PaymentIntent.                                                                                                                                                                                                                                                                                                                                                             |