こんにちは @wozozo です花金です。
Android の Google Chrome 53 以降、デスクトップ版の Chrome 60 以降では Payment Request API に対応しています。これに対応しているブラウザであれば、毎回クレジットカード情報の入力をすることなく Google Chrome に保存されているカード情報を使って簡単に決済を行うことが可能です。
まず前提として、Payment Request API が提供する機能は決済に必要なカード情報の受け渡しであり、カード情報を受け取ったにあとに実際に決済を行うためには PAY.JP のような決済ゲートウェイを別途利用する必要があります。
ECサイトによって必要な機能の違いはあると思いますが、クライアント側の実装は基本的に以下のコードだけで済みます。 (Google Developers のサイトにサンプルコードが掲載されているのをほぼそのまま貼り付けました)
<script type="text/javascript" src="https://js.pay.jp/"></script> <script> // payjpjs のセットアップ Payjp.setPublicKey("pk_test_0383a1b8f91e8a6e3ea0e2a9"); function onBuyClicked() { if (!window.PaymentRequest) { // PaymentRequest API is not available. Forwarding to // legacy form based experience. location.href = '/checkout'; return; } // Supported payment methods var supportedInstruments = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: [ 'visa', 'mastercard', 'amex', 'discover', 'diners', 'jcb', 'unionpay' ] } }]; // Checkout details var details = { displayItems: [{ label: 'ダンベル40kg + 20kgサービス', amount: { currency: 'JPY', value: '10800' } }, { label: '送料', amount: { currency: 'JPY', value: '20000' } }], total: { label: '合計', amount: { currency: 'JPY', value : '30800' } } }; // 1. Create a `PaymentRequest` instance // 1. `PaymentRequest` インスタンスを生成する var request = new PaymentRequest(supportedInstruments, details); // 2. Show the native UI with `.show()` // 2. `.show()` を呼び出して、ネイティブ UI を表示する request.show() // 3. Process the payment // 3. 決済処理をおこなう .then(result => { // POST the payment information to the server const card = { number: result.details.cardNumber, exp_month: result.details.expiryMonth, exp_year: result.details.expiryYear, cvc: result.details.cardSecurityCode, }; Payjp.createToken(card, function(status, response) { if (status == 200) { document.getElementById('result').innerText = `PAY.JP Token: ${response.id}`; return result.complete('success'); } else { // handle error like displaying error message. return result.complete('fail'); }; }); }); } document.querySelector('#start').addEventListener('click', onBuyClicked); </script>
コード自体の説明は元のページで解説されているのでご覧ください。
実際に決済をする場合、生のカード番号・有効期限・CVC等を載せて PAY.JP にリクエストを送る必要がありますが、それらの情報はコード中2番の request.show() を呼び出した後、3番の then に PaymentResponse という形で入ってきます。
生カード番号をサーバー側で一時的にも受け取らなくていいように、ここでは payjp.js SDK を使用しています。これを使うと、iframe 上で PAY.JP ドメインと https で通信をしてカード番号をトークン化したものが返却されます。このトークンを使用することで、ECサイト側などではカード情報に一切触れずに決済処理を行うことが可能です。
ここまではクライアント側だけで済ませられますので、このトークンを使用し、通常の PAY.JP 決済と同様にサーバー側で charge を作成すると決済が完了します。（カード番号やCVCは決して保存しないでください。）
サーバー側のサンプルコードは下のようになります。
const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const payjp = require('payjp')('sk_test_c62fade9d045b54cd76d7036'); app.use(express.static(__dirname + '/views')); app.use(bodyParser.json()); app.get('/', function (req, res) { res.render('index'); }) app.post('/pay-with-token', function (req, res) { const query = { amount: 30800, // 本来はリクエストの中身から取得, currency: 'jpy', card: req.body.token // tok_xxx の PAY.JP Token を取得 }; payjp.charges.create(query).then((result) => { // サーバー側での決済成功時に必要な処理 etc res.json({success: true}); }).catch((err) => { console.error(err); res.json({success: false}); }); }) app.listen(3000, function () { console.log('Example app listening on port 3000!'); })
デスクトップ版の Chrome であれば OS を選ばずに使用できます。
モバイル、デスクトップ版いずれの場合も決済ダイアログの「お支払い」ボタンを押した際に CVC の入力が求められますが、ユーザーにはそれ以外の入力は求められません。
Payment Request API が使えるブラウザの種類はまだ多くないですが、決済手段の選択肢として必要十分な機能が提供されており、実装もごく少量のコードでできるため、Google Chrome のシェアが多いサイトでは現実的な選択肢の一つとして候補に挙げられると思います。 また、日本ではまだ開始されていないため今回は紹介しませんでしたが、 Android Pay と統合することもでき、Android Pay にクレジットカードが登録されていれば Payment Request API のダイアログ上の選択肢として Visa・Mastercard などの並びに表示されます。
PAY.JP で Payment Request API をぜひお試しください。
記事中に掲載したコードは GitHub にも公開しています。
参考