フロント:Reactで決済機能を実装する Stripeの支払いを完了するまで 2/4

概要

バック：SpringBoot RestApiにStripeを導入する　１．支払いインテントを作るまでの続きです。
今回やることは前回作成した未完了の支払い情報を完了にすることです。
コード的な内容はReactの内容がメインになります。

開発環境

IDE:VScode
├── @babel/core@7.20.7
├── @storybook/addon-actions@6.5.15
├── @storybook/addon-essentials@6.5.15
├── @storybook/addon-interactions@6.5.15
├── @storybook/addon-links@6.5.15
├── @storybook/addon-postcss@2.0.0
├── @storybook/builder-webpack4@6.5.15
├── @storybook/manager-webpack4@6.5.15
├── @storybook/react@6.5.15
├── @storybook/testing-library@0.0.13
├── @stripe/react-stripe-js@1.9.0
├── @stripe/stripe-js@1.32.0
├── @styled-jsx/plugin-sass@3.0.0
├── @styled/storybook-addon-jsx@7.4.2
├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── babel-loader@8.3.0
├── babel-plugin-react-require@3.1.3
├── eslint-config-next@13.0.6
├── eslint-plugin-storybook@0.6.8
├── eslint@8.29.0
├── msw@0.49.3
├── next-auth@4.18.7
├── next@13.0.1
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── sass@1.57.1
├── stripe@11.12.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.5

ユースケース

以下フローの赤枠部分を実装します。

Stripeの管理画面では以下のようになっています。

支払いが未完了時だと、PaymentIntentのステータスは:requires_payment_mehtodとなっております。
支払いが完了すると支払い済みになります（下画像参照）

実装

stripeをインストール

以下コマンドを実行

npm install stripe
npm install @stripe/react-stripe-js@1.9.0
npm install @stripe/stripe-js@1.32.0

支払い画面のページを実装する。

作成するファイルは１つだけです。

pages/develop/stripForm/index.tsx

import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js";

// 公開キーを読み込む
const stripePromise = loadStripe("pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

// クレカ情報を入力してPaymentIntentの支払い完了にするページ
// http://127.0.0.1:3000/develop/stripeForm
 export default function Index()
{
    const options = {
        appearance:{
          theme: 'stripe',
        },
        // PaymentIntentのclientSecretを入力する
        clientSecret:"pi_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX_secret_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      }
    return (
        <div className="Layout"> 
        <Elements stripe={stripePromise} options={options}>
        {/* <PaymentElement  /> */}
        <Payment/>
        </Elements>
    			<style jsx>{`				
				// クレジットカード情報の入力欄の幅を調整するために作成
				.Layout{
					width: 300px;
				}
			`}</style>
        </div>
    )
}

const Payment = () => {
    const stripe = useStripe();
    const elements = useElements();
    return (
      <form
      onSubmit={async e => {
        e.preventDefault()
        if (!stripe || !elements) return;
        await stripe.confirmPayment({
          elements,
          confirmParams: {
            return_url: 'http://localhost:3000'
          }
        })
    } 
    }
      >
      {/* クレカ情報の入力フォーム　Stripeのpublic_keyとPaymentIntentのclientSecretが必要 */}
          <PaymentElement  />
          <button type="submit">Submit</button>
      </form>
    )
  }

動かして確認

以下gifアニメはクレカ情報を入力して、Submitボタンをクリックすると支払いが完了することを確認している様子です。
左側はReactで作った決済場面、右側はStripeの管理画面です。

クレカの情報は以下のようになっています。
番号：4242 4242 4242 4242（Stripeが定めたテスト環境下でOKになる番号）
有効期限 3/24(適当　未来だったらなんでもOK)
CVV:111(適当)

参考

とても役に立ちました！ありがとうざいます。

Udemyで試したのですがうまく動かなかったです。

最初に試したやつ　試行錯誤したが動かせず