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

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

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

Apple Payで実装するWebサイトでの決済処理

今回の主な内容

• Safari上でのApple Payの決済フロー
• Web上でのApple Payの動作要件
• Apple Payを使ったWebサイトを作るための前準備
• Apple Pay JSでフロントエンドを実装する
  • 購入ボタンの表示
  • 購入ボタンを押した後の処理
  • 決済処理の検証
• Ruby on Railsでサーバサイドの実装
• ApplePaySessionのコールバックメソッドを追加
• 各決済プラットフォームとの連携
• 最新情報はアップル公式ドキュメントで

　2016年10月25日、ついにApple Payが日本でも使えるようになります。Apple Payとは、その名の通り、アップルが提供する“決済”の仕組みです。本連載はApple Payを利用した決済の実装方法について解説しています。

　前回の「ついに日本対応開始！ 開発者が知っておきたいApple Pay決済アプリの仕組みとPassKitの使い方」ではiPhoneアプリ上の決済方法を見ていきました。今回はJavaScriptを利用した、Web上での決済について解説します。

Pay on websites in Safari（Apple公式ドキュメント）から

Safari上でのApple Payの決済フロー

　まずはユーザー視点での決済フローを見ていきます。決済の流れは以下のようになります。

　商品ページ上にあるApple Payによる決済ボタンを押すとSafari上で決済処理画面が表示されます。

　それから少し時間を置いてiPhone上に決済確認画面が表示されます。ここで指紋認証を行えば決済完了となります。

　今回はiPhoneで認証を行いましたが、2016年10月に発表された新しいMacBook Proでも行うことが可能です。新しいMacBook Proの「Touch Bar」には指紋認証センサーが付いているため、それを利用して決済できます（参考：Apple、「Touch Bar」が付いた新MacBook Proを発表　なくなったファンクションキーに賛否の声）。

Web上でのApple Payの動作要件

　Web上でのApple Payによる決済を利用するにはmacOS Sierra以降のOSが必要となります。また、iOSで認証する場合はiOS 10以上が必要です。

　WebブラウザはSafariのみで利用可能となります。

　店舗側ではSSLの導入が必須になります。TLSの1.2が必要になりますので、実装する際はご確認ください。

　また、フロントエンドで利用するフレームワークは「Apple Pay JS」です。

Apple Payを使ったWebサイトを作るための前準備

　まずは決済に必要なMerchantIDを取得します。iOSアプリのIn-App Purchaseと違い、1つあれば複数の商品に対応できるので商品分作る必要はありません。

　「Member center」にアクセスして「Certificates, Identifiers, and Profiles.」に移動します。その画面の右上にある「＋」ボタンを押してMerchantID作成します。

「Apple Pay JS」から引用

　続けてMerchantIDにApple Payを導入するサイトのドメインを追加します。先ほど作ったMerchantIDを選択、Editボタンを押して編集画面に移動します。編集画面には「Merchant Domains」という項目があるので、そこにドメインを追加します。

「Apple Pay JS」から引用

　続けてドメインの所有権の確認を行います。認証用ファイルをダウンロードして「https://mydomain/.well-known/apple-developer-merchantid-domain-association」でアクセスできるように設置します。設置後に「Verify」ボタンを押すことで確認完了となります。

「Apple Pay JS」から引用

　次はMerchant Identity Certificateを作成します。キーチェーンを起動して、「証明書アシスタント」の「認証局に証明書を要求」を選択します。

　入力画面では、「ユーザーのメールアドレス」と「CAのメールアドレス」に自分のメールアドレス、通称に自分の名前を入力します。要求の処理は「ディスクに保存」を選択します。そのまま進んでいくと「CertificateSigningRequest.certSigningRequest」が作成されます。

　今作ったファイルを使って「Merchant Identity Certificate」を作成します。先ほどドメインを設定した箇所の下に「Merchant Identity Certificate」という項目があるので、「Create Certificate」ボタンを押します。

「Apple Pay JS」から引用

　その先でCSRファイルを求められるので、先ほど作った「CertificateSigningRequest.certSigningRequest」をアップロードします。すると証明書が作られるので、ダウンロードしてキーチェーンに追加します。

　最後に今作った証明書を元にSSL用のファイルを作成します。キーチェーンを開いて今作成したファイルを右クリック、「○○（証明書名）を書き出す」を選んでください。

　書き出したファイルを下記コマンドでcertファイルに変換します。

openssl pkcs12 -nodes -in xxx.p12 -out xxx.cert