Stripe Elementsを利用したカートシステムで、カートの変更や割引などPayment Intentsの変更を反映する

ECサイトやウェブサービスでは、送料や割引の適用などで決済フロー中に請求金額が変わることがあります。

その場合、StripeのPayment IntentsとElementsを利用して決済を提供している場合、Payment Intentsのamountを更新して対応します。

stripe payment_intents update pi_xxx --amount 1090

この変更をPayment Elementsなどに反映させたい場合、useElementのもつelements.fetchUpdatesが利用できます。

const PaymentForm: React.FC = () => {
  const elements = useElements()

  return (
    <form>
      <PaymentElement />
      <button onClick={async () => {
        await elements?.fetchUpdates()
      }}>Sync</button>
    </form>
  )
}

fetchUpdatesを実行することで、Payment Elements内で表示される金額を更新できます。

変更後のPaymentIntentsを再取得したい場合は、useStripeのretrievePaymentIntentを実行しましょう。

const PaymentForm: React.FC = () => {
  const elements = useElements()
  const stripe = useStripe()

  return (
    <form>
      <PaymentElement />
      <button onClick={async () => {
        await elements?.fetchUpdates()
        await stripe?.retrievePaymentIntent('pi_xxxx_secret_xxxx')
      }}>Sync</button>
    </form>
  )
}

参考ドキュメント

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

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

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

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