2018/03/14
PayPal ExpressCheckoutボタンの実装
本投稿で扱う内容
- PayPal ExpressCheckoutのフロント実装
- checkout.jsを用いてIn-Contextな表示
- 無効カードなどの際にカートに戻らずPayPal側での完結
バックエンドとの連携とフロー
2段階のステップを踏みます。
1. 注文情報の一時保持、バリデーションとPayPal機能の呼び出し
2. PayPalから正常に戻ってきた際に注文情報の構築
1ではPayPalの決済がまだ完了していないので
PayPalから正常に戻ってきた際に注文情報を構築するための必要情報をストックしておきます。
ExpressCheckoutを呼び出す際にもらうトークンをキーにしておく。
万が一途中でブラウザを閉じても良いように
2はコールバックAPIを窓口として用意し、1を基に受注作成する。
Twigでのフロント実装
最終的に以下のコードとなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <script src="https://www.paypalobjects.com/api/checkout.js"> </script> <script> // 注文情報の一時保持先URL var CREATE_PAYMENT_URL = "{{ path('application_frontend_paypal_checkout_prepare') }}"; paypal.Button.render({ // 決済モードでsandbox, 本番切替 env: {% if is_payment_debug() %}'sandbox'{% else %}'production'{% endif %}, commit: 'true', payment: function() { return paypal.request({ method: 'POST', url: CREATE_PAYMENT_URL, data: { // 商品IDと数量を保持 'quantities[76]': $("#{{ form.quantity.vars.id }}").val(), // 失敗、キャンセル時の戻り先指定 back_url : "ec_client_landing_page_settlement", } }).then(function(data) { return data.PayerID; }); }, onAuthorize: function(data, actions) { // PayPalから正常に決済完了して戻ってくる際に実行される var EXECUTE_URL = '{{ path("application_frontend_paypal_result_checkout") }}'; // 中カッコ内を内部APIにパラメータとして渡すことが可能 return paypal.request.post(EXECUTE_URL, { PayerID: data.payerID, token: data.orderID, orderStr: data.orderID }) .then(function (res) { if(res.success == true) { // 内部APIで注文作成完了したら完了ページへリダイレクト window.location.replace("{{ path('ec_client_cart_complete') }}"); } else if(res.error == "10486") { // 無効なカードなどの決済時はPayPal画面へ自動遷移させる actions.restart(); } else { // window.location.replace('エラー画面URL'); } }); return actions.redirect(); }, onCancel: function(data, actions) { return actions.redirect(); } }, // 以下のIDを付与したHTML要素に属性を持たせる '#paymentMethods'); </script> |
概要
全項目で記述したコード＋
記述で再現します。
checkoutボタンを表示させたい箇所に前述divタグを埋め込みます。
パラメータの渡し方など細かい仕様がなかなか見つからないところで苦戦しました。
またPDR機能(無効カード時の自動戻し遷移)をjs記述で制御するなども意外とバックエンドだけで完結しないという仕様。
同じく完了ページへの遷移もjsで制御せざるを得ない、という結果になりました。
Author Profile
スターフィールド編集部
SHARE
