WalletとApple Payの新機能

♪ (ウォレットとApple Payの新機能) こんにちは そしてWWDCへようこそ エンジニアのEdwardです Walletチームのエンジニアで この後 同僚のRussも加わります 本日 ウォレットとApple Payの 新機能についてお話しできて光栄です 主に3つの分野についてお話します まず最初に ウォレットの最新情報と 昨年のエキサイティングな 展開についてお伝えします Apple Payにワクワクする アップデートを行いました 新機能も追加され より簡単に支払いできるよう になりました 3つ目は 新しいAPIの 拡張機能についてです では 早速ですがウォレットの アップデートを行います Keynoteでお聞きになった かも知れませんが Appleウォレットに IDカードを導入します アメリカを皮切りに いくつかの州を選択して 運転免許証や 州のIDをスキャンして 自撮り画像を撮ることができます IDを保護するセキュアエレメント で保護されています TSAはデジタルIDを 使用できる最初の場所として 空港の保安検査の 有効化に取り組んでいます 詳細については このセッションに関連する リンクをご覧ください またiOS 15では HomeKitに接続された ロックのサポートが追加され ユーザーはホームキーを押して 入室できるようになりました パスの追加に関しては ユーザーの多くはウェブからすぐに パスをインストールしています iOS 14では 例えば映画の チケットを4枚追加したい場合 個別に追加できます 今年新たに Safariからのマルチパス ダウンロードが追加されました 単純な変更により パスをバンドルして ユーザー体験をスムーズに することができます そのためには 次の 3つのことを実行します まずPkPassのファイルを まとめてzipにします 次に ファイルの拡張子を .pkpassesに設定します そして最後に正しい mimeタイプを使用してください これでバンドル内のすべてのパスが ウォレットにダウンロードされ 処理されるようになります これらのパスがあると それらをすべて追跡するのが 面倒な場合があります また 古いパスを消したくない 記念に残しておきたいという方も 多いと思いますが そうするとウォレットの中が 乱雑になってしまいます iOS 15の新機能として ウォレットは自動的に有効期限の 切れたパスを自動的に隠し パスを整理して簡単に見つられます 活用例を 紹介しましょう ここでは パスの例から JSON を見てみましょう ウォレットは 3つのフィールドを見て パスを自動的に隠すべきか どうかを判断します 1つ目は パスの有効期限が 現在の日付よりも古いものです 2つ目は 関連日付が 1日を経過しています または3つ目 パスが無効になっています 優れたユーザー体験を提供するには これらのフィールドにパスが 正しく設定されていることを 確認する必要があります それではApple Payの 更新について説明しましょう Apple Payは iPhone iPad Apple WatchとMacで 最も簡単な支払い方法です ユーザーはAppや ウェブ上で支払いができます Apple PayはiMessage とBusiness Chat でサポートされています App Clipでも サポートされているため その場で簡単に操作できます Apple Payの利用は 世界中で増え続けています 今年からはメキシコ イスラエル 南アフリカでも Apple Payが 使えるようになり 世界55の国と地域で 使えるようになりました より多くの場所で エクスプレスカードの サポートを開始しました また ブラジルのような場所では クレジットカードとデビットカードの 組み合わせをサポートしています ここでは あなたのAppや Webサイトを変更して 便利な決済機能を実現する 方法をいくつか紹介します 昨年 Rent with Apple Pay やTop Up with Apple Payなど より多くのボタンタイプの サポートを追加しました 本日は もう1つ紹介します Continue with Apple Pay ほかのボタンと一緒にカートで Apple Payを利用の場合は このボタンを選択してください 「Continue」をコールトゥ アクションとして使用できます また Apple Payボタン用の 新しいJavaScript 実装も導入します この新しいボタンは現在の全ボタン タイプとスタイルをサポートします 実装は簡単でサイトの デザインに合わせて カスタマイズできます 実装例を次に説明します ご覧のように ボタンのサイズと スタイルは簡単に設定できます スタイルの先頭には 「apple-pay」 が付いています 詳細については Apple Developerポータルの ドキュメントをご覧ください 次に iPhoneとiPad 向けのApple Payに 加えられた大きな アップデートを紹介します iOS 15では新しい Apple Pay体験によって さらに便利な支払いが可能 になると期待しています SwiftUIで Apple Payシートを まったく新しいデザインで 一から作り直しました これでユーザーはより鮮明で スムーズな支払い体験を 新しく素晴らしい画面で 体験できるようになりました また コンバージョンを 改善するいくつかの 新機能も実装しました Apple Payを初めて使う ユーザーのために ペイメントシートからカードと住所を 追加する手順を 簡略化しました 既存ユーザーは Apple Payを離れずに 別のカードを追加できます また 問題が発生したときの エラー処理を より分かりやすくするために 再構築しました 新しい支払い方法の追加が 完了すると ユーザーはシームレスに トランザクションを再開します また 支払い項目 割引 小計などの 詳細情報を表示する 新しいサマリービューも追加しました iOS 15の新機能では サマリービューにAppの アイコンも表示されます Webでの支払いの場合 支払いサマリービューに Webクリップアイコンが 表示されます これまで Apple Payでは Macからのハンドオフを使って トランザクションを完了する 場合にのみ表示されていました これで Apple Payの トランザクション内で ウェブサイトのアイコンが表示され ユーザーは支払いが適切な場所で 行われることを視覚的に 確認できるようになります Webで Apple Payに同意し まだWebクリップアイコンを 設定していない場合は アイコンをユーザーに 表示することを強くお勧めします これには ルートドキュメント フォルダに表示されるサイズの 2xアイコンと3xアイコンを 作成する必要があります するとApple Payは 自動的にこのアイコンを取得し 支払いリクエストと共に表示します この実装の詳細については Apple Developerサイトの Human Interface Guidelines セクションを参照してください アイコンのサイズについて 説明している間に PKPassesの 新しいアイコンのサイズ 要件を思い出してください iOS 15では通知アイコンが 大きく表示されるようになったので PKPassのアイコンを 1xにあたり最低38 x 38に アップデートしてアイコンが ぼやけないようにする 必要があります またトータルラインにさらなる 柔軟性を 導入できることにも満足しています これにより 支払いが後で発生した場合に 日付を追加できます たとえば 予約注文を受け付けたり 定期支払いの頻度を追加 したりする場合です 今回紹介した新機能の多くは いくつかのシンプルな変更を 加えるだけでAppに追加できます そこでiOS 15で 導入しようとしている APIの拡張機能について 詳しく説明します 配送日の範囲のサポートを 追加しました これでApple Pay内で 関連する配送時間や受け取り時間を ユーザーに提示できます これらを利用して出荷や配送の予定日 店頭でのピックアップの時間枠を 設定することができます この追加情報は Apple Payの メインビューの右側に表示されます 新配送日APIにはカレンダーと タイムゾーンのサポートが 組み込まれています これによりAppでの発送日や ピックアップ時間の 処理が簡単になり 関連情報がユーザーに 明確に表示されます この仕組みを簡単に説明します 最初に 以前と同じ PKShippingMethodを 使用して通常の配送方法を 定義します 次にカレンダーを選択します この例ではユーザーの 現在のカレンダーを使用します 今日を参考にして この日から 3日から7日の間に 到着する予定にしています 次に カレンダーを使用して 日付範囲の開始日と終了日を 決定します 最後に 日付を適切な日付 コンポーネントに変換し 配送方法に追加します 単純な日付ではなく日付 コンポーネントを使用しているため iOSに組み込まれた豊富な カレンダーと タイムゾーンのサポートを 利用できます これにより他の方法では不可能な ユースケースが可能になります たとえば ユーザーの 現在のタイムゾーンに関係なく ピックアップ時間に 正しいタイムゾーンを指定できます この詳細レベルでは 特定のピックアップ時間の表示など ユーザーに最適な日時情報を 表示もできます Apple Payに相当する JavaScriptを Webに追加しました Swiftとは少し違った方法で 日付コンポーネントの範囲を 指定していることがわかります 日付コンポーネントは サポートされているピックアップ タイプと組み合わせて使用できます たとえば ピックアップ時間を Appに表示できます 日付範囲に加えて 読み取り専用の配送先住所を 定義できるようになりました これを使用して 特定のピックアップ場所を ユーザーに通知できます これを有効にするには PKContactの インスタンスとしてアドレスの 詳細を指定する必要があります この例では 必要なすべてのアドレス コンポーネントを設定できるように CNMutablePostalAddress として郵便アドレスを作成しました これで配送先の連絡先を 支払いリクエストに追加できます 最後に編集モードを定義し 必要な配送フィールドを指定します PKContactに含まれる アドレスフィールドは 読み取り専用としてユーザーに 表示されます この例では ユーザーが編集できない ピックアップの場所を指定しました これはウェブ上のApple Payに 相当するJavaScriptです shippingContact 辞書を設定し shippingType shippingContactEditingMode および requiredShippingContactFieldsを 設定してから JavaScript支払いリクエストの その他のフィールドを入れます 詳しくは デベロッパポータルの Apple Payセクションで ドキュメントを参照してください iOS 15のもうひとつの すばらしい新機能は クーポンコードのサポートです これでユーザーは支払いを開始したら プロモーションコードを入力できます これはユーザーが割引コードの 適用を忘れた場合に Apple Payの取引を キャンセルする必要がないように するための仕組みです ユーザーが製品ページまたは ショッピングカートから チェックアウトできるが クーポン入力フィールドがチェック アウト時にのみ表示される エクスプレス購入フローがある時も これの実装を検討してください 支払いリクエストを更新する方法を 用意したので 必要に応じて割引コードを検証したり エラーメッセージを表示できます コードを見てみましょう ユーザーがクーポンコードを 変更するたびに更新を実行する デリゲートメソッドを使用して 変更ができます たとえば これを使用してコードを検証し 支払合計を更新できます またこの方法で カスタマイズした エラーを戻したり 支払いサマリーアイテムと 配送方法を更新します この例については Russが後ほど詳しく説明します 可能な限りコードを事前入力し 無効なコードに関連する エラーメッセージを表示することを お勧めします iOS 15のAPI拡張機能を お楽しみいただけたことと思います これまでは理論的に説明してきたので これからRussに デモを行ってもらい これらの優れた新機能を 実装する方法を紹介します ありがとうEdward 皆さん こんにちは Russです Walletチームの ソフトウェアエンジニアです またiOS 15の ペイメントシートに追加された 素晴らしい新機能のいくつかと それらをAppに統合する方法を 紹介できることを嬉しく思います では 始めましょう これが私が企画する フードフェスティバルの チケット購入Appです このAppはApple Payの ペイメントシートを利用するために PKPaymentAuthorization ControllerDelegateの 既存のプロトコルメソッドを 既に実装しています iOS 15では ペイメントシートは自動的に 新しいデザインに アップデートされます iOS 15へのアップデートに合わせて イベント参加者が複数の方法で チケットをリクエストできるように したいです そのためには 複数の配送方法のサポートを 追加する必要があります PaymentHandlerクラスに進んで ここでは 複数のPKShippingMethodの サポートの追加を開始する PKPaymentRequestを構築します 最初に追加するのは ユーザーが使用できるさまざまな オプションを表す PKShippingMethodsの 配列を返すヘルパー関数です 最初に作成した PKShippingMethodは 標準的な配送方法で ユーザーにフェスティバルで チケットを入手できることを 知らせます iOS 15で新たに追加された 機能として チケットがユーザーに 配送されるまでの予測範囲を ユーザーに提供したいと 考えています そのために DateおよびCalendarオブジェクト を作成し shippingStartとshippingEndの 日付を3~5日後に定義します これでペイメントシートで ユーザーに表示する 日付コンポーネントを指定できます 次に PKShippingMethodを作成し 新しいプロパティ dateComponentsRangeを設定し 2つの配送方法の 配列を確実に戻します 最後に PKPaymentRequestの 発送方法をこのように設定します

