PayPal JavaScript SDK はじめの一歩　ちょっと触ったよ - Thunder Info ～さんだーいんふぉめーしょん～

PayPal JavaScript SDK を触ってみたんですが、日本語で解説しているサイトがほとんどなくとても苦労したので書いてみようと思います。公式のリファレンスはこちら　PayPal JavaScript SDK

サービスの構成について

まず、どういう構成になっているかを整理しておきます。（多分こういう構成だろ、という雑な理解で書いています。） PayPalでは、決済用のAPIを公開していて、そこにリクエストを投げれば決済してくれるようになっています。 PayPal JavaScript SDKでは、このAPIに決済用のリクエストを投げるWebパーツを用意してくれていて開発者はHTML、JavaScriptでフロントエンドのコードだけ書けば、決済機能が作れるようになっています。ただし、決済情報の送信から決済が完了するまでの処理はPayPal側のサーバサイドに移るため、その途中に処理を挟み込むことはできないことになっています（たぶん）。

※このPayPal API呼び出しを、JavaScript SDKではなく、Python、PHP、Javaなどから任意のロジックと一緒に記述した場合は、決済と任意の処理を組み合わせて実装できます。

概要を把握したところで、さっそくPayPal JavaScript SDKを使った場合の実装手順を確認します。

実装手順

上記の大まかな流れは、リファレンスに記載があります。
javascript-sdk-reference
しかし僕の場合どう頑張ってのこの通りでは動きませんでした(´;ω;｀)
なので多少自分なりにアレンジを加えながら実現していきます。

アカウントの取得
検証用APIの確認
決済ボタン（Webパーツ）の用意
決済ボタン（Webパーツ）の設定
テスト用カードの作成
動作確認
本番用環境への切り替え

１．アカウントの取得

決済機能を使いたい場合、PayPalビジネス用のアカウントが必要なはずです。 www.paypal.com
今回僕は、とある友人からビジネスアカウント配下のDevelopperアカウントの招待を受けました。
ビジネス用アカウントを作るとPayPal Developerのサイトにもログインできます。（たぶん）
もし、PayPalのビジネスアカウントがない場合でも手順の3,4,5は進めることができて大体の動きは確認できますので、試しにやってみたい方は手順3へGO!

２．検証用アプリとサンドボックス環境の確認

Developperのサイトにログインすると検証用APIを作成する画面があります。

f:id:ThunderInfo:20210515232811p:plain — newAPI

これから自作する決済機能付きWebページに合わせて、個別にAPIを作り、各種設定を施していくのですが、デフォルトでDefault Applicationという名前のAPIが既に登録されていますので、今回はこれを使います。クリックして、最低限の情報を確認しておきましょう。

f:id:ThunderInfo:20210515232956p:plain — ClientID

Webページ（クライアント）側に埋め込むClient IDが記載されています。後で使います。その他、SANDBOX - Accountsという画面から今の検証環境で作られているダミーアカウント（ビジネスオーナーとユーザー）も確認しておきます。（ほとんど使いません。）

f:id:ThunderInfo:20210515233111p:plain — SandboxAccounts

３．決済ボタン（Webパーツ）の用意

JavaScript SDK reference リファレンスに従って、ボタンを作るコードを作成します・・・が、ここがどうしてもうまくいかなかったので PayPal Checkout | Secure Credit Card Processing | PayPal US こっちの画面からコードを自動生成します。（リファレンスを見ながらの自作も頑張ったんですけどねぇ、僕にはちょっと無理でした　笑）吐き出されたソースコードをHTMLに張り付けましょう。

    <div id="smart-button-container">
        <div style="text-align: center;">
            <div id="paypal-button-container"></div>
        </div>
    </div>
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=JPY"
        data-sdk-integration-source="button-factory"></script>
    <script>
        function initPayPalButton() {
            paypal.Buttons({
                style: {
                    shape: 'rect',
                    color: 'gold',
                    layout: 'vertical',
                    label: 'paypal',

                },

                createOrder: function (data, actions) {
                    return actions.order.create({
                        purchase_units: [{ "amount": { "currency_code": "JPY", "value": 1000 } }]
                    });
                },

                onApprove: function (data, actions) {
                    return actions.order.capture().then(function (details) {
                        alert('Transaction completed by ' + details.payer.name.given_name + '!');
                    });
                },

                onError: function (err) {
                    console.log(err);
                }
            }).render('#paypal-button-container');
        }
        initPayPalButton();
    </script>

