PayPalのClient Integrationの簡易的な実装方法

PayPal Tech Meetupに行ってきてPayPalのClient Integrationについて色々お話が聞くことができたので決済後処理、決済フローのカスタマイズを除いて簡易的にボタンを作成する方法を紹介していく

1.スタイルの決定#

Checkout Integration PatternsこちらでCheckoutボタンのテストができるのでこちらで確認しながらきめるとよいだろう下記がstyle関連で使用できるオプションです。

1
locale: 'ja_JP'

ボタン等に使用する言語使用可能な言語はこちらを参照

1
style: {
2
    size: 'small',
3
    color: 'gold',
4
    shape: 'pill',
5
    label: 'checkout',
6
    tagline: 'true',
7
    layout: 'vertical',
8
    fundingicons: 'true'
9
}

ボタンのデザインに関するオプションこちらから使用できるオプションを確認できます。
またfundingだが日本だったら特にカスタマイズは要らないはずですチェックアウトボタンでのクレジットカード決済は有効になっているのでfundingiconsをtrueにしていただくか、layoutをverticalにしていただければアクセプタンスマークが表示されるはずですのでそちらからクレジットカード決済が可能になります。

2.ボタンの実装#

こちらでREST API appsのCreate Appフロー通り情報を入力してAppを作成してください、作成が完了したらappのページを開きClient IDをどこかにメモしておいてくださいこれがSandbox(テスト)のIDになります次に右上のLiveをクリックしてください違うClient IDが表示されるのでこちらもメモしておいてくださいこれがLive(本番)のIDになります

1
<script src="https://www.paypalobjects.com/api/checkout.js"></script><!--checkout.min.jsにするとminify版になります-->
2
<div id="paypal-button-container"></div><!--DOMで操作したいエレメント簡単に言うとボタンの設置場所-->
3
<script>
4
    paypal.Button.render({
5
        env: 'sandbox', //snadbox(テスト)かproduction(本番)か
6
        locale: 'ja_JP' //言語設定
7
        style: {
8
            //ここに先ほど決定したデザインを入れる
9
        },
10
        client: {
11
            sandbox: '', //先ほどメモしたsandboxのClient IDを入れる
12
            production: '' //先ほどメモしたLiveのClient IDを入れる
13
        },
14
        payment: function(data, actions) {
15
            return actions.payment.create({
16
                payment: {
17
                    transactions: [
18
                        {
19
                            amount: {total: '1000', currency: 'JPY'}
20
                        }
21
                    ]
22
                }
23
            });
24
        }, //商品内容や買い手へのメッセージ等の設定ができるこちらを参照https://developer.paypal.com/docs/checkout/integrate/#2-set-up-a-payment
25
            //また配送情報の削除等も可能こちらを参照https://developer.paypal.com/docs/checkout/how-to/customize-flow/#pass-web-experience-profile-options
26
        onAuthorize: function(data, actions) {
27
            return actions.payment.execute().then(function() {
28
                window.alert('Payment Complete!');
29
            });
30
        } //決済時のhookアクション等の設定ができる見本は決済完了時こちらを参照https://developer.paypal.com/docs/checkout/how-to/customize-flow/#show-a-confirmation-page
31
    }, '#paypal-button-container');//ボタンをレンダリングするエレメントのセレクタが引数
32
</script>

3.決済テスト#

テスト用アカウントをログインできるようにする必要があるこちらを開きアカウントをクリックしたらprofileをクリックそうするとモーダルが開くのでChange passwordをクリック任意のパスワード入力後saveをクリックこれを2アカウントあるはずなので両方行う次にチェックアウトボタンをテスト用のページなりで使用できるようにするコードが問題なければボタンが表示されるはずなのでクリックするenvの値がsandboxの場合sandboxの決済画面が開くので先ほどのアカウント一覧の画面のPERSONALと書かれている方でログインする、そうすれば決済ができるはずです。次にテスト用のアカウントで決済の受け取りが完了しているかの確認ですがこちらから先ほどのアカウント一覧の画面のBUSINESSと書かれている方でログインすると先ほどテストで決済した分が反映されていれば成功していることになりますが、反映まで時間がかかるので注意が必要です。

まとめ#

速足で簡単な実装について説明して感じたことだが公式のqiitaの情報の少なさ英語版リファレンスの非フロー的な機能説明(主に情報が分散しすぎてる)が多いと感じました。その辺りなんとかなればもっと利用者が増えるのではないだろうか。