Web上でのApple Payの利用開始

ようこそ Apple Pay E-Commerceチームの Tom Grantです Apple Payのサービス開始以来 様々な技術チームと協力して マーチャントおよびペイメント ゲートウェイの立ち上げや Apple Pay eコマースの統合を お手伝いしてきました 本日は 私たちが長年にわたって 培ってきた重要な知識と ベストプラクティスを共有するとともに Payment Request APIを使用して Apple PayをWebサイトに 統合する方法を説明します Apple Payは2014年10月に 米国で提供が開始されました それ以来 目覚ましい進歩を 遂げてきました Apple Payは現在 世界の75を超える 市場で導入されており 何百万ものブランドで アプリやWebサイトに 統合されています Apple Payの機能では デバイス固有のトークン化された カード認証情報を使用します Apple Payのトランザクションは 通常のクレジットカードや デビットカードと同様に処理されます AppleではApple Payの決済処理は 行わないため ペイメントサービス プロバイダと 連携する必要があります これは現在オンライン決済で プロバイダと同じでも構いません 決済プロセスについて 詳しく理解するために Web上でのApple Payの トランザクションの仕組みについて 見ていきましょう Apple Payボタンをクリックすると トランザクションフローが開始され ユーザーが詳細情報を選択し確認できる ペイメントシートが表示されます ユーザーがトランザクションの 認証を行うと 支払いデータが暗号化され Webサイトに渡されます Webサイトからマーチャントサーバに Apple Payペイメントオブジェクトが 送信されます サーバがペイメントオブジェクトを受信すると 処理のためにデータを ペイメントサービスプロバイダに 送信します ペイメントサービスプロバイダは 支払いデータを復号化し 認証メッセージをフォーマットして アクワイアラに送信します アクワイアラは支払い情報を ペイメントネットワークに送信します ペイメントネットワークはデータの トークン化を解除し カード番号をイシュア（発行元）に送信して 承認を求めます その後 決済確認が チェーン経由で返送され ユーザーにはペイメントシートの チェックマークで 通知されます 多くの処理が行われているように 感じますが 実際にはこのすべてが ほんの数秒で実行されます Web上でのApple Pay トランザクション中に 背後で実行されている処理が わかったところで 今度はユーザー側の体験を 見てみましょう 確認するために applepaydemo.apple.comの Apple Payデモサイトに移動します このサイトはWeb上での Apple Payを 理解するための便利なリソースであり カードに請求されることなく トランザクションを 設定してテストできます 統合に取り組んでいる最中に 問題が発生した場合 Apple PayデモWebサイトは 原因を解明するのに 最適な場所となります このツールでは 配送情報 エラー処理方法など Apple Payの様々な設定に 対応しています ここではシンプルに デフォルト設定のままにして 基本的なトランザクションが どのようなものであるか 見てみましょう Apple Payボタンをクリックすると 開始します 画面にペイメントシートと呼ばれる モーダルが表示されます ユーザーは支払いオプションを選択し トランザクションの認証を行います 処理のために トランザクションが送信され 結果がペイメントシートの 一番下に表示されます 支払いが完了すると ペイメントシートが閉じます このように簡単に 決済のサンプルを完了できました 一般的なApple Payトランザクションを 確認できたので Apple Payを許可するよう 設定してみましょう Apple Payと Payment Request APIを 統合する方法を見ていきます Payment Request APIは ユーザーから支払い情報 配送先住所 連絡先情報を 収集するための クロスブラウザ標準です 収集した情報を使用して 注文を処理できます Payment Request APIでは セキュリティ 一貫性 アクセシビリティも確保しながら 決済プロセスをシンプルにできます Apple PayとApple Pay JavaScript APIを 統合済みであれば このビデオの手順に 見覚えがあると思います では Apple Payを統合するために 必要な手順を見ていきましょう まず Apple Payを受け付けるための 環境設定に必要な手順を説明します 次に ペイメントリクエストの作成から トランザクションの完了まで Apple Payの実装方法について 説明します 最後に Apple Payの実装を テストするのに使用できる ツールをいくつか紹介します 盛りだくさんの内容になっており セッション終了時には Apple PayをWebサイトと 統合する方法について 理解が深まっていることでしょう さっそく 環境を設定していきましょう まず ペイメントサービスプロバイダで Apple Payのトランザクションが サポートされていることを確認します 独自のSDKを通じてApple Payを 提供している場合もあり これによって信頼性の高い簡単な 方法でApple Payをサイトに 追加できます サーバで有効なSSL証明書があり TLSバージョン1.2以降を 使用できることを確認します Apple Payサーバと通信するために 必要であるためです 最後に Apple Payが表示される すべてのページがhttps://経由で 表示されることを確認します これらの点を確認できたら Apple Payの設定で使用する 認証情報の作成を開始できます 認証情報を作成する方法は 主に2通りあります Apple Developerポータルを使用して ご自身で作成し管理することも ペイメントサービスプロバイダに 直接登録することもできます Webサイトに必要な 特定の設定を把握するには ペイメントサービスプロバイダに 問い合わせて 詳細な情報を入手してください 次の手順では Apple Developerポータルを使用して 認証情報を作成し 管理する方法をお見せします 皆さんの組織がApp Storeで アプリを配信している場合 すでにApple Developerアカウントを お持ちの可能性があります アカウント管理者に App Store Connectの 「ユーザーとアクセス」セクションで ご自身を 追加してもらうよう依頼してください まだアカウントを お持ちでない組織の場合は https://developer.apple.com/jp/ で登録してください すべてのApple Pay トランザクションの中心にあるのが マーチャントIDで Apple Payでの決済を許可できる 組織を識別するために使用されます これは各マーチャントに一意であるため 逆ドメイン名スタイルの文字列を 使用することをおすすめします 次に ペイメントプロセッシング 証明書を作成します これはユーザーのデバイスから渡される 支払いデータをセキュアに暗号化および 復号化するために使用されます 多くの場合 ペイメントサービス プロバイダがトランザクションを 復号化するため ペイメントサービスプロバイダから 証明書を作成するための 証明書署名リクエストを受け取ります 次に マーチャントID証明書を作成します この証明書はユーザーが 支払いを開始した時に 皆さんの組織がマーチャントであることを 確認するために使用します 最後に Apple Payボタンを 表示するWebサイトの ドメインとサブドメインを 登録して確認します この操作を行うには Apple Developerポータルの 「Merchant Domain」セクションから 確認対象の完全修飾ドメイン名を入力します ファイルが生成されるためダウンロードして サーバ上の.well-knownパスに配置します 「Verify」ボタンをクリックすると Appleサーバがその場所に接続して 存在を確認します 環境を設定して マーチャントIDを作成したら Apple PayをWebサイトに 実装できる状態になります では構築していく内容について 理解を深めるため Web上でのApple Pay トランザクションを 詳しく見ていきましょう ユーザーがApple Payボタンを クリックまたはタップすると 開始されます Webサイトでトランザクションの すべての詳細情報を含む ペイメントリクエストが作成され マーチャントサーバに接続して 新しいセッションが要求されます マーチャントIDが確認されると Apple Payサーバで マーチャントセッション オブジェクトが生成されて 返されます このオブジェクトがサイトに戻され 検証プロセスが完了します ユーザーはペイメントシートで 詳細情報を確認し Face IDかTouch ID またはパスコードを使用して トランザクションの認証を行います 支払いデータがユーザーの デバイスで生成され Apple Payサーバにセキュアに送信されて マーチャント固有の ペイメントプロセッシング証明書を 使用して暗号化されます その後 支払いデータは Webサイトに返されます 次にデータはペイメント サービスプロバイダに送信され 復号化されて処理されます ペイメントサービスプロバイダによって 決済ステータスが返されます トランザクションが成功したかどうかが Webサイトでユーザーに通知され 成功した場合は ペイメントシートが閉じます プロセス全体は Apple Payの表示 マーチャントの検証 決済の認証 決済処理の4つの主要な段階に 分けることができます 最初は Apple Payの表示です これには Apple Payボタンと ペイメントシートの表示が含まれます 次はマーチャントの検証です ここでは双方向TLSを使用して Appleとマーチャントサーバ間で 証明書が交換されます 次が決済の認証です ここでは決済が確認されて生成されます 最後が決済処理の段階です これは大部分がマーチャントと ペイメントサービスプロバイダ間で 行われます これらの手順が Web上での一般的な Apple Payの基本的な決済処理です このフローを使用して Apple Payの 実装アプローチを構築していきます まずWebサイトに 支払い方法として Apple Payを表示しましょう ユーザーが対応デバイスを 使用している場合は常に Apple Payボタンを 表示する必要があります ユーザーのデバイスがApple Payに 対応しているかどうかを確認するには ApplePaySession.canMakePayments を呼び出します どのボタンのタイプがWebサイトでの 購入手続きに最適であるかを 検討することが重要です Apple Pay APIには Webサイトで使用できる 多数のボタンタイプや 様々なスタイルが 用意されているため 購入フローに最適な ボタンを 選択できます Apple承認済みのフォントや色 キャプション スタイルを使用するために システムで用意されている ボタンを使用してください ボタンはJavaScriptかCSSの いずれかを使用して サイトにインポートでき スタイル タイプ ローカリゼーションは 属性を使用して 簡単に設定できます JavaScript SDKを使用して ボタンを追加するには コンテンツ配信ネットワークから ボタンスクリプトを読み込みます 角の丸みなど CSSのプロパティを設定することで ボタンを現在のUIに 合わせることができます 最後に スタイル タイプ ロケールなどの属性を設定して ページにApple Payボタン要素を 追加します この例では 黒いボタンスタイルに キャプションを付け 「Check Out with Apple Pay」と ドイツ語にローカライズしました 使用できるApple Payボタンの オプションを確認するには 先ほど紹介した Apple Payデモサイトに戻ります ここですばやく簡単に Apple Payボタンの属性や CSSプロパティを変更し ページ下部で結果を リアルタイムで表示できます この方法を使用で すばやく簡単に Apple Payボタンを生成し コードをコピーして Webサイトにペーストできます ここではボタンのタイプを 選択できます 今回は黒を選びました 次に 状況に合わせて 最適なタイプを選択します 最後の属性は言語です 先ほどの例のようにドイツ語に ローカライズしてみましょう その下には ボタンの幅や高さ 角の丸み パディングなどの CSSプロパティがあります ボタンの設定は オプションのすぐ下にある コードブロック内で 表示して更新できます このコードをコピーして 既存のコードにペーストできます 利用できるペイメントリクエスト タイプは多数あり トランザクションに関する追加情報を ユーザーに表示できます 一般的なトランザクションは 一括払いですが Apple Payではサブスクリプションなどの 定期払い ストアカードへのチャージなどの 自動補充支払い 予約注文などの後払いといった ペイメントリクエストオプションも 提供されます ここでは 一括払いの ペイメントリクエストを作成する方法を 見ていきます Payment Request APIによって Apple Payペイメントを許可するには まずIDを使用して 支払い方法として 指定する必要があります この場合は apple.com/apple-payです IDに加えて 関連データも含める必要があります これにはバージョン番号が含まれます Apple Payのすべての 最新機能を搭載するために 利用可能な 最新バージョンを 使用することをおすすめします 最新情報は developer.apple.com/jp/をご覧ください 先ほど設定した マーチャントID サイトでサポートする機能や ネットワーク決済が処理される 国のコードも必要です 互換性のあるクリプトグラムが PSD2の市場で 生成されるように これらを正しく設定することが 特に重要です ユーザーの請求先住所と配送先住所の いずれか または両方で使用するために 必要な連絡先情報を 任意で含めることができます ここでは ユーザーの配送先住所を リクエストします ただし ユーザーのデータを リクエストする場合は 信頼とプライバシーを考慮することが 非常に重要です トランザクションを提供するのに 必要な情報のみをリクエストし Apple Payで 最善のコンバージョン率を 確保できるようにしましょう 次に トランザクションの 詳細オブジェクトを 作成する必要があります これには表示項目として 税金や手数料 割引などを含めるほか ユーザーが注文の 配送方法を選択できる 配送オプションがあり これには エクスプレスチェックアウト オプションを提供するとよいでしょう そのほか 合計金額には 通貨と請求金額が含まれ マーチャント名を含む ラベルもあります マーチャント名の値は ユーザーがビジネスを 連想できる 名前にする必要があり ペイメントシートに記載される 「pay」の文字の横に 表示されます 詳細オブジェクトは トランザクションの修飾子を 含める場合にも 使用します 修飾子には 特定の条件下でのみ適用される トランザクションの詳細を含めます 例えば クレジットカードでの支払い時に 割増手数料を 追加する場合に使用します サブスクリプションなどの 定期払いを リクエストする場合も ここで定期払いの リクエストの詳細を含めます これらすべての要素を 組み合わせて 新しいペイメントリクエストを 開始できます 新しいペイメント リクエストオブジェクトを 作成し コンストラクタにメソッド 詳細 オプションを渡します 先ほど説明したように Apple Payの大きな メリットの1つが コンバージョン率の向上に役立つ エクスプレスチェックアウトオプションを 使用できることです できる限りシームレスな体験を 実現する必要があります そのためには Apple Payボタンを表示する前に ユーザーが支払いに利用できるカードを 保持していることを 確認する必要があります 確認にはペイメントリクエストの canMakePaymentメソッドを 使用できます このメソッドでは ユーザーが Apple Payがサポートしている デバイスとブラウザを 使用していることが確認され ユーザーが支払いに利用できる カードを保持している場合にのみ trueに解決されます ユーザーがApple Payボタンをタップしたら showメソッドを使用して ペイメントシートを 表示させる必要があります ペイメントシートが現れると 処理のアニメーションが表示され マーチャントの検証プロセスが すぐに開始されます プロセスについて詳しく 見ていきましょう マーチャントの検証プロセスは 毎回のWeb上での Apple Payトランザクションで 実施され 決済が正規の 認証済みマーチャントによって 処理されていることを確認するための 重要なセキュリティ対策となります これにより不正なトランザクションから ユーザーを保護し 決済プロセスの全体的なセキュリティを 向上できます マーチャントの検証プロセスには マーチャントWebサイト マーチャントサーバ Apple Payサーバの 3つが関係します Apple Payボタンを押すと マーチャントの検証が 自動的にトリガされ onmerchantvalidationハンドラが 呼び出されます このハンドラ内で 静的ホスト名の apple-pay-gateway.apple.comを 検証URLとして使用し マーチャントサーバの エンドポイントへの 呼び出しを行って 新しいセッションの作成を 依頼する必要があります 証明書をセキュアな 状態に保つため Apple Payサーバへの リクエストは 直接ブラウザからではなく マーチャントサーバから 送信される 必要があります これによりマーチャントID証明書が セキュアな状態に保たれ ユーザーや他の関係者と共有されず Webサイトが模倣されるのを 防ぐことができます 新しいセッションをリクエストする場合 マーチャントサーバで セッションリクエスト ペイロードが作成され 双方向TLSを使用して Apple Payサーバに書き込まれます この接続に使用される証明書が マーチャントID 証明書となります マーチャントIDが検証されると 新しいマーチャントセッション オブジェクトが生成され サーバに返されます このオブジェクトは決して 変更しないでください 変更するとマーチャントの 検証に失敗します その後 マーチャントセッション オブジェクトがブラウザに返されます マーチャントセッションオブジェクトを completeメソッドに渡すと マーチャント検証プロセスが 完了します システムによってユーザー インタラクション用の ペイメントシートが有効になります このプロセスをコードで実行する 方法を見てみましょう Apple Payボタンが 押されるとすぐに onmerchantvalidation ハンドラがトリガされます このハンドラ内で サーバのエンドポイントへの 呼び出しを行って マーチャントセッションの処理を リクエストする必要があります ブラウザがリクエストを受け取ると マーチャントセッションオブジェクトが JSONとして渡され 完了のコールバックに使用されて プロセスを完了させます マーチャントの検証に成功した場合 ペイメントシートが更新され 支払いを確認できる 状態になったことがユーザーに示されます マーチャントの検証に失敗した場合 ユーザーがApple Payボタンを クリックした直後に ペイメントシートが閉じます マーチャントの検証が うまくいかない場合は Safariに組み込まれている Webインスペクタツールの コンソールを使用して マーチャントの検証中に見られる エラーやオブジェクトを記録できます 使用したことがない方にご説明すると Webインスペクタは WebページやWeb拡張機能 WKWebViewのデバッグや調査を行うための 強力なツールセットを備えています Macに搭載されている Webインスペクタは 接続されているあらゆるデバイスで 実行されている コードのデバッグに使用できます Webインスペクタについて詳しくは WWDC23の 「Safariのデベロッパ向け機能の 再発見」をご覧ください マーチャントの検証について 説明したので 決済の認証について 詳しく見ていきましょう ユーザーがペイメントシートの フィールドを変更または更新すると これらの選択内容がイベント ハンドラを通じて共有されるため Webサイトがユーザーの入力に 応答できます ハンドラの例としては クーポンコードなど ユーザーが支払い方法を 選択した場合 選択された配送オプションが 更新された場合 配送先住所が 変更された場合などが あります ブラウザでこれらのいずれかの ハンドラが呼び出されると 30秒間のうちに処理を行って updateWithコールバック関数を 呼び出します 30秒の期間内に配送先住所の 有効性を確認するためのサーバ呼び出しが 行われることを確認します この時間内にコールバック関数が 呼び出されない場合は 決済を完了できなかった ことを示すメッセージが ペイメントシートに 表示されます onshippingaddresschange ハンドラについて 詳しく見ていきましょう ユーザーがトランザクションの 認証を行う前に 編集後の配送先の 連絡先情報が マーチャントWebサイトに 共有されます プライバシー保護の目的から この情報には 税金や送料など 最終的なトランザクションコストを 計算するのに必要な データのみが含まれます この情報を受け取ったら 該当する 合計金額を計算できます ユーザーが入力した住所または 連絡先情報に問題があると 判断した場合はカスタマイズした エラーメッセージを 作成することもできます エラーメッセージを作成することで 注意が必要なフィールドを 強調表示したり 明確で実用的な ガイダンスを提供したりできるため ユーザーはすばやく簡単に 問題を解決して トランザクションを完了できます Apple Payから 受け取ったデータは Webサイトの手動入力 フィールドに対する 現在の処理と同じ 検証処理を実行できます ユーザーの住所または 連絡先情報に問題があると 判断した場合は ApplePayErrorを使用して カスタマイズ エラーメッセージを 作成できます ApplePayErrorで指定する 詳細情報には ペイメントシートでエラーのある 該当領域を 特定するエラーコード ペイメントシートでエラーのある 具体的なフィールドとして 連絡先フィールド ペイメントシートに 表示される カスタムメッセージを含めます ApplePayErrorは イベントからのコールバックとともに 更新に返されます ユーザーがFace IDやTouch ID またはパスコードを使用して 認証を行った後で ユーザーの住所や 連絡先住所の全体を 確認することもできます ユーザーの住所情報に 問題がある場合は ユーザーがトランザクションを 再試行できるようにし 修正が必要な問題を 強調表示できます エラー配列にエラーオブジェクトが 追加されている場合は 検証規則で想定される 形式で情報が入力されるまで ユーザーが支払いを 実行できないように設定できます ユーザーが正常に トランザクションを完了できるよう 住所の形式は できる限り柔軟に設定することを おすすめします また Apple Payペイロードには トランザクションの 処理に必要な 情報が含まれている ペイメントトークンがあります ペイメントトークンを 復号化する場合は この時点で行います ほとんどの場合 ペイメント サービスプロバイダが 復号化プロセスに 対応できるため プロバイダに処理対象のトークンを 直接送信しても構いません このトークンには トランザクションに使用される カードの表示名のほか ネットワークとカード番号の 下4桁の数字も含まれます これはデバイスに固有の トークンとは異なるため トランザクションに 使用されたカードを ユーザーに示すために 注文確認Eメールや レシートの中で使用する必要が あります 以上が決済の 認証に関する説明でした 最後に 決済処理について 見ていきましょう ペイメントサービス プロバイダによって プロセスが完了されたら 結果をcompleteメソッドに渡して ユーザーに結果を 通知する必要があります トランザクションが 成功した場合はsuccessを渡します これによりペイメントシートが 更新されてチェックマークが付けられ シートが閉じて Apple Payでの決済プロセスが完了します 決済に失敗した場合は レスポンスハンドラにfailを渡します ペイメントシートに 感嘆符を表示して ユーザーに対して再試行を 促すメッセージを表示するか ペイメントシートを 消します これでApple Payを 実装するために必要な 4つの主要手順を 説明しました しかしテストについて述べることなく 実装の説明を 終わらせることはできません 最後にソリューションを テストする方法を簡単に見ていきましょう テストを行うには Apple PayのSandbox テストサイトに移動します Sandboxの クレジットカード番号を デバイスにプロビジョニングして フロントエンドの統合と 復号化プロセスをテストできます Sandboxのクレジットカードは 本番環境での決済処理に送信しても 正常に処理できませんので ご注意ください Sandboxのクレジットカードは テストに非常に便利です ただし 実装を本番環境に プッシュする前に 実際のカードでテストを 行うことをおすすめします 実際のカードを使ってテストを行うことで 決済プロセスのエンドツーエンドの フロー全体が想定通りに 動作することを確認できます 以上でテストと Web上でのApple Payの 利用開始に関する概要を終わります 設定から実装 Sandboxでのテストまで 盛りだくさんの内容でした 最後に Apple Payの 統合に継続的に取り組む方に 次のステップを紹介しますので お役立てください まずは Apple Payのデモサイトに アクセスしてください Apple Payソリューションを 構築する際の 出発点として最適です 「Merchant Integration Guide」 もご確認ください 十分に計画して Apple Payを実装するための 各手順について 詳しく説明しています 最後に「ヒューマンインターフェイス ガイドライン」の Apple Payのセクションもご確認ください Apple Payとペイメントシートを Webサイトで表示する方法に関して ユーザーインターフェイスの 詳しいガイダンスが 記載されています ご視聴ありがとうございました Apple Pay統合のご成功を お祈りしています