ウォレットとApple Payの新機能

「ウォレットとApple Payの新機能」へ ようこそ Tanyaです Mashaです 今日は今年導入された ウォレットとApple Payの すべての新機能と機能強化について 見ていきます ここ数年で導入されたApple Pay Laterや 注文のトラッキングなどの新機能と 機能強化は デベロッパ向けに 既存の機能をさらに改善するものでした 今年は Apple Payの使用方法のアップデートと チケット発行に関するユーザー体験の アップグレードを中心に紹介します 最初に紹介する決済機能のアップデートは WebでのApple Payに関するものです ご存知のように Apple Payは 店舗 アプリ Webで利用可能な 最もシームレスかつ安全でプライバシーも 守れる決済方法です iOS 18では コンバージョン率を向上させ Appleエコシステム以外のデバイスを含む ブラウザが搭載されたあらゆるデバイスに Apple Payのユーザー体験を 拡張することができます iOS 18では iPhoneでコードをスキャンするだけで Safari以外のブラウザでも Apple Payを使用して 安全かつプライバシーを守りながら 決済を完了することができます コードを少し変更するだけで この新しいトランザクションフローが 機能します このアップデートを できるだけシンプルにするために お使いのコードで 次の2つの点をご確認ください まず Apple Pay JavaScript SDKを インポートするか 既存のバージョンを1.2.0以降に アップデートします ページがロードされたらすぐに Apple Payを利用できるように HTMLドキュメントのheadタグに これを配置することをおすすめします 統合をテストしたい場合は デベロッパドキュメントへのリンクで ベータ版テストについてご確認ください 次に CSS実装のバリアントではなく JavaScript SDK Apple Payボタンを 使用することが重要です このコンポーネントを使用することで Safari以外のブラウザもサポートできます 詳しくはデベロッパドキュメントへの リンクで Apple Payボタンの表示と カスタマイズ方法についてご確認ください この機能について もう1つ注意点があります canMakePaymentsWithActiveCard()が 非推奨となり 新しいapplePayCapabilities() APIに置き換えられます これまでApple PayをWebサイトに 表示するかどうかを判断する際に ブラウザ検出やユーザーエージェント検出を 使用してきた場合 このAPIは そのような問題に対して 明確で普遍的なソリューションを提供します canMakePayments() APIのみを 決済ロジックで使用している場合は それ以上変更することなく 使い続けることができます canMakePayments()がtrueを返す場合は Apple Payボタンが 常に表示される必要があります 決済ページやプロダクトページで Apple Payボタンを優先したり デフォルトにしたりする場合は 新しいapplePayCapabilities() APIを 使用する必要があります より正確で詳細な応答を得られるように applePayCapabilities()の呼び出しでは 次のいずれかの値を持つ paymentCredentialStatusキーが含まれた オブジェクトが返されます 1つ目の値は paymentCredentialsAvailableです デバイスがApple Payをサポートしており Web決済の条件を満たす 有効なカードがウォレットに あることを示しています その場合 最初の支払いオプションとして Apple Payボタンの表示が必要です

2つ目の値は paymentCredentialsUnavailableです デバイスで決済を行うことはできますが 決済を行うことができる 有効なカードがウォレットにないことを 示しています そのため Apple Payボタンを 表示するべきではありません paymentCredentialStatusUnkownの値は Apple Payをサポートしていますが 具体的なカード情報が 提供されていないことを示しています この値はSafari以外のブラウザやApple エコシステム以外のデバイスで発生します その場合も Apple Payボタンを 表示する必要がありますが 表示順序はデベロッパに委ねられます Apple Payボタンを表示すべきではない 最後のシナリオは paymentCredentialStatusが明示的に applePayUnsupportedである場合です Apple Payボタンをいつどこに 表示するかについて詳しくは 「Acceptable Use Guidelines for Apple Pay on the Web」または ヒューマンインターフェイスガイドラインを ご覧ください では実際の表示を確認するために ペットショップの例を見てみましょう