HTMLを開き、ボタンが表示されるか確認してみてください。 f:id:ThunderInfo:20210515235650p:plain

４．決済ボタン（Webパーツ）の設定

先ほどのソースコードをカスタマイズしていきます。決済ボタン自体の各種設定はscriptタグのURLにパラメータを付加することで行います。例えば、言語を日本語にするには、URLのパラメータにlocale=ja_JPを付け加えます。また、client-idのパラメータは先ほどdevelopperサイトで確認したClient IDを設定します。 client-id=XXXXXXXXXXXX となります。XXXの部分は先ほど確認したClient ID

    <script src="https://www.paypal.com/sdk/js?client-id=XXXXXXXXXXXX&currency=JPY&locale=ja_JP"
        data-sdk-integration-source="button-factory"></script>
    <script>

基本的にはこれで、ボタンは完成ですが、 createOrderプロパティ、onApproveプロパティ、onErrorプロパティを必要に応じてカスタマイズします。今回は、onApproveプロパティにメッセージ表示を追加してみました。

onApprove: function (data, actions) {
    return actions.order.capture().then(function (details) {
        alert('Transaction completed by ' + details.payer.name.given_name + '!');
        alert('payment id : ' + details.id);//★追記　支払いIDを表示します。
    });
},

作成出来たら、HTMLを開き、ボタンが表示されるか確認してみてください。

５．テスト用カードの作成

developperのサイトに戻りCredit card generatorからテスト用のカードを作成します。
f:id:ThunderInfo:20210516001419p:plain 作成出来たら、さっそく先ほどの画面でテストしてみましょう！

６．動作確認

いよいよ動作確認です。先ほど作成した画面にテスト用カードの情報を入れて決済してみましょう。テスト用カードにない情報は、任意に記載してOKです。ただし、各入力項目には書式チェックが走りますので（郵便番号や電話番号など）ある程度それっぽい情報を入れましょう。
f:id:ThunderInfo:20210516002318p:plain f:id:ThunderInfo:20210516002915p:plain 上手く決済ができたら、本当にサーバ側にその情報が飛んで来ているかをチェックします。サンドボックス用のダッシュボードが用意されています。先ほど確認したサンドボックス環境でのビジネスアカウントでログインします。動作検証で入力した情報がこちらに飛んできていれば成功です。

７．本番環境への切り替え

いよいよ本番環境へ切り替えます。切り替えるには本番用のAPIを用意し、Client IDを書きかえればOKです。簡単ですね。developperサイトに行きLiveに切り替えてAPIを作成します。自分のクレジットカードで少額決済してみましょう。

おめでとうございます、完成です！

最後に

PayPalは老舗のWeb決済事業者ですが、おそらくAPI提供ではほかのサービスの後塵を拝しているのではないかと思います。（だから日本語で解説している人少ないんだろう！？そうだろう！？）リファレンス関係の情報も、ユースケースの設定がいまいちだったり、参照すべきところが結構多岐にわたっていたりと、まとまっていない印象です。でも決済系の仕組みを提供してくれているのは本当にありがたいですね以前、Stripeで決済画面を作ったことがありますが、リファレンス一つで結構簡単に実装できたのをおぼえています。とても使いやすく作りやすかったです。

最後Stripe推しみたいになっちゃったな！おしまい（＾ω＾）