initCheckout が同期的になるように更新互換性に関わる変更

新機能

stripe.initCheckout メソッドが非同期ではなく同期になりました。

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

Elements と Checkout Sessions API を導入している場合、この変更は影響します。

移行に必要なこと：

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

const clientSecret = fetch("/create-checkout-session", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
})
  .then((r) => r.json())
  .then((r) => r.clientSecret);

const checkout = await stripe.initCheckout({
  fetchClientSecret: () => clientSecret
});
const checkout = stripe.initCheckout({
  clientSecret
});
const paymentElement = checkout.createPaymentElement();
paymentElement.mount("#payment-element");

const session = checkout.session();
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
}

影響

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

メモ

initCheckout が同期的になるように更新互換性に関わる変更

新機能

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

影響

関連する変更