Stripeを使った決済処理を調べてみた。 - アクトインディ開発者ブログ

今回はStripeについて調べてみたのでそのことを書きます。

Stripeとは

Stripeは決済処理を代行してくれるサービスです。
サービス内でなにか販売をしようとするとユーザーから代金をいただく決済の仕組みを用意する必要があります。

ネットサービスだとまずはクレジットカード決済のサポートが必須となると思います。
通常は、各クレジッドカードブランドと直接やり取りすることはなく、代行処理サービスを使います。 Stripeもそんな代行処理サービスのひとつです。

決済機能はクレジットカード番号というセンシティブな情報を扱うため、代行処理サービスを使ってもやり取りが複雑になりがちです。
私自は過去に国内の同様のサービスを使ってクレジットカード決済を実装したことありましたが、今回Stripeを使ってみてその実装の容易さに感動しました。

Rails のアプリケーションに組み込む前提で調査したのでご紹介します。

最初の一歩

Stripe: Registerでアカウントを作って開発用のAPIキーを取得したら、ざっくり決済をどうやって実装するのか感じを掴むために次のドキュメントをやってみることをおすすめします。

stripe.com

掲載されているコードのコピー&ペーストで下のようにRails上で決済できるところまで実装できます。

rails newからで所要15-30分くらいです。ローカルマシン上で動かせます（rails sを使います）。

出来上がると次の様にCheckout.jsというStripe社が用意するJSライブラリで作られたクレジットカードフォームを使って決済を行えます。

f:id:HeRo:20190525151945g:plain — Stripeデモ

クレジットカード情報はRailsに送信されません。 Checkout.jsが直接StripeのAPIサーバに送信して、stripeTokenを取得します。

RailsにはこのstripeTokenを送信して、決済処理に利用します。

こうしてクレジットカード情報というセンシティブな情報を自社で運用するサーバには一切送らずに決済処理ができるというわけです。

決済処理を行うために必要最低限のRails側のコードは次の通りです¹。

def create
  charge = Stripe::Charge.create({
    source: params[:stripeToken],
    amount: 500, # 決済金額
    currency: 'jpy',
  })
  # 〜決済結果を保存する処理など〜
end

とてもシンプルな実装で決済処理を実現できます。

Checkout.js

クレジットカード情報はCheckout.jsでハンドリングすると前述しましたが、そちら側の実装も簡単です。

上のGIFアニメのフォームを表示するには次の様に実装するだけです。

  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
          data-description="A month's subscription"
          data-amount="500"
          data-locale="auto"></script>

data-属性で言語や通貨の指定や請求先住所の入力欄の追加などが簡単にできるようになっています。

Stripe.js と Elements

Checkout.jsを利用するとほぼ実装なしと言えるくらい簡単ですが、実際には自社のサービスに合わせたデザインにしたいでしょう。

そのためにStripe.jsというJavaScriptライブラリの中にプリミティブなUIコンポーネントであるElementsが用意されています。実装量は増えるものの、こちらを使えば自由にデザイン可能です。

使いやすいと思ったところ

実際に試してみていいと思ったところ、よく考えられているなと思ったところを紹介します。

カード情報を保存できる。複数カードも可能

StripeではCustomerを登録することでお客様情報を管理できます。
そしてCustomerに対してカード情報を登録し管理できます。
これにより、リピーターとなってくれたお客様が毎回カード番号を入力する手間から解放できます。
複数カードの登録も可能なので複数のカードを使い分けたいというニーズにも対応できます。

クレジットカード番号の追加時も自社サーバにはカード情報は送信しません。やはりJavaScriptで実装したフォームから直接Stripeへ送信して得られたトークンでCustomerに紐づけます。カード情報の一部、ブランド、有効期限といったお客様がカードを選択するのに必要な情報はAPIで取得できるのでそれを示して選択してもらいます。
また、決済に使用するデフォルトカードも設定可能なので、「いつものカードで決済」といったショートカットも用意できます。

部分払い戻しが可能

1回の決済で複数の物品を購入し、その一部をキャンセルしたい場合があります。
その様なユースケースにも対応できます。

1つの決済を何回にも分けて払い戻すことが可能です。当たり前ですが決済額を超えて払い戻そうとするとエラーが発生します。

冪等なリクエストが可能

UIのレスポンスや通信の遅れで購入確定のボタンを複数回押してしまうことがあります。また、世の中には基本ボタンは連打する人もいます。
リクエスト回数だけ処理するのがサーバとしては普通なのですが、ユーザ視点に立つと意図しない購入、請求に繋がります。

なので決済処理ではサーバサイドで2度めのリクエストは無視するなどの処理が必要になりますが、Stripeはこれにも対応しています。

次の様にidempotency_key（冪等キー）をStripe APIへのリクエストに付加してやることで、冪等にリクエストが処理されます。つまり、同じリスクエストを2回送ってしまっても2回目以降は同じレスポンスが帰って来て、Stripe側では1つしか決済が作られません。

charge = Stripe::Charge.create({
  amount: 2000,
  currency: "jpy",
  source: @stripe_token,
  description: "何らかのお支払"
}, {
  idempotency_key: @unique_key
})