AppleのiPhoneに支払い機能があるんだけど、自分のアプリにも入れたくないですか？
その時には、Pass Kitと呼ばれる、Apple PayとWallet機能を使って実現できるんです。
そうすることで、アプリ内にショッピングカートの機能ができたり、直接支払い機能を持つことができるんだ。
今後もiPhoneを持つ人が増えた時に、どこかの支払いサービスを使って手数料を払うのも勿体無いから、自分で作っちゃいましょう。
ショッピングカートをiPhoneアプリに追加しましょう！
Apple Payを使用すると、iOS App、iPadOS App、watchOS App、およびSafariのWebサイト上で、より簡単かつ安全に支払いを行うことができます。 またMessages for BusinessやiMessage ExtensionでもApple Payを利用できるようになりました。 ユーザーは、Face IDやTouch IDを使用するか、Apple Watchをダブルクリックすることで、支払い、配送先、連絡先に関する情報を迅速かつセキュアに提示して決済を実行できます。Apple Payのシンプルさはユーザーから高い評価を受けているため、Apple Payを導入することでコンバージョン率と新規ユーザー登録率の向上が期待できます。
今回は、MacでXcodeのSwiftUIでのプログラミングを使って、iPhoneアプリでショッピング機能を作ってみたいと思います。利用するのは、SwiftUIに用意されているPass Kit。
この機能を組み込むことにより、Apple Payにて商品を販売し、直接利用ユーザに機能を提供できるようになるでしょう。
例えば、本を売ったり、商品を売ったり、直接販売するのには限界があります。
しかし、iPhoneアプリによって、接客業務を肩代わりすることで、アプリ利用者がいつでも商品にアクセスすることができ、24時間いつでも商品を購入することができます。
Amazonや楽天、YahooなどのECサイト、昨今ではメルカリやBASEなど様々な形で簡単に商品を販売することができるようになってきています。
しかし、便利な分、販売手数料が大きく占めてしまい、大きく利益を出すことができなくなってしまいます。そのため、薄利多売を目指すことになり、ものを多く売らなければ儲けることができないのです。
さて、前置きはここまでにして、早速SwiftUIでStoreKitを使って、Apple Payでの支払いができる仕組みを作ってみましょう。
Apple Payを勉強しよう！
ビデオやドキュメントなどのリソースを活用して、AppやWebサイトへのApple Payの統合に関する詳しい情報を確認することができます。
https://developer.apple.com/jp/apple-pay/resources/
Apple Payの実装
Apple Payをサポートするために必要なデベロッパアカウントの設定方法、トランザクションが正常に完了したかの確認方法、さらにはAppやWebサイトでガイドラインに基づいたApple Payの実装を確実に行う方法についてご確認ください。
https://developer.apple.com/jp/apple-pay/implementation/
Apple Payボタンをショッピングカートに追加しましょう！
ApplePayボタンのデザインを決めよう！
サンプルコードをレベルアップしよう
TabViewのデザインを強化する。
WWDCでApplePayとWallertを勉強しよう
WalletとApple Pay優れた顧客体験を生み出す
(音楽)(拍手)ようこそソフトウェア技術者の ベン･チェスターです。
WalletとApple Payによる 優れた顧客体験の構築について４つの題目と 効果的なデモで説明します。
１つ目に昨年の発表のポイントに触れ、２つ目に―優れた顧客体験を提供する新機能をご紹介します。３つ目はパスを最大限に活用する方法です。
デザインや機能の変更点も紹介します。最後はデジタルの先のフィジカルコマースについてApple Parkでの日々の体験を例に話します。
まずApple Pay Cashから始めましょう。これはiMessageを使って簡単に個人間送金ができ、お店やApp上 ウェブ上でも支払えます。
ただし米国のみです。ここで大事なのはDiscoverデビットをAppに登録すること。それで準備完了です。昨年発表したもう１つの優れた機能はインラインの設定です。
つまりカードを登録していないユーザでも１ステップで購入に戻れます。Apple Payボタンを表示させるだけでいいのです。カードのないユーザには“Apple Payを設定”ボタンがあれば操作が簡単になります。そのボタンをタップするとApp内に手順が出てきます。ユーザが途中で退出してしまう“離脱”を防げます。必要な作業はこれだけです。
一度カードが登録されればユーザは購入を再開できます。しかもカードはSMS経由で自動的に有効になり、全てが手入力より迅速です。ぜひこの機能を取り入れてみてください。他に昨年発表した機能は、迅速な購入手続きを促すエラーハンドリングです。
シートの致命的でないエラーを制御できます。請求や配送先情報の問題点に対して個々のエラーメッセージを出せます。ユーザの購入が中断されずコンバージョン率が向上します。
エラーハンドリングのコツはあいまいなデータがあると想定することです。ユーザは同じ情報を 多くのAppで使い回します。個々のビジネスロジックに無理に従わせようとすれば再入力が必要になります。
それはコンバージョン率の低下につながります。その代わりに入力項目の幅を広げます。例えば、９桁の郵便番号などで州や市を推測できるようにするのです。
さらに昨年は新たに導入国が増えました。これは昨年のスライドです。今年はこの国々に６カ国追加されます。ノルウェー、ポーランドも追加予定です。中でも特に注目すべき国は中国です。
今年 エクスプレスカードを導入し北京と上海でも交通系カードを発表、Walletからカードを購入後すぐに使用できます。しかも移動は、中国国内だけでなく―クレジットカードが使用できる限りApple Payでモスクワやロンドンにも行けます。
ここまでが昨年の機能です。では 優れた顧客体験についてです。
Apple Payでの優れた体験とは何か？まずユーザの購入手続きをより簡単にする―アップストリーム化です。次に支払いをより迅速にするためのデフォルト化です。そしてApple Payのフローをより明快にするのが―合理化です。
まず合理化から説明しましょう。こちらが良い例です。Apple Payボタンが商品のページにあるのでユーザの操作をできる限りシンプルにできます。ただし複数の商品を購入したい場合は、ボタンが商品ページにあると不便かもしれません。
そこで役立つのがExpress Checkoutです。この例では、支払いは買い物かごからですが、どこからでも可能にするべきです。この２つを組み合わせて、最良の結果を導いてください。
Apple PayボタンはSDK配布のものを使用してください。理由を話します。デバイスの言語がローカライズされており、スタイルや色も豊富です。対応デバイスの全てに拡張が可能で―今後の更新機能も無料で入手できます。SDKはiOS 8.3に―WebKit 10.1はiOSと macOS 10.12.1に対応しています。
皆さんのニーズに広く応えられるよう―今日はiOS 12の 新しいボタンを発表します。
まずBook with Apple Payです。ホテルや相乗りサービスの予約に最適です。
使用するには “Book”を渡します。次にSubscribe with Apple Payです。これは定期購入向けです“Subscribe”を渡します。３つ目はCheck out with Apple Payです。同ページに複数の照会先がある場合に最適で、どれがApple Payでの支払いか明確です。
変更点はまだありますAppleは曲線をよく使います。しかし皆さんの好みに合わせられるようボタンの角を編集できるようにしました。ウェブサイトなどのイメージに合わせられます。尖った角にする場合半径を０にします。入力しなければ元のままです。旧バージョンでは数値を入れても現在の状態にフォールバックします。
角の編集はiOS 12で可能で今後のWebKitでも使用できます。未対応バージョンではフォールバックします。カスケードを考慮してください。新機能により商品の購入がよりスムーズになります。
Apple Payボタンの配置で購入はより簡単になり“ゲスト購入”との組み合わせで 効果は倍増します。ユーザの初めての体験を想像してみてください。初回購入を妨げることは離脱につながると話しました。ユーザは自分の意志でアカウントを作るべきです。Apple Payはそれをかなえます。シートの購入後のデータを使えば作成が簡単になります。
例を見せましょう。購入完了後の確認画面でアカウント作成が提案されています。取引したEメールアドレスが使われるので、後はパスワードを入力するだけです。“自動入力”とiOS 12の新機能を使えば簡単です。以上がアップストリーム化です。
次は デフォルト化についてです。Apple Payはすぐに探せることが重要なのでデフォルトオプションに設定しておきましょう。Apple Payには最新の顧客情報があります。カードを登録していない人にも最適なオプションです。例を見せましょう。一番上がApple Payです。ボタンがすぐにユーザの目にとまるので、購入手続きがより迅速に行えます。以上が簡単で迅速な方法です。
次に合理化の効果を見てみましょう。合理化で最も重要な要素はApple Payから顧客情報を得ることです。データは既に登録されているため、それを使用すれば手間が省けます。データは関連事項だけを要求してください。
それ以上を追加すると複雑になります。Apple Pay未対応のデータが必要なら購入手続きの前に収集します。商品の個数やバウチャーコードなどです。
今年は２つの変更でApple Payを合理化しました。まず合計金額が０の場合です。なぜ重要か？説明します。このシートでは割引後も合計金額が０以上です。割引により合計が０になる場合、以前は表示されませんでした。これからは合計が０でも表示されます。
送料情報など購入に必要な情報は今までどおり収集されます。このサポートは定期購入にも有効です。初回月を無料にする場合も０と出るので分かりやすいです。
ただし 定期購入とセール時の金額は明確に掲示してください。この変更はiOS 12で使用可能で 、今後のWebKitにも導入されます。旧バージョンでは現行の動作にフォールバックします。iOS 12で合理化された２つ目の点は、新たなネットワークです。
カードの検索条件を絞ることができます。追加されたのはElectronとMaestroとVPayです。
ネットワークはできるだけ多いほうがいいでしょう。iOS 12と今後のWebKitで使用可能です。以上がより簡単に迅速に―明快にする方法です。
新機能を全て活用し最高の体験をしてください。最後に ウェブ上でのApple PayとW3CのPayment Request APIに触れます。この数年開発を手伝うためW3Cと仕事をしてきました。
ここで―Apple Pay JS APIとどちらか迷うはずです。それぞれの利点を比較しましょう。Payment Request APIはクロスブラウザですが、Apple PayはSafariにのみ対応しています。
Payment Request APIを選んだ場合、次の機能を逃すことになります。先ほど説明したエラーハンドリングや加盟カードや提携カードの自動選択です。それらが選択されても価格調整はできません。そして特定の地域で必要な音声表記にも対応していません。一方 Apple Pay JS APIは サポート範囲が広くiOS 10やmacOS 10.12から対応しています。目的に合うほうを選んでください。
Payment Request APIならApple Pay JS API をフォールバックにしてください。Apple Pay JS APIを始めるためのデモページがあるのでご覧ください。必要な作業を１つずつ説明しています。
まずはApple Payボタンサイズや配置をリアルタイムで変更できます。学習させるコードも改善されました。購入のフローを試すこともできます。JSONを設定するとペイメントシートの表示にApple Payボタンが使われます。
そして オーソリゼーションの結果が直接表示されます。ここでは請求されないのでご安心ください。適用前にぜひデモをお試しください。デモページはオンラインで利用できます。Apple Payについては以上です。
次は パスを最大限に生かす方法です。パスには特別な思い入れがあります。改良点について話す前にパスのすばらしさを復習しましょう。
非接触型やバーコード付きで使いやすさが抜群です。iCloudで他のデバイスと同期し―ロック画面に表示させると素早くアクセスできます。現実の世界までシームレスな顧客体験が続き、パスは映画券などに最適です。だからこそお勧めできます。では ユーザが活用するには？
４つにまとめました。まず Walletへの追加です。後で実践してみましょう。
次に魅力的に見せること。新しいデザインのオプションもあります。３つ目は豊富なコンテンツです。システムとより一体化させられます。最後に非接触型パスの利用です。パスの追加から始めましょう。
フルモデルUIでの追加より優れた方法があります。お勧めするのはAppleの自動パス追加APIです。まず 追加したいパスの配列でパス追加の関数を呼び出すとユーザへパスのレビューか追加を問います。
これはフルスクリーンモデルのUIより摩擦が少なくさらにパスを全てレビューする、オプションもあります。完了時にユーザへの問いを処理しView Controllerを表示しましょう。後のデモで その効果を見てください。他にも良い方法があります。App外で作られたパスの追加方法です。例えば ユーザが初めてそのAppを利用した場合は、パスの追加経験がないため追加を促す好機です。その時関連するパスを加えるのがコツです。すると注文履歴などからは入手できなかったパスをスムーズに追加できます。
反対に ユーザが既にパスを持っていればそこにリンクを貼りましょう。そうすればユーザがどの時点でWalletを使い始めてもパスを入手できます。パスの自動追加機能を使えばさらに快適です。次に 魅力的に見せる方法です。まずユーザが目にするパスのフィールドには関連性のある重要な情報が必要です。
さらに大事なことは目立つ色を使うことです。全てのデバイスで魅力的に見せましょう。実物のパスのデザインに似せようとしないでください。優れたテンプレートとレイアウトオプションで際立たせ対象ユーザが快適に扱えるようにしましょう。
次にユーザ情報は画像内にエンコードしないでください。フィールドのためにリザーブしましょう。Apple Watchには重要なことです。ユーザ情報を表示する余裕はありません。サムネールも表示されないためユーザは詳細を見られません。
このように全ての情報を載せきれないことがあるはずです。今日は行の追加機能でその悩みを解決します。
デモを見てください。セクションと座席番号が載った３つ目の行が追加されました。これで情報量が多い場合項目を増やすことができます。pass.jsonを使えば簡単にできます。まず０または１を設定し、新たな行キーを出します。パスの前面が２分割されるよう指示してください。行は催し物の入場券の補助フィールドでのみ使えます。対応値は０と１でプレリリース版で利用可能旧バージョンでは行は無視され―補助フィールドは１行のみで１行につき最大４フィールドです。そのため計画的にデザインしてください。対応デバイスでも見え方を確認しましょう。
これで見栄えの良いパスの完成です。次にコンテンツを豊富にさせるには？パスを活用しましょう。情報を組み込めばユーザにとってより便利になります。
１つの例は“関連性”です。例えば pass.jsonフィールドに 場所や関連する日付を設定し所定の時刻にパスを表示することです。関連する複数のパスにも、対応１回用と複数回用を発行する場合関連情報は、それぞれに必要です。そして１つずつ正確に表示させましょう。
パスを驚くほど使いやすくできます。そしてさらに便利にするのがセマンティックタグです。pass.jsonでお見せしたフィールドは表示に最適でデベロッパの皆さんがフィールド名を管理できます。しかし独自のネームを全て iOSが判断するのは困難です。セマンティックタグは固定フォーマットデータで表示データを増やします。
私が見に行く映画のパスで 説明しましょう。主 副 補助の各フィールドのサンプルです。映画「パスの復讐」はApple Parkで上映上映時間２時間45分、シアターＦ５会場での必要な情報が 全てそろい、すぐに利用できます。
セマンティックタグを加えてみましょう。まずセマンティック辞書を加え、機械可読にするためのキー名を私のドキュメントから使います。表示される映画の題名が公式でない場合もあるでしょう。会場名も然りです。公式の名称であるべきです。催し物に関連していても表示の必要がない情報もあります。
例えば電話番号ですフィールドに関連のないセマンティックデータを最上級のセマンティック辞書が捕らえてくれます。上映中は通知をオフにするタグも加えました。秒単位の上映時間と催し物の種類も示します。またKeynoteと同様にSiriの働きで所定の時刻には “おやすみモード”になります。
映画や催し物の入場券に最適です。まとめると 機械可読の情報を加えられるタグで交通系と催し物向けタグが70以上あります。キーはオンラインで入手可能になります。セマンティックタグとの併用で関連情報は機能するためぜひ両方を追加してください。では以上の機能をまとめ、非接触型パスを説明します。
ユーザとWalletとの関わりに不可欠な機能で―バーコードのスキャンが進化したものです。使い方の好例があります。世界に名高いウェンブリー･スタジアムでサッカー選手が使い方を紹介しています。
(音楽)Apple Walletにチケットを入れApple Watchで会場にチェックインスワイプして、通知をチェックダブルクリックで起動させ、リーダーにかざします。さあ 入場！
非接触型チケットは―Apple Walletの中にこんなに簡単です。ロック画面表示を併用すれば、まるで魔法のような機能です。非接触型パスの利用にはNFCの認証が必要です。良いユースケースがあればご連絡ください。そして非接触型リーダーはAppleの通信規約に対応するものを選びましょう。
とにかくシンプルです。リーダーはこれらの会社から選んでください。そして最後に紹介する、非接触型パスの使用例は学生証です。実物の学生証が使える場所ならこれで アクセスも支払いも可能です。
２社と協力し 全米の教育機関に導入しました。では今日発表した機能をデモで見せてくれる―同僚のケイティです(拍手)ありがとうございます。WalletとApple Payの技術者ケイティです。
ご紹介するのはSwiftで作るAppです。私が週末のパーティーを企画して入場券を売り、同僚がこのAppから買うと私はわずかな利益を得ます。２つのデモをお見せします。まず新しいAPIの活用方法でWalletとApple Payでの体験をシームレスにします。そして顧客体験を向上させる―pass.jsonの構築方法です。
では Appをご覧ください。これは催し物のサマリで、日時 場所 料金が載っています。
“Apple Payで購入”ボタンもこのページにあるので購入してみましょう。するとApple Payシートが出てきます。合理化の良い例ですね。要求される情報はEメールアドレスなど、最小限です。Face IDで支払いましょう。すると 購入内容と催し物の詳細が出てきます。下にQRコードと―Add to Apple Walletの ボタンがあります。このようにAppに埋め込まれたQRコードはよく見かけます。パスの前面に出ていれば埋め込む必要はありません。では Walletに追加しましょう。ユーザが見返せるようパスに表示しています。
パーティーの情報とQRコードです。それを加えましょう。そしてJSONに変換します。パスがどう改善するか見てみましょう。
修正したい点は２つあります。まず、来場者を非接触型リーダーでチェックすること。次に会場であるこのディスカバリーメドーにユーザが近付いたら、ロック画面にパスを表示させることです。
バーコード辞書を見てみましょう。非接触型リーダーを使用するのでQRコードの表示は不要です。これを外して―代わりにNFC辞書を入れます。リーダーに渡した来場者を認識する情報がここに含まれています。次にパスに位置情報を加えロック画面に表示させます。
緯度と経度をここに入れます。今私たちがいる場所です。関連するテキストがロック画面に通知されます。次にAppがどのように変わったか見てみましょう。このように従来のAdd PassメソッドではAdd to Walletボタンのタップで呼び出せました。これは関数eventPassからのパスです。
修正されたパスに置き換えましょう。そのパスでPKAddPassesView Controllerを生成し表示しました。ベンが話したようにパスの自動追加に便利なAPIがあります。この２行を削除しそのAPIに置き換えましょう。PKPassLibraryのインスタンスを生成し、APIを呼び出します。関数addPassesがパスの配列を使い、ステータスで完了ハンドラを設定返るステータスは、３種類です。didAddPassesはユーザがパスの追加を望み―didCancelAddPassesは望まないという意味です。shouldReviewPassesはプレビューを見てからパスの追加を決めるという意味です。この場合も同様にPKAddPassesViewControllerを生成して表示します。次はviewDidLoadメソッドです。ここにはQRコードがありました。パスにQRコードがあればApp内には不要です。パスは今NFC対応なのでこのビューは要りません。このコードも削除しましょう。
ここにはPKAddPassButtonまたはAdd to Walletボタンです。他にもユーザの体験を向上させる秘けつがあります。入場券購入の直後にサマリが表示されたらパスをWalletへ追加するか否かをすぐにユーザに尋ねましょう。
ユーザが後で追加することを選んだ時のためにボタンを他に配置することもできます。ではこのボタンを外しましょう。View in Walletボタンと 置き換えます。するとユーザはタップでWalletに直行し追加したパスをチェックできます。その画面ですぐに追加の希望を尋ねましょう。
ではデバイスにデプロイして見え方をチェックします。まず催し物のサマリです。再度パスを購入します。今度はすぐにパス追加の質問が出ます。背景コードにQRコードはもうありません。View in Walletボタンに変わったのでWalletに追加します。見てみましょうすぐにパスが表示されQRコードが無くなった代わりにHold Near Readerが表示されました。到着したらスキャンするだけです。ここは開催地の付近です。デバイスをロックしてみて―ロック画面の表示が適切か 見てみましょう。
JSONで設定した通知が出ていますね。タップします。パスが出ました。到着したと想定しリーダーでスキャンしてみます。こんなに簡単です。今回の変更点とAppとの相互作用を生かして顧客体験を向上させてください。ではベンに代わります。
(拍手)ケイティ ありがとうすばらしい改善でした。さて、最後の題目はデジタルの先にある―フィジカルコマースです。Apple Payを支払いの手段にとどめず現実の世界につなげることが 大切です。２つの例を見せます。
まず 毎日 数千人の社員が利用するApple Parkの食堂のAppです。Appを開くとすぐに本日のお勧めが表示されて、App内の全ての商品を見なくて済みます。Apple Payボタンはありません。ここは食堂ではないからです。お店に近付くとGPSなどを使ってAppが変更点を検出し、ボタンが現れます。すると開始ページから即購入できます。複数の注文をしてもお店は手配してくれます複数点でも１点購入と同様に商品ページから購入できます。App内のどこからでも購入手続きが可能です。操作はとてもシンプルです。支払いはFace IDで完了。ご覧の通り要求されることは最小限です。
ユーザが他のAppに ログイン中でなければ情報を要求するチャンスです。最小限の情報を求め 活用してください。注文の確認が終了したので 後は通知を待ちます。私がお店に近付くと準備完了の通知が届き到着すればピザができています。お店のスタッフがチケットと私の名前を確認し後は食べるだけ。
これが快適な体験の一部始終です。優れたフードオーダーAppは中国にもあります。入店時にiPhoneで QRコードをスキャンするとApp内のメニューに飛びます。画像があるので選びやすく 支払いもスムーズです。決済の段階でユーザはバーチャル決済の認証を受けます。Appleのプロビジョニングでカードは直接WalletへWalletにもカードがないユーザでも―これだけで注文できます。
中国ではApple Pay対応のEコマースなどで使用できます。この場合支払いはApple Payが最適です。デフォルト化の好例です。Face IDで注文は完了。全ての技術を駆使した体験です。GPS ビーコン、カメラ、そして通知機能。これらの技術を組み合わせて、活用すれば現実の世界までつながる優れた顧客体験を構築できます。
最後にもう１つ決済代行会社やマーチャントの方はサーバ証明書の期限をデベロッパポータルで ご確認ください。更新は簡単です。Apple Payの利用前に行ってください。
今日のセッションはここまでですより詳しい情報はオンラインにもあります。今日の内容に関してご質問があればこの後10時にラボへお越しください。ご清聴 ありがとうございました(拍手)
コメント