これらの簡単な変更によって Appを構築し ペイメントシートの中で新しい配送方法を 確認することができます 配送方法を示す新しい行が 自動的にペイメントシートに 追加されました 行をタップすると 両方の配送方法が表示されます これには日付範囲をサポートする ものも含まれます 今年のフェスティバルのために 私は参加者全員に クーポンコードを送り 私のAppのペイメントシートを通して 直接利用できる機能を 追加したいと思います そのためには 主に2つの変更が必要です コードに戻りましょう まず PKPaymentRequestを構築する際に 新しいブール値 supportsCouponCodeを trueに設定します また新しい任意のプロパティ couponCodeも PKPaymentRequestに設定し 有効なクーポンコードを クーポンフィールドに 事前入力することができます 次に PKPaymentAuthorization ControllerDelegateに 準拠するクラス拡張機能に移り paymentAuthorizationController didChangeCouponCode という新しいプロトコルメソッド を実装します ここではサマリーアイテムの更新を処理し クーポンコードの入力時に このコード入力に関する エラーを表示できます 最初に必要なのは有効な クーポンコードが入力された場合に PKPaymentSummaryItemsを 更新するヘルパー関数です 小計項目である最初の サマリーアイテムへの参照を取得します そこから適用された割引を ユーザーに表示する 新しい PKPaymentSummaryItem を作成します 次に税金と合計の 新しいサマリーアイテムを作成し それらの配列を戻します 割引適用のロジックが記述されたので クーポンコードの検証ロジックを 次に記述します まずユーザーが入力した couponCodeが 空であるかどうかを確認し 空の場合は 変更されていない 支払いサマリーアイテムを 渡して完了を呼び出します 入力したクーポンコードが有効な クーポンコードと一致する場合は 作成したapplyDiscount関数を使用して 更新されたサマリーアイテムを CouponCodeUpdateに返します あなたのAppでは この時点で有効なクーポンコードを サーバーから取得する必要があるでしょう 最後に 入力されたクーポンコードが 無効な場合は 新しいPKPaymentRequestの 簡易イニシャライザである paymentCouponCodeInvalidErrorを 使用して ペイメントシートに直接 表示される説明を指定します また 期限切れのクーポンコード用の 2つ目の簡易イニシャライザ paymentCouponCodeExpired ErrorWithLocalizedDescriptionもあります このエラーをクーポンコードの 更新イニシャライザと 元のSummaryItemsに渡します そのように App内でクーポンコードの サポートを追加しました 確認してみましょう クーポンコードを入力するには サマリービューにタップして クーポンコードのテキスト フィールドに入力するだけです 最初に無効なクーポンコード Festを入力すると 入力したエラーメッセージが テキストフィールドのすぐ下に 表示されます これで 有効なクーポンコード FESTIVALを入力すると 支払いのサマリーアイテムが すぐに更新されます その後 配送先の連絡先と 配送先住所を選択するだけで 支払いリクエストは完了です

これらのシンプルな変更により Apple PayのSandbox環境の デバイスでペイメントシートの 更新をテストする準備が整いました ではEdwardに戻しましょう ありがとう Russ これまで 複数の配送方法や 新しい日付範囲 クーポンコードAPIを実装するのが いかに簡単かを説明してくれました 今年は エキサイティングな新機能が ウォレットに追加されました ホームキーのパス 本人確認のID 期限切れのパスの非表示 複数パスの取り込みなどです Apple Payの新しい JavaScript支払いボタンを ウェブに導入し 新しいApple Pay体験を iOSに導入しました 新しい配送APIについては 日付範囲と 読み取り専用アドレスのサポートや クーポンコード そしてこれらをAppに 実装する方法を学びました 詳しくは デベロッパポータルでApple Payの セクションをご覧ください AppやWebサイトから 支払いリクエストをテストするための Apple Pay Sandbox環境の 説明もあります ご視聴ありがとうございます ♪