1. TOPTOP
  2. Webサービス
  3. PayPal

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

|

braintree_payments_1_1

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

JavaScriptライブラリの読み込み

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

<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>

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の記法で変数展開のことを指します。

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

今回の記事でご紹介したコードはGitHub(新しいタブで開く)で公開しています。

ブラウザ上での表示を確認

paypal_braintree_payments_14_1

なお、この段階で”localhost:3000″にアクセスすると、braintreeモジュール内にあるシルバーのPayPalボタンが表示されます。

paypal_braintree_payments_14_2

またボタンをクリックすると、決済確認画面が表示されます。ご興味のある方はぜひご自身で試してみてください。その15(新しいタブで開く)に続きます。