Stripe Elementsで要素が表示されるまでの間ローディング画面を表示させる方法

Stripe ElementsのPaymentElementでは、カード決済以外にもコンビニ決済やWeChatPayなど、さまざまな決済方法を自動で表示できます。

ですが、PaymentIntentのclient_secretを要素に渡してから、フォームが完全に表示されるまでに少しタイムラグが発生することがあります。

loader属性を利用して、ローディング画面を表示する

Elementsにはloaderオプションが用意されています。

この値をautoまたはalwaysに設定すると、Stripeが用意したローディング画面を表示できます。

@stripe/react-stripe-jsの場合

          <Elements
            options={{
              loader: 'always',
              clientSecret: 'CLIENT_SECRET',
            }}
            stripe={loadStripe(process.env.STRIPE_PUBLISHABLE_API_KEY)}
          >
            <CustomPaymentForm />
          </Elements>

@stripe/stripe-jsの場合

const elements = stripe.elements({
  clientSecret: 'CLIENT_SECRET',
  loader: 'always',
});

表示されるローディング画面

ローディング画面では、カード決済の時の画面に近いスケルトンが表示されます。

ローディング画面を自作する方法

もし独自の画面を実装したい場合は、loader: 'never'を設定します。

          <Elements
            options={{
              loader: 'never',
              clientSecret: 'CLIENT_SECRET',
            }}
            stripe={loadStripe(process.env.STRIPE_PUBLISHABLE_API_KEY)}
          >
            <CustomPaymentForm />
          </Elements>

その後、PaymentElementのreadyイベントを利用して、画面の実装を行いましょう。

const CustomPaymentForm: FC = () => {
  const [show, isShow] = useState(false)
  return (
    <form>
      {show ? null : (<p>Loading...</p>)}
      <PaymentElement
        onReady={e=> {
          isShow(true)
        }}
      />
      <button type='submit'>Pay</button>
    </form>
  )
}

関連ドキュメント

• https://stripe.com/docs/js/element/events/on_ready
• https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader

[PR] Stripe開発者向け情報をQiitaにて配信中！

• [Stripe Updates]：開発者向けStripeアップデート紹介・解説
• ユースケース別のStripe製品や実装サンプルの紹介
• Stripeと外部サービス・OSSとの連携方法やTipsの紹介
• 初心者向けのチュートリアル(予定)

など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。

-> Stripe Organizationsをフォローして最新情報をQiitaで受け取る