古いEC-CUBEでもトークン決済を実装しよう

PayPal の checkout.js を使用すれば、購入確認ページに JavaScript のコードを貼り付けるだけでトークン決済を実装できます。
これなら、2.4 や、 2.11, 2.12 など古いバージョンの EC-CUBE でも対応可能です。

こんなコードを shopping/confirm.tpl に埋めるだけです。
別途 PayPal プレミアアカウントまたはビジネスアカウントの開設が必要です。

shopping/confirm.tpl

<script src="https://www.paypalobjects.com/api/checkout.min.js" data-version-4></script>
<script>
    paypal.Button.render({
        env: 'sandbox', // Specify 'sandbox' for the test environment
        client: {
            sandbox: '<PayPal sandbox client ID>',
            production: '<PayPal production client ID>'
        },
        locale: 'ja_JP',
        style: {
            size: 'small'
        },
        payment: function (resolve, reject) {
            var env = this.props.env;
            var client = this.props.client;
            return paypal.rest.payment.create(env, client, {
                transactions: [
                    {
                        amount: { total: '<!--{$arrForm.payment_total}-->', currency: 'JPY' },
                        invoice_number: '<!--{$arrForm.order_temp_id}-->',
                        description: 'EC-CUBE 決済'
                    }
                ]
            },
                                              {
                                                  input_fields: {
                                                      no_shipping: 1
                                                  }
                                              });
        },
        commit: true,
        onAuthorize: function (data, actions) {
            // Execute the payment here, when the buyer approves the transaction
            return actions.payment.execute().then(function () {
                $('#form1').submit();
            });
        }
    }, '#paypal-button');
</script>

お支払い方法に応じて、購入完了ボタンの箇所に以下の div タグを描画させるようにします。

<div id="paypal-button"></div>

(あとでもうちょっと詳しい手順を記載します...)