# initCheckout が同期的になるように更新

## 新機能

[stripe.initCheckout](https://docs.stripe.com/js/custom_checkout/init) メソッドが非同期ではなく同期になりました。

## この変更により互換性が失われる理由

[Elements と Checkout Sessions API](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) を導入している場合、この変更は影響します。

#### HTML + JS

移行に必要なこと：

1. `initCheckout`に関連する`await` または`.then()`の呼び出しをすべて削除します。
1. `fetchClientSecret` 関数を、Client Secret 文字列または Client Secret 文字列を解決する Promise で置き換えてください。
1. `getSession()`(`session()` を置き換える)や`confirm()`などのアクションにアクセスするために、新しい非同期関数`checkout.loadActions()`を呼び出してください。`loadActions()` を一度だけ呼び出す必要があります。
1. 以前に`initCheckout` を`try...catch` ブロックでラップした場合は、代わりに`loadActions()` の解決された`type` の値を調べてエラーをチェックする必要があります。

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

`@stripe/react-stripe-js`依存関係を少なくともバージョン5.0.0にアップグレードしてください。4.0.0 以前のバージョンからアップグレードする場合は、[リリースノート](https://github.com/stripe/react-stripe-js/releases/tag/v4.0.0)を読んで変更点を確認してください。

バージョン 4.0.0 以降からアップグレードする場合は、`fetchClientSecret`関数を Client Secret 文字列または Client Secret 文字列に解決する Promise に置き換える必要があります。また、`useCheckout`が`type: 'success'`を返したかどうかを最初に確認せずに、任意の Elements をレンダリングすることで、導入する際の待ち時間を短縮し、Elements がスケルトンローダーをより早く表示できるようになります。

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

## 影響

`initCheckout`の同期性により、Elements を早めにマウントできるため、`initCheckout`の直後にマウントする Elements のレンダリング遅延が短縮されます。また、Elements はマウント後、セッション状態がまだ完全に読み込まれていない状態でも、スケルトンローダー UI を表示できるようになります。

## 関連する変更

- [Checkout と Payment Element で、特定の地域のカード決済における郵便番号の収集を削除](https://docs.stripe.com/changelog/clover/2025-09-30/postal_code_in_card_form_for_non_us_countries.md)
- [Checkout Session から通貨換算フィールドを削除](https://docs.stripe.com/changelog/clover/2025-09-30/remove-checkout-session-currency-conversion-field.md)
- [redirectToCheckout メソッドのサポートを削除](https://docs.stripe.com/changelog/clover/2025-09-30/remove-redirect-to-checkout.md)
- [Checkout Sessions で法人と個人名を収集するためのサポートを追加](https://docs.stripe.com/changelog/clover/2025-09-30/checkout-name-collection.md)
- [Checkout Sessions と Payment Intents から決済手段を除外する機能を追加](https://docs.stripe.com/changelog/clover/2025-09-30/exclude-payment-methods-checkout-sessions.md)
- [Checkout Sessions API を使用した個々の決済手段のキャプチャー方法の設定に対応](https://docs.stripe.com/changelog/clover/2025-09-30/checkout-capture-method-per-payment-method.md)
- [Checkout Sessions のブランディング設定を構成するためのサポートを追加](https://docs.stripe.com/changelog/clover/2025-09-30/checkout-sessions-branding-settings.md)
- [製品の測定単位を指定可能](https://docs.stripe.com/changelog/clover/2025-09-30/product-data-unit-label.md)