ここからは、実際の決済処理の実装を行っていきます。
まずは購入ボタンの表示を行います。以下のようなhtmlファイルを作成します。使われている「flower.jpg」は、こちらからダウンロードしてください。こちらは、「ぱくたそ」さまのものを利用しております。
<html> <head> <meta charset="UTF-8"> </head> <body style="text-align: center;"> <img src="/flower.jpg" width="375" height="282" /> <h3>ひまわり</h3> 商品の説明が入ります○○○○○○○○○○○○○○○<br /><br /> 1,200円<br /><br /> <button class="pay-button" lang="jp" style="-webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; display: none; " /> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript"> if (window.ApplePaySession) { if (ApplePaySession.canMakePaymentsWithActiveCard("MerchantID")) { $(".pay-button").show(); } } </script> </body> </html>
Safariでこのページを表示すると、商品画面と購入ボタンが表示されます。
次は購入ボタンを押した後の処理を追加します。先ほど作ったファイルのscriptタグ内を以下のように修正してください。
<script type="text/javascript"> if (window.ApplePaySession) { if (ApplePaySession.canMakePaymentsWithActiveCard("MerchantID")) { $(".pay-button").show(); } } // ここから今回追加 $(".pay-button").click(function() { // 商品の情報 var request = { countryCode: 'JP', currencyCode: 'JPY', supportedNetworks: ['visa', 'jcb', 'masterCard'], merchantCapabilities: ['supports3DS'], total: { label: 'ひまわり', amount: '1200' } }; var session = new ApplePaySession(2, request); session.begin(); }); // ここまで今回追加 </script>
この状態でボタンを押すとWebブラウザ上に以下のような画面が表示されます。
次は決済処理の検証を行います。検証処理が終わると、ユーザーに指紋認証画面が表示されます。
scriptタグ内を下のように変更してください。認証処理はサーバサイドで行うため、サーバサイドへの通信を行っています。
<script type="text/javascript"> if (window.ApplePaySession) { if (ApplePaySession.canMakePaymentsWithActiveCard("MerchantID")) { $(".pay-button").show(); } } $(".pay-button").click(function() { var request = { countryCode: 'JP', currencyCode: 'JPY', supportedNetworks: ['visa', 'jcb', 'masterCard'], merchantCapabilities: ['supports3DS'], total: { label: 'ひまわり', amount: '1200' } }; var session = new ApplePaySession(2, request); // ここから今回追加 session.onvalidatemerchant = function (event) { $.get("/merchant_validation", {validation_url: event.validationURL}, function(res) { session.completeMerchantValidation(res); }); } // ここまで今回追加 session.begin(); }); </script>
Copyright © ITmedia, Inc. All Rights Reserved.