Stripeを使って寄付の決済機能を実装する - do_action: WordPress を世の中のために使おう

寄付の受付をする場合で決済機能がない場合は、新たに作成する必要があります。ここでは、Stripeという決済サービスを利用して、決済機能を実装する方法をご紹介します。

TL;DR

Stripeアカウントを作成し、本番環境で利用できるようにする
StripeのCheckout機能を有効にする
Stripe上に、寄付用の商品を作成する
固定ページで、商品ページと購入完了ページを作成する
商品に『Checkoutで使用』ボタンがあるので、そこに記載されたJavaScriptを固定ページに埋め込む

Stripeアカウントを作成する

Stripeを利用するためにアカウントを作成します。作成は団体担当者の方に行ってもらってください。作成後ログインすると、メニューに『本番環境利用の申請』というリンクがあるので、こちらの登録を行ってください。事業情報など、センシティブな内容になるので、こちらも団体担当者の方に行ってもらってください。申請してもらったら、メニューの設定から、チームメンバーの追加ができるので、開発者のアカウントを『開発者』ロールで追加してもらってください。

StripeのCheckout機能を有効にする

Stripeには『Checkout』という機能があり、こちらを有効にすると簡単に決済機能を用意することができます。メニューの設定から『Checkout設定』をクリックして、設定を行います。デフォルトは無効になっているので、有効にします。有効にすると、利用するドメインの設定ができるので、テキストボックスに団体のドメインを入力します。

Stripe上に商品を追加する

StripeのCheckoutはStripe上の商品を利用します。そこで、Stripe上に商品を登録します。メニューの『商品』を選択し、商品を登録します。商品には『一回限り購入する商品』『定期利用する商品』を選ぶことができます。いずれもCheckout利用可能ですが、定期利用の場合に段階的なプランを設定するとCheckoutが利用できなくなりますのでご注意ください。

固定ページを作成する

StripeのCheckoutは団体のページに、JavaScriptで生成した決済ボタンを設置し、そこからStripeの決済ページに遷移して決済を行います。決済後、購入完了ページにリダイレクトするようになっており、決済ボタンを設置する『商品ページ』と、決済後にリダイレクトする『購入完了ページ』を用意する必要があります。この2つは固定ページで作成しましょう。購入完了ページは、URLさえ分かってしまえば誰でもアクセスできます。購入完了ページを購入証明にしないよう注意しましょう。（例：「この完了ページをスタッフに見せてください。」など）

決済ボタンを設置する

Stripeの商品詳細ページのSKU部分に、『Checkoutで使用』というボタンが表示されているのでクリックします。すると、JavaScriptスニペットジェネレータが表示されます。成功時、キャンセル時のURLが入力できるので、キャンセル時には商品ページ、成功時には購入完了ページのURLを入力してください。入力後、『コピー』ボタンを押すことでJavaScriptがコピーできます。これを決済ボタンを表示したい箇所にHTMLコード埋め込みブロックを使って埋め込むと、商品決済ボタンが表示されます。

この際、JavaScript中のstripe.redirectToCheckout()の引数JSON、itemsに記載されている、cancelUrlの下に billingAddressCollection: ‘required’, を追加することで、決済画面で請求書の住所を入力することができるようになります。購入した商品やサンクスレターなどを送付する場合は、こちらを入力してもらうことで送付することができます。なお、デフォルトは請求書の住所は入力できないようになっています。