PayPal
1510025434@PPJP

JavaScriptだけで完結する簡単サーバーレス決済 Client Integration

PayPal

API決済の冒頭で説明されているClient Integrationについて説明します。

Client Integrationとは

クライアント（画面）だけで決済を完了させる実装方法です。デベロッパーサイトのJavaScriptを貼り付けて少し変更するだけで実装は完了します。
PayPalチェックアウトの実装方法のひとつです。

PayPalチェックアウトの構成

PayPalチェックアウトのフロントエンドの処理はcheckout.jsというJavaScriptライブラリで提供されます。このライブラリを使ってPayPal決済画面を表示しますが、決済完了をこのJavaScript内で行いたいか、サーバー側で行いたいかで実装方法を選択することができます。
参考：checkout.jsのGithubリポジトリ

checktout.jsと各実装方法の関係
checkout.js only = Client Integration --------> JavaScript内で決済完了
  |   |                   
  |   + Server Integration -----------------------> REST APIを使って決済完了
  |
  + Braintree SDK ----------------------> Braintree SDKを使って決済完了

API決済 では各実装方法の違いとBraintree SDKを使った実装方法について説明しています。

Client Integrationの実装方法

  1. デベロッパーサイトにログインして、REST API Appを作成してClient IDをコピーします。https://developer.paypal.com/docs/api/overview/#create-a-paypal-app
  2. デベロッパーサイトのJavaScriptを貼り付け上記のClient IDをSandboxとLIVEそれぞれ貼り付けます（片方だけでも構いません）。https://developer.paypal.com/docs/checkout/quick-start/
  3. 以上で完了です。

決済完了の通知方法

このままでは決済完了の通知を受け取ることはできません。決済完了の通知には、通常、IPN、もしくはWEBHOOKを使いますが、リアルタイム用途ではないので即座に通知を受け取りたい場合は不向きです。
この場合は、checkout.js内のonAuthorize の引数 data と actions.payment.execute().then の引数 paymentに支払い者や決済情報のJSONが入っているので、それを取得して適宜処理をする（例：完了画面に取引IDと共にリダイレクトさせるなどする）ことで決済の結果を知ることができます。

dataとpaymentのデータ取得例
onAuthorize: function(data, actions) {  
  return actions.payment.execute().then(function(payment) {
    // The payment is complete!
    // You can now show a confirmation message to the customer
    alert(JSON.stringify(data));
    alert(JSON.stringify(payment));
  });
}

※相互バックアップとしてIPNやWEBHOOKとこのcallback実装を併用することも可能です。

カード与信エラーの対処

支払いボタンを押した後にクレジットカードに問題がありエラーとなった場合、Client IntegrationではPayPalが自動的に他の支払い手段（カード）を選ぶよう催促をしてくれます。
image.png

注）サーバーサイド実装の場合は、こちらにあるように、サーバーサイドからのレスポンスを判定して、再度決済を促す実装となります。

その他のエラーハンドリングについて

こちらを参照ください（詳細なエラーハンドリングを入れたい場合はサーバーサイド決済を推奨します）。

配送先住所の連携方法

Client Integrationのactions.payment.createのpaymentJSONは、REST APIのCreate paymentのRequest bodyに対応しています。よって、同じパラメータを渡すことで配送先住所やその他のオプションを渡すことができます。配送先住所を渡すことで売り手保護の必須条件を満たし、PayPal登録画面に住所情報が初期入力されるようになります。

actions.payment.createでの配送先住所連携方法
payment: function(data, actions) {
   return actions.payment.create({
      payment: { // Corresponding to '/v1/payments/payment'
          transactions: [
              {
                 amount: { total: '1000', currency: 'JPY' },
                 item_list: {
                     "shipping_address": {
                       "recipient_name": "太郎 山田",
                       "line1": "住所１北青山",
                       "line2": "住所２ほげビル",
                       "city": "港区",
                       "country_code": "JP",
                       "postal_code": "123-4567",
                       "phone": "0322223333",
                       "state": "東京都"
                     }
                 }
               }
           ]
       }
   });
},

image.png

image.png

その他の独自の処理を入れる時やボタンをカスタマイズしたい時

API決済のベストプラクティス内の「決済フローのカスタマイズ方法」と「PayPalボタンのカスタマイズ方法」を参照ください。

参考情報

checkout.jsの動的デモ

Edit request
27