これはクパティーノにある 地元のペットショップのWebサイトです 私がSafariブラウザを使っておらず Macでもないことに注目してください 決済ページに移動します 決済時にApple Payボタンを クリックすると スキャン可能なコードが 画面に表示されます iPhoneを取り出し カメラでコードをスキャンします バックグラウンドで使用されている 決済システムは 通常のiPhone Apple Pay トランザクションと同じです デベロッパにとって これが何を意味するかというと ユーザーが選ぶデバイスやブラウザについて 心配する必要がないということです 受け取ることができる決済応答データも 通常のSafari Webトランザクションと 同じです Safari用に記述した既存のコードを 修正することなく すべてのブラウザで動かすことができます ダブルクリックして確認します

するとご覧のように トランザクションが完了します ここでヒントとベストプラクティスを 紹介します 先ほどもお話ししたように できるだけ早く実行されるように JavaScriptファイルをheadタグ内で インポートすることが重要です JavaScript SDKで提供される Apple Payボタンを必ず使用してください このボタンのCSS実装は Safari以外のブラウザをサポートしません Apple Pay JSの代わりにW3C APIで Apple Payを実装した場合 Payment Request APIは すべてのブラウザではサポートされません 最後に 既存の canMakePayments() APIを使うか applePayCapabilities APIの新しい paymentCredentialStatusオブジェクトで Apple Payボタンをいつどこに 表示するかを判断します 次に紹介する 今年行われたアップデートは 資金移動機能のWebへの拡張です これは昨年のプレゼンテーションで 使用した図です Apple Payに口座への資金追加用APIを 導入したことを紹介しました 今年からiOS 18とmacOS 15で Web上での資金移動を 行えるようになりました 資金移動を使用すると ユーザーは貯蓄口座や銀行口座から Apple Payに登録した 任意のユーザーカードに お金を引き出せるようになります まず 決済処理業者に 支払いをサポートしているかどうか 確認する必要があります Web APIでのApple Payに 精通している場合 disbursementRequestは 他のタイプのPaymentRequestと 同じように機能します iOSでの資金移動の場合と 同じルールが適用されます これについては 昨年の「What’s new in Wallet and Apple Pay」をご覧ください 簡単なコード例を見てみましょう 機能リストにsupports3DSが 含まれている限り 一般的な資金移動をサポートするのに 新しい機能は必要ありません 即時資金移動オプションを サポートする場合は supportsInstantFundsOutを paymentMethodData内の マーチャント機能リストに 追加する必要があります これにより 即時資金移動に関連した追加料金を あとで指定できるようになります 資金移動には 商品の発送がないため 必ず決済オプションで requestShippingをfalseに設定し ユーザーが混乱しないようにします ペイメントリクエストを作成するには モディファイアリスト内で disbursementRequestオブジェクトを 指定する必要があります オプションでリクエストに requiredRecipientContactFieldsを含め ペイメントシートでユーザーから どのような情報を取得する必要があるか 指定することができます requiredRecipientContactFieldsが 必要ない場合でも 空のdisbursementRequestオブジェクトを 含める必要があります

disbursementRequestオブジェクトにある additionalLineItemsは ペイメントリクエストの 既存の構造に従います 1つ目の項目は ユーザーの口座から差し引く 合計金額のサマリーです

2つ目の項目は 即時資金移動を リクエストする場合にのみ適用され トランザクションの料金を 指定します 明細項目タイプは instantFundsOutFeeにしてください 即時資金移動に 手数料を請求しない場合でも この項目を含める必要がありますが その場合は金額をゼロに設定します 最後の項目は ユーザーのカードに送金される金額です この項目タイプは disbursementとなります

これは ユーザーから見た 資金移動リクエストの ペイメントシートです ユーザーは送金先のカードを 選択することができます そのカードで受け取る金額が表示されます

