Web決済を変えるWeb Paymentsについて
現在W3Cで仕様の策定が進められているのが決済系のAPIになります。Web Paymentsという仕様でまとめられており、以下の4つが存在します。
- Payment Request API
- Payment Handler API
- Payment Method Identifiers
- Basic Card Payment
この内、ユーザ側が利用することになるのがPayment Request APIになります。これは単に決済入力フォームの置き換えになります。
実際に動作しているところは動画で見ると分かりやすいでしょう。
これで分かる点として、決済処理を開始した時にネイティブのフォームが表示されます。そしてあらかじめ入力してあった決済方法（クレジットカードなど）や配送先情報などが利用できます。入力の手間が省けるようになるので、ユーザビリティが高まります。
処理としては、次のようになります。 PaymentRequest のインスタンスを作成し、 show メソッドを実行するとネイティブに処理が移ります。
| // 支払い方法の設定 | |
| var supportedInstruments = [{ | |
| supportedMethods: ['basic-card'] | |
| data: { | |
| supportedNetworks: [ | |
| 'visa', 'mastercard', 'amex', 'discover', | |
| 'diners', 'jcb', 'unionpay' | |
| ] | |
| } | |
| }]; | |
| // 支払い情報について | |
| var details = { | |
| displayItems: [{ | |
| label: '元値', | |
| amount: { currency: 'JPY', value: '6500' } | |
| }, { | |
| label: '割引', | |
| amount: { currency: 'JPY', value: '-1000' } | |
| }], | |
| total: { | |
| label: '合計', | |
| amount: { currency: 'JPY', value : '5500' } | |
| } | |
| }; | |
| var request = new PaymentRequest(supportedInstruments, details); | |
| request.show() |
そしてこの処理はPromiseになりますので、 then で結果を受け取れます。
| request.show() | |
| .then(result => { | |
| return fetch('/pay', { | |
| method: 'POST', | |
| credentials: 'include', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(result.toJSON()) | |
| }) | |
| }); |
この時のresultですが、クレジットカード情報や配送先情報、配送オプションなどの情報が入ってきます。クレジットカード番号がそのまま入ってきてしまうので、今後のPCIDSS対応を考えると、ちょっと使いづらいかも知れません。PCIDSSへの対応をきちんと行っている企業であれば（大手のEコマースサービスなど）積極的に使っていきたいAPIになるでしょう。
今後、クレジットカード番号を取得しない形式での決済処理などにも対応していく予定のようです。決済システムを構築する上で、見逃せない技術になっていくはずです。
via Payment Request API で簡単・高速な決済を実現する | Web | Google Developers
コメントは受け付けていません。