🎉

Stripe導入手順

2025/01/13に公開

はじめに

Stripe Checkoutを利用することで、オンライン決済を簡単かつ安全に実装できます。
本手順書では、基本的な実装フローを順序立てて説明します。画像はこちら

導入効果

Stripeを導入することで、以下の効果が得られます:

簡単な操作で支払い画面に遷移

ユーザーが注文画面で「支払い」ボタンを押すと、Stripeが提供する支払い画面に移動します。

多様な支払い方法に対応

支払い画面には、クレジットカード、デビットカード、銀行振込、ApplePay、GooglePay、コンビニ決済などのオプションが表示されます。

支払い後のスムーズなリダイレクト

支払い完了後、自動的に注文画面に戻り、注文処理が続行されます。

自動返金

注文キャンセルされた場合、自動的に返金が行われます。

開発情報

・サーバーサイド: Java
・フロントエンド: HTML/JavaScript

前提条件

Stripeを利用するために必要な準備:

Stripeアカウントの登録

・Stripeアカウントを作成(無料、初期費用・月額費不要)。
・アカウント作成後、Stripe Dashboardで「開発者メニュー」から「APIキー」を取得。
 ※「公開可能キー(フロントエンド用)」と「シークレットキー(サーバー用)」の2種類が提供されます。

StripeのSDKをインストール

Stripeが提供するサーバー用SDKを以下の公式サイトからインストールします:https://docs.stripe.com/sdks

開発環境の準備

EclipseやIntelliJ IDEAなどの開発環境を用意します。

導入手順

Stripe で商品を追加する

Stripe Dashboardで商品を登録します。
 登録後、各商品に対応する「priceID」が生成されるので、これを保存しておきます。

Stripe でWebhookを設定する

StripeのWebhookは、Stripeがシステム内で特定のイベント(支払い完了、返金処理、サブスクリプション更新など)を検知した際に、
 事前に指定されたURL(Webhookエンドポイント)にリアルタイムで通知を送信する仕組みです。
 この通知により、ユーザー側のシステムはStripeのイベントに基づいた処理(例: 注文ステータスの更新やメール送信)を自動で実行できます。

フロントエンドの実装
支払いボタンの実装

支払いボタン押下時に以下の情報をバックエンドに送信します:
 ・APIキー: ショップを識別するために使用。
 ・商品ID: 支払い対象の商品を特定(複数可)。
 ・数量: Stripeが支払い総額を計算するために使用。
 ・注文番号: 支払い成功後に注文状態を更新するために利用。

バックエンドからのリンク受け取り

・バックエンドで生成した支払いリンクを受け取り、新規タブで表示します。

キャンセルボタンの実装

・キャンセルボタン押下時に注文番号をバックエンドに送信します。

バックエンドの実装

支払い画面の生成

・フロントエンドから受け取った情報をもとに、Stripeライブラリを使用して支払い画面のリンクを生成します。
 ・支払い成功時・失敗時のリダイレクト先を設定します。

Webhookを利用した注文状態の更新

・StripeのWebhookを利用して、サーバーが支払い状況(成功、失敗、期限切れなど)を受信します。
 ・Webhookのデータをもとに注文番号を特定し、該当注文の状態を更新します。

返金処理

Stripeの返金プロセスを構築することで、Stripeが自動返金を行われます。

テスト

支払い画面生成の確認

支払いボタンを押して、正しく支払い画面に遷移するか確認します。
 また、Stripeが提供するテスト用カード番号(例: 4242 4242 4242 4242)を使用して、支払いフローの動作をテストします。

Webhookのテスト

ローカル環境ではWebhookサービスを直接利用できないため、以下の手順で代替テストを行います。

返金処理の確認

キャンセルボタンを押して、正しく返金が行われることを確認します。

Discussion