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

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

[杉本裕樹，マネーフォワード]

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

　次にサーバサイドの実装を見ていきます。今回はRuby on Railsを使いました。

class MerchantValidationsController < ApplicationController
  def create
    uri = URI.parse(params[:validation_url])
    cert_file = File.read(Rails.root.join('files').join('xxx.cert').to_s) # 先ほど作成したxxx.certを利用
    http = Net::HTTP.new(uri.host, uri.port)
    http.use_ssl = true
    http.cert = OpenSSL::X509::Certificate.new(cert_file)
    http.key = OpenSSL::PKey::RSA.new(cert_file)
    render json: http.post(uri.path, {
      merchantIdentifier: 'merchantID',
      domainName: 'mydomain',
      displayName: 'SHOP NAME'
    }.to_json).body
  end
end

　ここまで終わるとユーザーの端末に認証画面が表示されます。

ApplePaySessionのコールバックメソッドを追加

　また、フロント側に戻ってApplePaySessionのコールバックメソッドを追加します。キャンセル時・配送先選択時など、それぞれのアクションに応じたコールバックメソッドがあるので、それぞれ必要な処理を追加してください。

<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.oncancel = function(event) {}; // キャンセルを押した時に呼ばれる
    session.onpaymentmethodselected = function(event) {}; // 支払い方法選択時に呼ばれる
    session.onshippingmethodselected = function(event) {}; // 配送方法を選択された時に呼ばれる
    session.onshippingcontactselected = function(event) {}; // 住所選択時に呼ばれる
    session.onpaymentauthorized = function(event) {}; // 決済完了時に呼ばれる
    // ここまで今回追加
 
    session.begin();
  });
</script>

各決済プラットフォームとの連携

　最後に実際の決済処理についても触れておきます。決済処理はアップルの外部の決済プラットフォームと連携する必要があります。

「GMOペイメントゲートウェイ」のページから引用

　具体的には、「onpaymentauthorized」というコールバックメソッドで決済Tokenが発行されるので、それを使って決済プラットフォームと連携を行います。

session.onpaymentauthorized = function(event) {
  // event.payment.tokenでTokenを取得できる
};

　2016年11月現在、以下の決済プラットフォームがApple Payに対応しています。連携方法については各プラットフォームのドキュメントをご参照ください。

• GMO Payment Gateway
• PAY.JP
• SoftBank Payment Service
• VeriTrans

最新情報はアップル公式ドキュメントで

　本連載では、Apple Payを使った決済処理を実装してきましたがいかがでしょうか。Apple Payを使ったアプリ開発の一助になりましたら幸いです。

　Apple Pay自体の最新情報はアップル公式ドキュメント「Apple Pay - Apple Developer」の「Payment Platforms」をご参照ください。

　今回のサンプルコードは、こちらからダウンロードできます。

筆者紹介

杉本裕樹

田町のベンチャーで働くエンジニア。

仕事ではiPhoneアプリの開発やRailsを使ったWebサービス開発を行っている。最近のマイブームはUnityを使った3Dゲーム開発。

• ブログ