# Mise à jour de initCheckout pour qu'il soit synchrone

## Nouveautés

La méthode [stripe.initCheckout](https://docs.stripe.com/js/custom_checkout/init) est désormais synchrone au lieu d’être asynchrone.

## Pourquoi s’agit-il d’une modification majeure ?

Ce changement majeur vous concerne si votre intégration utilise[Elements avec l’API Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

#### HTML + JS

Pour migrer, vous devez :

1. Supprimez tous les appels `await` ou `.then()` associés à `initCheckout`.
1. Remplacez votre fonction `fetchClientSecret` par une chaîne clé secrète du client ou une Promise qui aboutit à une chaîne clé secrète du client.
1. Appelez la nouvelle fonction asynchrone `checkout.loadActions()` sur commande pour accéder à des actions telles que `getSession()`, qui remplace `session()`, ou `confirm()`. Vous n’avez besoin d’appeler `loadActions()` qu’une seule fois.
1. Si vous avez précédemment intégré `initCheckout` dans un bloc `try...catch`, vous devez plutôt examiner la valeur `type` résolue de `loadActions()` pour vérifier des erreurs.

```javascript
const clientSecret = fetch("/create-checkout-session", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
})
  .then((r) => r.json())
  .then((r) => r.clientSecret);
const checkout = stripe.initCheckout({
  clientSecret
});
const paymentElement = checkout.createPaymentElement();
paymentElement.mount("#payment-element");
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
}
```

#### React

Mettre à niveau votre dépendance `@stripe/react-stripe-js` vers la version 5.0.0 minimum. Si vous effectuez une mise à jour à partir d’une version antérieure à la version 4.0.0, assurez-vous de lire les [notes de version](https://github.com/stripe/react-stripe-js/releases/tag/v4.0.0) pour voir ce qui a changé.

Si vous effectuez une mise à niveau à partir de la version 4.0.0 ou ultérieure, vous devez remplacer votre fonction `fetchClientSecret` par une chaîne clé secrète du client ou une Promise qui se résout en une chaîne clé secrète du client. Vous pouvez également afficher n’importe quel composant Element sans vérifier au préalable si `useCheckout` a renvoyé le `type: 'success'`, afin de réduire la latence dans votre intégration et permettre à Elements d’afficher leurs chargeurs de squelette plus tôt.

```jsx
const App = () => {
  const promise = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  return (
    <CheckoutProvider 
      stripe={stripePromise}
      options={{clientSecret: promise
      }}
    >
      <CheckoutPage />
    </CheckoutProvider>
  );
}

const CheckoutPage = () => {
  const {type, ...rest} = useCheckout();

  return (
    <div><PaymentElement />
    </div>
  );
}
```

## Impact

La nature synchrone d’`initCheckout` vous permet de monter Elements plus tôt, ce qui réduit la latence de rendu de tous les Elements que vous montez immédiatement après `initCheckout`. Cela permet également à Elements d’afficher l’interface utilisateur du chargeur de squelette après son montage, mais avant que l’état de la session ne soit entièrement chargé.

## Modifications connexes

- [Supprime le code postal pour les paiements par carte dans certaines régions sur Checkout et Payment Element](https://docs.stripe.com/changelog/clover/2025-09-30/postal_code_in_card_form_for_non_us_countries.md)
- [Supprime le champ de conversion de devises des Sessions Checkout ](https://docs.stripe.com/changelog/clover/2025-09-30/remove-checkout-session-currency-conversion-field.md)
- [Supprime la prise en charge de la méthode redirectToCheckout](https://docs.stripe.com/changelog/clover/2025-09-30/remove-redirect-to-checkout.md)
- [Ajoute la prise en charge de la collecte des noms d’entreprises et de particuliers dans les Sessions Checkout](https://docs.stripe.com/changelog/clover/2025-09-30/checkout-name-collection.md)
- [Ajoute la possibilité d’exclure des moyens de paiement des Sessions Checkout et Payment Intents](https://docs.stripe.com/changelog/clover/2025-09-30/exclude-payment-methods-checkout-sessions.md)
- [Ajoute la prise en charge de la définition de la méthode de capture pour des moyens de paiement individuels avec l’API Checkout Sessions](https://docs.stripe.com/changelog/clover/2025-09-30/checkout-capture-method-per-payment-method.md)
- [Ajoute la prise en charge de la configuration des paramètres d’adaptation à votre marque pour les Sessions Checkout](https://docs.stripe.com/changelog/clover/2025-09-30/checkout-sessions-branding-settings.md)
- [Permet de spécifier des unités de mesure pour les produits](https://docs.stripe.com/changelog/clover/2025-09-30/product-data-unit-label.md)