処理中にエラーが発生する場合は 追加の4つ目のフィールドで ApplePayErrorオブジェクトを使用し エラーが適用される トランザクションのタイプを 指定することができます ユーザーの支払いカードでは資金移動を 受け取ることができないと 決済処理業者が判断した場合 unsupportedCardエラーを使用します ユーザーの連絡先情報に関連した 問題が発生している場合は recipientContactInvalidエラーを 使用します 今日最後に紹介する 決済機能のアップデートは マーチャントカテゴリコードの サポートです マーチャントカテゴリコードは 事業者が提供する商品や サービスの種類に基づいて 業種を分類するために使用されます 支払いカードが対応していない トランザクションカテゴリもあります 通常 その場合はマーチャント側で トランザクションの処理が失敗します 今年からペイメントリクエスト内で マーチャントカテゴリコードを 指定できるようになりました これを行うと 有効な支払いカードしか ペイメントシートに表示されないため 意思決定がスマートになり トランザクションの成功率が向上します Apple PayはISO 79450に準拠した マーチャントカテゴリコードに対応しています 自社のマーチャントカテゴリコードが 不明な場合は 決済処理業者に問い合わせることができます 今日紹介する決済機能のアップデートは 以上ですが まだ終わりではありません Mashaが素晴らしいチケット発行の アップデートについて紹介してくれます ありがとう Tanya 今年登場したウォレットの イベントチケットの新機能を紹介します チケット発行体験を より豊かなものとするために ウォレットのチケットの ビジュアルのアップグレードや イベントの詳細情報に アクセスするための新しいイベントガイド 天気やカレンダーなどのアプリとの システム統合強化も行われています PKPassesでは コンサートやスポーツ観戦 さらにはお祭りや会議といった 長期間開催されるイベントなど 幅広いイベントを表すことができます 今年は それらのイベントを代表して NFCイベントチケット体験の向上に 重点が置かれました パスが新しい処理を受けるためには パスのコンテンツの構造に関する いくつかの要件を満たす必要があります まず pass.jsonがセマンティックタグ付きの 一連の必須情報を提供する必要があります セマンティックタグとは 機械可読メタデータの一種で パス内で提供されたデータを システムがよりよく理解するのに役立ちます セマンティックタグについて詳しくは このセッションの関連リンクをご覧ください 次に パスを新しいスタイルで レンダリングするかどうかを指定するために 推奨スタイルをpass.jsonに追加します 今日のように チケット購入者が 非接触型入場にパスを利用するには NFCエンタイトルメントで パスに署名する必要があります 詳しくはウォレットのデベロッパサイトで このエンタイトルメントの リクエスト方法についてご確認ください

引き続き必要な パスバンドルコンテンツを含め 新しく導入されたアセットを 含めることを検討する必要があります パスバンドルに何を含めることができるか 詳しく見てみましょう これまでのように PKPassバンドルには パスのコンテンツの大部分が含まれた pass.jsonファイルと アイコン ロゴ 背景画像が必要です これらの新しいチケットには アートワークアセットとsecondaryLogoも 導入されています 以前のOSバージョンで これまで通りパスをストリップ画像で レンダリングしたい場合は アートワークアセットを使用します すべてのOSバージョンで同じ背景を 使用する場合は背景アセットを使用します それぞれがパスでどのように 表示されるか見ていきましょう 上部にはイベントロゴまたは ロゴテキストが表示されます 反対側には 予定されているイベントの 日付と時刻が表示されます これは ある特定の時点の場合もあれば 数日間にわたる場合もあります これらのラベルは イベントアートワークの スペースを広くし それに注目が集まるよう 戦略的に配置されているため イベントをよく表した特色のある パスとすることができます

最後に 下側に新しいフッタがありますが これは重要な座席情報を 表示するために使用します PassKitでは イベントや会場のタイプが考慮され 最も重要な座席情報が表示されます このフッタには セカンダリロゴも表示されます

この新しいレイアウトは すべてのパスで一貫しているため チケット購入者も案内係も簡単に イベントの座席情報や入場情報を すばやく見つけることができます このパスを作成するために pass.jsonで何が必要になるか 例を見ていきましょう

イベントの開始日時は 上側のラベルに使用されます 座席表を使って 下側のフッタに情報を入力します 入場および座席情報には 最大4つの要素を表示できます

音楽祭など 複数の日にまたがるイベントの場合 特定の日ではなく 関連する期間を 指定できるようになりました

指定席がない場合 代わりに「General Admission」などの 入場レベルをフッタに表示できます 次に パスの下に表示される 新しい機能について 見ていきましょう イベントのその他の情報を表示する 新しいエントリポイントが追加されました まず マップタイルが新たに追加されており これをタップすると ユーザーはマップアプリにリダイレクトされ イベント会場までの道案内に 簡単にアクセスできます

右側には 新しいイベントガイドへの エントリポイントが追加されています イベントガイドでは チケット購入者が イベントに向けて準備するための 幅広い情報を表示できるほか イベント時に便利なアクションに すばやくアクセスすることもできます

