Apple Pay on the Webについて

  • 22
    いいね
  • 0
    コメント

※2016/09/30時点の情報です。
いまのところApplePay利用予定がないため、更新予定はありません。。

「Apple Pay」2014年にiPhone 6/6 Plusより開始されました。
これまではNFCでのタッチ決済とアプリ内課金が可能でしたが、

日本でサービスが開始される2016年10月下旬にのタイミングでオンライン決済にも対応します。

2016年のWWDCで「Apple Pay on the Web」という発表がありました。
https://developer.apple.com/videos/play/wwdc2016/703/

Apple Pay on the Webでは「Apple Pay JS」というSDKを使用するします。
(FeliCaやネイティブアプリ用のSDKとは別)
https://developer.apple.com/reference/applepayjs

日本語ドキュメント
(2016年9月30日現在、すべてのページが翻訳されていません。Apple Pay JSについては全くない。)
https://developer.apple.com/jp/documentation/ApplePay_Guide/index.html

まだ公式ドキュメント、ブログ記事などが充実していないため、
こちらのデモ実装が参考になります。
https://github.com/norfolkmustard/ApplePayJS

デモ実装を動かしてみた

demoimplement.gif

Apple Payの導入に必要なもの

merchant ID

Apple Payのパートナーを表す一意の識別子。

Payment Processing Certificate

支払いデータを第三者の決済代行サービスへ登録する際に使用するそうです。
デモ作成時は決済代行サービスを使用しなかったので、詳細は不明です。

Merchant Identity Certificate

マーチャントID証明書。
Apple Payを使用するにはこの証明書ファイルをサーバに配置する必要があります。

証明書の作成方法はデモリポジトリのREADMEに記載されています。
In that third section "Apple Pay Merchant Identity"...より
https://github.com/norfolkmustard/ApplePayJS

開発に使用するSandbox環境

開発中テスト課金を行うために必要です。
iTunes ConnectにAppleIDを登録し、
Apple Payを有効化したSandboxテスターを準備します。
https://developer.apple.com/support/apple-pay-sandbox/

Sandboxテスターでテストする手順

実機でテストする場合:
実機のiCloudのアカウントをSandboxアカウントに変更する必要があります

エミュレーターでテストする場合:
多分設定は何もいらない・・・?
デバイスをiPhone6以降にすれば動くもよう。

決済の流れ

大まかに図に表すとこんな感じです。

6f286b04-cedb-b417-3880-2ac9405e5306.jpeg

1.ユーザーがApple Pay決済を行えるか確認

https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L38-L53

まずブラウザがApple Payに対応しているか確認します。
Apple Payに対応しているiOS10以降のSafariには、
Javascriptにwindow.ApplePaySessionオブジェクトが存在します。
if (window.ApplePaySession)がtrueならApple Aay対応ブラウザと判定します。

次にApplePaySession.canMakePaymentsWithActiveCard()メソッドでユーザーのiOSデバイスがApple Pay決済を行えるか確認します。(国の設定によってはApple Payが使えない、とか?)
WithActiveCardとある通りユーザーがWalletに有効なカードを登録しているかも確認します。

上記がOKであればブラウザに「Payボタン」を表示します。

2.Apple Pay Sessionの確立

※以降の処理はmerchant IDに登録した認証済みドメインでしか行えません。
公式ドキュメントを参照してmerchant IDの作成と、ドメインの登録を行ってください。
https://developer.apple.com/reference/applepayjs

「Payボタン」が押されたらSessionを確立します。

まずは商品情報などを含んだPaymentRequestオブジェクトを作成します。
https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L102-L115

var session = new ApplePaySession(1, paymentRequest);
というようにPaymentRequestオブジェクトを引数に渡し、sessionオブジェクトを作成します。
https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L117

session.onvalidatemerchant()で有効なマーチャントであるかの確認を行います。
ApplePayValidateMerchantEventオブジェクトが渡されるのでvalidationURL1プロパティを取得し、Session確立処理に入ります。

認証が成功したらsession.completeMerchantValidation(merchantSession)をコールし、
Sessionの確立を完了します。
https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L124

session.completeMerchantValidation(merchantSession)をコールしなければ、ユーザーは以後の支払い取引を行う事はできません。
https://developer.apple.com/reference/applepayjs/applepaysession/1778015-completemerchantvalidation

Sessionを確立したら自動的に、もしくはユーザーの操作で以下順序のイベントハンドラが起動します。

  1. session.onvalidatemerchant
  2. session.onshippingcontactselected
  3. session.onshippingmethodselected
  4. session.onpaymentmethodselected
  5. session.onpaymentauthorized

3. ShippingContactの取得 session.onshippingcontactselected()

配送方法を絞り込むため、ユーザーの国、地域情報などを取得します。
54c14730-0ee3-46fe-c2af-23a3a057c115.png

この段階ではプライバシーのため、Appleのみがユーザーの情報を知る事が出来ます。

4. 住所の入力、選択

sessionオブジェクトのイベントは発火しませんが、
住所の入力、選択を行うメニューも表示されます。

387ae63e-9d2f-6179-98b8-3e19acd1ba7b.gif

5. 配送方法の選択 session.onshippingmethodselected()

佐川やヤマトなど、配送業者の選択を行います。
ユーザーが以下の配送方法選択をクリックした時、session.onshippingmethodselected()が発火します。

1d942343-45fc-c9b2-8d0f-1753529fad51.gif

6.決済完了 session.onpaymentauthorized()

https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L205

「Pay With Passcode」ボタンをクリックするとsession.onpaymentauthorized()が発火し、
PaymentRequestオブジェクトの内容で決済が行われます。

33bfe71b-1331-073e-9b5d-fd63869ecedf.gif

このタイミングで住所など、ユーザーの情報が取得可能になるので、必要があればDBなどに記録します。

他の決済代行サービスを使用している場合は、paymentTokenの送信を行います。
https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L209-L221

session.completePayment(status)をコールして決済を完了します。

キャンセル session.oncancel()

Apple Payウインドウの「Cancel」ボタンを押すとsession.oncancel()が発火し、
キャンセルが行われます。
https://github.com/norfolkmustard/ApplePayJS/blob/master/index.php#L223-L230


  1. validationURLはマーチャントを認証するApplePayサーバです。https://apple-pay-gateway-cert.apple.com/paymentservices/startSessionなど