BraintreeSDKを利用してPayPal ExpressCheckoutを実装するその14(BraintreeSDKによる決済確認画面の表示)

2018年3月14日2018年3月15日

その13ではClient-side RESTを使って、JavaScriptのみで決済を完了させる方法について紹介をしました。ここからいよいよBraintreeを利用した、ExpressCheckoutの実装を行います。なお今回の記事はBraintreeの公式ドキュメントを参考にしています。

PayPal | Client-Side Implementation | JS – Braintree Developer Documentation

JavaScriptライブラリの読み込み

まずBraintreeSDKを使用するにあたって、2つのライブラリの読み込みを行います。

[php]
<script src="https://js.braintreegateway.com/web/3.22.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.22.2/js/paypal-checkout.min.js"></script>[/php]

BraintreeSDKとPayPalの関係

BraintreeSDKを利用したPayPalのExpressCheckoutの実装を行うためには、まず2つのモジュール・オブジェクト・メソッドの組み合わせと1つのオブジェクト・プロパティ・メソッドを知る必要があります。

braintree.client.create()

braintreeモジュールの中でclient”はすべての要素を統合するオブジェクトのことを指し、そのオブジェクトを使う（”create”メソッド）という感じの意味になります。最初に必ずaccess_Tokenの情報を元に作成した、clientTokenを用いた認証が必要となります。

3つの概念の中で最も大きな組み合わせで、braintree.paypalCheckout.create()を包含します。

braintree.paypalCheckout.create()

braintreeモジュールの中の”paypalCheckout”は、ExpressCheckoutに必要な構成要素が含まれるオブジェクトのことを指し、そのオブジェクトを使う（”create”メソッド）という感じの意味になります。

3つの組み合わせの中で、braintree.client.create()に次いで大きな組み合わせで、paypal.Button.render()を包含します。

paypal.Button.render()

オブジェクト・プロパティ・メソッドの順でExpressCheckoutで決済をするために必要な情報を読み込みます（PayPalボタンのデザイン・決済確認画面・認証情報の登録）。braintree.client.create()の中で最も小さな組み合わせです。詳細についてはその13の記事が参考になります。

BraintreeとPayPalの組み合わせ

以上、3つの情報を組み合わせるとindex.jadeに記述する大まかなコードは、こんな感じになります。なお#{clientToken}はjadeの記法で変数展開のことを指します。

[php]
braintree.client.create({
authorization: ‘#{clientToken}’,
},function(){
　　　　…←（エラー処理）
braintree.paypalCheckout.create({
　　　　　　　　　　　　client: clientInstance
}, function(){
…←（エラー処理）
paypal.Button.render({
　　　　　　　　　　　…←（PayPalボタンののデザイン・決済確認画面・認証情報の登録）
}, ‘#paypal-button-container’).then(function () {
…←（PayPalによる決済が完了した後の動作）
});
});
});
[/php]

今回の記事でご紹介したコードはGitHubで公開しています。