MacBook ProのTouch Barでもできる、Safari上でのApple Pay決済の流れとApple Pay JSの使い方：Apple Payアプリ開発入門（2）（2/3 ページ）

2016年10月25日から日本でも利用可能になったApple Payについて、JavaScriptを利用したWeb上での決済の流れを、実装フレームワークApple Pay JSの使い方とともに解説します

[杉本裕樹，マネーフォワード] PC用表示関連情報

LINE

Hatena

前のページへ | 次のページへ

Apple Pay JSでフロントエンドを実装する

　ここからは、実際の決済処理の実装を行っていきます。

購入ボタンの表示

　まずは購入ボタンの表示を行います。以下のような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>

Ruby on Railsでサーバサイドの実装