Stripe×Next.jsで作る決済アプリケーション【準備編】
2022/06/22
何回かに亘ってStripeを使ったWEBアプリケーションを作っていこうと思います。
今回はその中の【準備編】になります。
開発時の環境
"react": "17.0.2",
"next": "^12.1.0",
"@stripe/react-stripe-js": "^1.9.0",
"@stripe/stripe-js": "^1.24.0",Stripe事前チェック
・Stripeは基本的に、サーバー側での実装になります。
・Next.jsでは、フロント側とサーバー側の処理が混在しているので、混乱しないように。
・基本フローは、Next.jsのAPI RouteでStripe APIの実装 → フロント側でAPI Routeを叩くという流れになります。
・本番環境で利用する場合、運営者、プラットフォーマー側の情報入力が必要になります。例えば、インボイスをテスト環境で送信する場合、オーナーアカウント自体に送信確認は可能ですが、別のアドレスにテスト送信できません。テスト送信する場合はオーナーアカウントを有効化（プラットフォーマー情報の入力）が必要になります。
インストール
サーバー用ライブラリ
npm i stripe
yarn add stripeフロント用ライブラリ
※ Stripeの初期化用ライブラリとReact用コンポーネントライブラリの２種類。
npm i @stripe/stripe-js //初期化用ライブラリ
npm i @stripe/react-stripe-js //React用コンポーネントライブラリ
yarn add @stripe/stripe-js //初期化用ライブラリ
yarn add @stripe/react-stripe-js //React用コンポーネントライブラリAPI Keyの設定
Stripeには、本番用とTEST用で、それぞれ２種類（公開可能キーとシークレットキー）があります。
上き以外に、自分で利用制限をかけらる「制限付きのキー」という物もあります。
基本は、標準の公開可能キーとシークレットキーで大丈夫ですが、
不要な機能にアクセスできないよう設定できるので、安全面でこちらを使うのもありです。
初期化
サーバー用
// シークレットキー使用
const stripe = require('stripe')('sk_test・・・・・・');
※ シークレットキー使用。
※ API RouteやSSG, SSR関数ないで使用。
フロント用
// 公開可能キー使用
const stripePromise = loadStripe('pk_test・・・・・・');
※ 公開可能キー使用。
※ フロント用コンポーネントのStripe Elements使用時に使う。（詳しくは別記事へ）
まとめ
以上で準備編は終わりになります。
Stripeを始めて利用するとき用に、前提知識と初期設定の方法など、
僕が気になったポイントを紹介しました。
次回以降は実際に、決済処理の実装、商品登録、インボイス処理の実装、Webhookの連携などを紹介していこうと思います。
決済機能は、ビジネスやサービス運営者にとっては不可欠な機能だと思います。
Stripeは、そんな決済機能を比較的簡単に導入できるので、
慣れてくると非常につよつよなサービスです。