画面の上側には アプリの機能にリンクアウトする 一連のアクションが表示されます これらを使用することで ユーザーは食事の注文やグッズの購入 手荷物ポリシーの表示などの 機能にすばやくアクセスできます その下には イベントの日付と場所の 天気予報が表示されます 次に 会場マップなど 会場の付加的な詳細を含めるスペースがあり フリーフォームのキューラベル情報を 表示することもできます イベントガイドには関連プレイリストへの リンクアウトを含めることもできます pass.jsonで これらの変更点のいくつかが どのように表示されるか見てみましょう

セマンティックタグを付けたURLを使用して 上側のタップ可能なタイルを作成します このタイルは外部の機能に リンクアウトします 経度と緯度の座標を使用して 入力された会場の位置情報は マップへのリダイレクトや 天気予報の機能に役立てられます 座標による位置情報が入力されない場合 会場名を使用して マップの位置情報を取得します

コンサートチケットの場合 出演者名やアーティストIDを含めておくと 音楽アプリとの統合機能のサポートに それらが役立てられます アーティストIDの検索方法については 関連リンクをご覧ください その他のチケットタイプの場合 イベント名を使用して 関連するキュレーターによる 音楽コンテンツがないか確認して表示します

次に チケットの作成に関する ベストプラクティスをいくつか紹介します アダプタにはセマンティックタグを できるだけ使用することをおすすめします こうすることでイベントガイドやパス自体に 過去の情報を表示することができます

OSのバージョンに関わらず デバイスにチケットが確実に 表示されるようにするため プライマリ セカンダリ 補助の 各フィールドを これまでと同じようにpass.jsonに 必ず含めてください これらのフィールドが存在しない場合 パスが検証に失敗するか 古いバージョンのOSでは 空として表示されます

新しいイベントスタイルでパスが レンダリングされるように 忘れず 推奨スタイルバージョンとして ポスターイベントチケットを指定します これがどのようになるか見てみましょう

このposterEventTicketは先ほどの 新しいチケットスタイルを表しています イベントチケットは 既存のスタイルを表しているので PassKitがどの順序でパスを レンダリングするようにしたいか指定します

このパスには 古いOSバージョン用の 従来のチケットタイプをレンダリングする ヘッダフィールドとプライマリフィールドが 含まれています

その下には 同じパスで 新しい チケットスタイルをレンダリングする セマンティックタグ付きのデータがあります

最後に pass.jsonに これらの変更を加えると パスは最も関連性が高いと 思われるタイミングで iPhoneやApple Watchで ライブアクティビティを開始します ライブアクティビティには重要な座席情報と 入場情報が表示されるため ユーザーは簡単に 最も重要な情報を ロック画面やスマートスタックに 直接表示することができます ここに表示される座席情報は パスのフッタに表示されるものと似ており pass.jsonで提供された 同じ座席表に基づいています チケット発行のアップデートについては 以上です チケット購入者が必要なすべての イベント情報を簡単に見つけるのに 今回の新しいウォレットパスの アップデートがお役に立てば幸いです それではTanyaに ここまでの内容を 簡単にまとめてもらいましょう ありがとう Masha 今年はいくつかの素晴らしい新機能が ウォレットとApple Payに導入されました アプリ内とWebの両方から 資金を移動したり エコシステム間のトランザクションに Apple Payを使用したり より豊かなチケット発行体験を ユーザーに提供できるようになりました ここでいくつかの注意点と アクションアイテムを見てみましょう これまで Apple Payが利用可能かどうか 判断する際に ブラウザ検出を使用してきた場合は canMakePayments APIを使用するか 特別に設計された新しい applePayCapabilities APIを使用して Apple Payのブラウザサポートの 問題を解決してください 以下のサンプルコードを 忘れずダウンロードし 新しいチケット発行の様々なアップデートを どのように活用できるかご覧ください また フィードバックアシスタントを使って 本日紹介した機能について フィードバックをお寄せください 最後に WebでのApple Payについて まだよく知らないという方は 昨年のTech Talk「Getting Started with Apple Pay on the Web」をご覧ください 以上です お楽しみいただけたでしょうか 引き続きWWDCをお楽しみください ご視聴ありがとうございました