EC-CUBE4×Stripe 決済プラグインを作ったお話（実装内容）

EC-CUBEのStripe決済プラグインを作成しました。

まだまだ実装したい機能があるので、完全完成はまだ先ですが、カートから決済が完了するまでの機能は実装できたので、Stripeの機能をどの様に実装したのかをまとめます。

#参考先

EC-CUBE/sample-payment-plugin
https://github.com/EC-CUBE/sample-payment-plugin
根本的な物はこちらを利用しました。
これをカスタマイズして作成したと言っても過言ではない。

kurozumi/Stripe4
https://github.com/kurozumi/Stripe4
クレジットカード情報の保存に関する動きを、参考にさせて頂きました。
EC-CUBEのStripe決済プラグインはほぼ無いので悲しい。。。

StripeのドキュメントとAPIリファレンス
https://stripe.com/docs
https://stripe.com/docs/api
https://stripe.com/docs/js
ここを読み込めば読み込むほど、新しい発見があります。

#実装内容
EC-CUBEのカートから決済のフローは５ステップあります。

1. カートの商品
2. お客様情報（会員ログインしてない時に表示される）
3. ご注文手続き
4. ご注文内容確認
5. 完了

この中で関わってくるのが3～5の手順になります。

##ご注文手続きのページ
ttps://examole.com/shopping

確認するボタンを押したとき、以下の順で動作しています。

###新しいカード情報を利用する場合の動作

1. 入力されたカード情報からPaymentMethodを作成。
2. EC-CUBEに会員ログインしていれば、StripeのCustomerを作成。（すでに作成済の場合は作成しない。）
3. 上記２つを利用してPaymentIntentsを作成。
4. PaymentMethod・Customer・PaymentIntentsのidを保存します。

###保存されているカードを利用する場合の動作

新しいカード情報を利用する場合との違いは、PaymentIntentsを作成する時に、保存されているPaymentMethodのIDを使うだけです。
それ以外の動作は同じです。

##ご注文内容確認
ttps://examole.com/shopping/confirm

注文するボタンを押したとき、下記の順で動作しています。

1. PaymentIntentsの情報からclient_secretを取得。
2. stripe.confirmCardPaymentでPaymentIntentsの決済を完了させます。

confirmCardPaymentは3Dセキュアが必要だった場合、ポップアップで認証画面を出してくれます。

カード保存する場合は、stripe.confirmCardPaymentのオプションsetup_future_usageにoff_sessionを設定します。
決済完了後にPaymentMethodをCustomerへアタッチできないので、決済前にアタッチするか、決済時にoff_sessionを設定するかになると思います。

###決済に問題があった場合

3Dセキュアをキャンセルした場合、新しくPaymentMethodを作成しなければ決済ができません。
このように、新しいカード情報が必要になった場合は、カード情報入力フォームを表示します。
前のページに戻ることなく、新しいカード情報を入力できるようにしています。

###その他のエラーの場合

一例ですが、stripe.confirmCardPaymentが動いた時に決済が完了しますが、503エラーや通信エラーなどでEC-CUBE側で注文処理が完了しないといった事が起こります。
そのような事が起こった場合、決済が進まないようにしています。
（支払い方法がクレジット決済を選択されている場合に限る。）

この辺は、webhookを使って対応出来ればと思ってます。

##完了
ttps://examole.com/shopping/checkout
↓
ttps://examole.com/shopping/complete

基本的には、EC-CUBEの注文処理のみ行ってます。
カード保存が有効であれば、カード保存処理を行ってます。
Stripeに対しての処理は行ってないです。

##EC-CUBEとStripeの関係性

EC-CUBE１Customerに対してStripe１Customer
EC-CUBEに会員ログインしていない場合は、StripeのCustomerは作成しない。
EC-CUBE１Orderに対してStripe１PaymentIntents

PaymentMethodは必要に応じていくつも作成します。

##最後に

なかなか読みにくい内容かもしれないですが、少しづつアップデートはしていこうと思います。

実装方法はいくつかあって、いくつかUIが違いサンプルを作ってみましたが、上記の方法が一番良い動作かなと一人で勝手に思ってます。

でもまぁ、ほぼほぼStripeの動作を理解して作成できたと思います。