[Apple Pay]ガイダンス

スポンサーリンク
ガイダンス Apple Pay
スポンサーリンク

Apple Payの機能を使いこなそう。

Apple Payは、iPhone、iPad、Mac、Apple Watch、およびウェブサイトで実行されているアプリで、物理的な商品やサービス、寄付やサブスクリプションの支払いを行うための安全で簡単な方法です。アプリに課金の機能を持たすことにより、さまざまな場面でユーザから収益を得ることができるようになります。

A sketch of a dollar sign, suggesting Apple Pay. The image is overlaid with rectangular and circular grid lines and is tinted blue to subtly reflect the blue in the original six-color Apple logo.

人々は、デバイスに安全に保存されている資格情報を使用して、支払いを承認し、配送と連絡先情報を提供します。

人々は、デバイスに安全に保存されている資格情報を使用して、支払いを承認し、配送と連絡先情報を提供します。

ヒント

Apple Payとアプリ内課金の違いを理解することが重要です。アプリでApple Payを使用して、食料品、衣類、家電製品などの物理的な商品を販売したり、クラブメンバーシップ、ホテルの予約、イベントのチケットなどのサービス、寄付をしたりできます。アプリでアプリ内購入を使用して、アプリのプレミアムコンテンツやデジタルコンテンツのサブスクリプションなどの仮想商品を販売します。

Apple Payを受け入れるアプリは、利用可能な支払いオプションが表示されているところにApple Payマークが表示され、人々がタップして支払いシートを表示するApple Payボタンが表示されます。チェックアウト時に、支払いシートには、Apple Payにリンクされたクレジットカードまたはデビットカード、購入金額(税金と手数料を含む)、配送オプション、連絡先情報を表示できます。人々は必要な調整を行い、支払いを承認して購入を完了します。

A screenshot of a payment sheet that displays details about a purchase, including bank information, shipping address, and the total amount.

開発者のガイダンスについては、Apple Payを参照してください。

Apple Payを受け入れるウェブサイトは、それを購入フローに組み込みます。利用可能な支払いオプションが表示されている場所にはApple Payマークを表示する必要があり、Apple Payボタンを使用すると、支払いシートを表示できます。チェックアウト時に、支払いシートには、Apple Payにリンクされたクレジットカードまたはデビットカード、購入金額(税金と手数料を含む)、配送オプション、連絡先情報を表示できます。人々は必要な調整を行い、支払いを承認し、Touch IDまたはTouch ID付きMagic Keyboardを含むiPhone、iPad、およびMacに安全に保存された資格情報を使用して購入を完了します(サポートされているMacの完全なリストについては、Apple Payと互換性のあるデバイスを参照してください)。他のMacでは、Apple Payが設定されている近くのiPhoneまたはApple Watchで購入を確認します。

An illustration of a MacBook Pro on the left and an iPhone on the right. The MacBook Pro displays a Safari window that shows an online store with Apple Pay buttons for checking out and adding to a bag. The iPhone displays an Apple Pay payment sheet.

Apple Payを提供するすべてのウェブサイトには、プライバシーに関する声明が含まれており、ウェブ上のApple Pay許容使用ガイドラインを遵守する必要があります。開発者のガイダンスについては、ウェブ上のApple Payを参照してください。ウェブ上のApple Payの実践的なデモについては、ウェブ上のApple Payのインタラクティブなデモを参照してください。

Apple Payの提供

それをサポートするすべてのデバイスでApple Payを提供する。デバイスがApple Payをサポートしていない場合は、Apple Payを支払いオプションとして提示しないでください。

Apple Pay APIを使用して、誰かがウォレットにアクティブなカードを持っているかどうかを確認する場合は、APIを使用するすべての場所で、Apple Payを主要な支払いオプションにする必要がありますが、必ずしも唯一の支払いオプションにする必要があります。 たとえば、他のオプションと一緒に表示するときに、支払いオプションとしてApple Payを事前に選択することができます。開発者のガイダンスについては、PKPayment(iOS、watchOS)とcanMakePayments(ウェブ)を参照してください。

他の支払い方法も提供する場合は、同時にApple Payを提供してください。支払い方法を提供または受け入れるすべてのページまたは画面上の他のオプションと同じくらい目立つように、Apple Payを特集します。

Apple Payボタンを使用してApple Payの支払いプロセスを開始する場合は、Appleが提供するAPIを使用して表示する必要があります。ボタンのグラフィックとは異なり、APIによって生成されるボタンは常に正しい外観を持ち、自動的にローカライズされます。ウェブ上でApple Payをサポートしているが、APIを含まない古いシステムを実行しているデバイスでは、CSSを使用したApple Payボタンの表示で説明されているように、推奨されるCSSを使用してWebサイトのボタンを表示します。

カスタムボタンを使用してApple Payの支払いプロセスを開始する場合は、カスタムボタンに「Apple Pay」やApple Payのロゴが表示されないことを確認してください。このシナリオでは、Apple Payマークを表示するか、支払いボタンを表示する同じページのテキストでApple Payを参照することで、Apple Payを受け入れることを人々に知らせる必要があります。

An illustration that shows the correct arrangement of the Apple Pay logo above a custom button titled 'Order Now'.
Correct usage
An illustration that shows the incorrect arrangement of the Apple Pay logo above a custom button titled 'Apple Pay'.
Incorrect usage

Apple Payボタンは、Apple Payの支払いプロセスを開始し、必要に応じてApple Payの設定プロセスを開始する場合にのみ使用してください。人々が購入するためにApple Payボタンを選択するが、デバイスにApple Payが設定されていていない場合、Apple Payを設定する機会が与えられます。Apple Payボタンを他の方法で使用しないでください。

Apple Payボタンを隠したり、利用できないように見せたりしないでください。製品のサイズや色が選択されていない場合など、Apple Payボタンがまだ使用できない場合は、誰かがボタンをタップまたはクリックした後に問題を優雅に指摘してください。

Apple Payマークは、Apple Payが受け入れられたことを伝えるためにのみ使用してください。Apple Payマークは支払いを容易にしません。支払いボタンとして使用したり、ボタンとして配置したりしないでください。Apple Payマークを使用して、選択した支払い方法としてApple Payを示す場合、アプリのデザインに準拠した別のカスタムボタンを作成して、Apple Payの支払いを開始できます。

あなたのウェブサイトでApple Payが受け入れられていることを検索エンジンに知らせてください。ウェブサイトがセマンティックマークアップを使用して検索エンジンに製品の詳細を提供する場合は、支払いオプションとしてApple Payをリストアップしてください。

アプリ開発者のガイダンスについては、Apple Payを参照してください。ウェブ上のApple Payが利用可能かどうかを判断する方法を含むウェブサイト開発者のガイダンスについては、ウェブ上のApple Payを参照してください。

チェックアウトの合理化

まとまりのあるチェックアウト体験を提供します。チェックアウトフロー全体がアプリやウェブサイトと密接に統合されていると感じるのが最善です。統合に対する人々の認識を強化するために、チェックアウト体験を通してブランディングを使用し、異なるページやウィンドウを開かないでください。特にウェブサイトのチェックアウトフローでは、プロセス中に新しいウィンドウを開くと混乱を引き起こし、人々が別のウェブサイトに引き渡されたと思わせることさえあります。

Apple Payが利用可能な場合は、その人がそれを使いたいと仮定します。Apple Payボタンを最初の支払いオプションとして表示したり、他のオプションよりも大きく表示したり、行を使用して他の選択肢から視覚的に分離したりすることを検討してください。

製品詳細ページのApple Payボタンを使用して、単一アイテムの購入を加速します。ショッピングカートを提供することに加えて、人々が個々のアイテムをすばやく購入できるように、製品詳細ページにApple Payボタンを置くことを検討してください。この方法で開始された購入は、ショッピングカートにすでに存在するアイテムを除き、個々のアイテムのみである必要があります。ショッピングカートに製品詳細ページから直接購入したアイテムが含まれている場合は、購入完了後にカートからアイテムを削除します。

エクスプレスチェックアウトで複数のアイテムの購入を加速します。支払いシートをすぐに表示するエクスプレスチェックアウト機能を提供することを検討し、単一の配送方法と目的地を使用して複数のアイテムをすばやく購入できるようにします。クーポンやプロモーションコードを提供する場合は、支払いシートに入力できるようにすることで、エクスプレスチェックアウト体験を向上させることができます。

人々がApple Payボタンに到達する前に、色やサイズのオプションなど、必要な情報を収集します。お客様がオプションを選択するのを忘れたため、チェックアウト時に追加情報が必要な場合、問題を優雅に指摘し、修正するのに役立ちます。ハイライトまたは警告テキストを使用して不足している情報を特定し、問題のあるフィールドに自動的に移動して、人々がそれを迅速に修正して購入を完了できるようにします。

チェックアウトが始まる前にオプションの情報を収集してください。ギフトメッセージや配送指示などのオプションデータを支払いシートに入力する方法はありませんので、事前に、または購入が完了した後でもこの情報を収集してください。

支払いシートを表示する前に、複数の配送方法と配送先を収集します。支払いシートでは、注文全体の単一の配送方法と配送先を選択できます。顧客が注文内の個々のアイテムに対して異なる配送方法と配送先を選択できる場合は、支払いシートではなく、Apple Payのチェックアウトが始まる前にそれらの詳細を収集してください。

店舗での集荷の場合は、支払いシートを表示する前に、人々が集荷場所を選択するのを手伝ってください。お客様がご希望の集荷場所を選択したら、読み取り専用形式を使用して、支払いシートに場所の住所を表示します。開発者のガイダンスについては、読み取り専用のピックアップアドレスの表示を参照してください。

Apple Payからの情報を好む。Apple Payの情報が完全で最新であると仮定します。アプリやウェブサイトに既存の連絡先、配送情報、支払い情報がある場合でも、潜在的な修正を減らすために、チェックアウト時にApple Payから最新の情報を取得することを検討してください。

購入前にアカウントの作成を要求しないでください。アカウントの登録を依頼する場合は、注文確認ページで登録を依頼してください。チェックアウト時に支払いシートから提供された情報を使用して、できるだけ多くの登録フィールドを事前に入力します。

An illustration of an order confirmation screen on iPhone. The screen contains a button for creating an account and a button for signing up with Apple Pay.

人々が支払いシートで確認できるように、取引の結果を報告してください。障害の場合、支払いシートにはあなたが提供したエラーが表示されるので、人々は問題を解決するための措置を講じることができます。

注文確認またはお礼のページを表示します。支払いシートに取引の結果が表示されたら、注文確認ページを表示して、購入に感謝し、注文がいつ出荷されるかの詳細を提供し、ステータスを確認する方法を示します。確認ページにApple Payを記載する必要はありませんが、その場合は、取引の処理に使用されたアカウントの下4桁の後に、または別のメモとして表示してください。例えば、「1234(Apple Pay)」や「Apple Payで支払う」などです。

支払いシートのカスタマイズ

重要な情報のみを提示し、要求します。支払いシートに無関係な情報が含まれている場合、人々は混乱したり、プライバシーの懸念を抱いたりする可能性があります。たとえば、購入が電子的に配信されるギフトカードである場合、連絡先のメールアドレスを表示することは理にかなっていますが、配送先住所は表示されません。このシナリオで配送先住所を表示または尋ねると、何かが物理的に配達されるという誤った印象を与える可能性があります。

アクティブなクーポンまたはプロモーションコードを表示するか、人々にそれを入力する方法を提供します。たとえば、支払いシートが表示される前にコードを入力できる場合、シートに表示することで、コードが期待どおりに機能することを安心させることができます。あるいは、支払いシートにコード入力を許可することは、エクスプレスチェックアウトフローで特に有益です。

支払いシートで配送方法を選択させてください。スペースが許す限り、利用可能な各オプションについて、明確な説明、コスト、およびオプションで、配達予定日または集荷日、または日付の範囲を表示します。iOS 15以降では、お客様の現在地に関係なく、配送方法のカレンダーとタイムゾーンのサポートを利用して、正確な配送または集荷情報を提供できます。開発者のガイダンスについては、PKDateを参照してください。

店舗でのピックアップの場合は、自分に合ったピックアップウィンドウを選択させることを検討してください。配送方法を使用して、人々が選択できる日付と時間の範囲を提供できます。

ラインアイテムを使用して、追加料金、割引、保留中の費用、アドオン寄付、定期的な支払い、および将来の支払いを説明します。ラインアイテムにはラベルとコストが含まれます。定期的な支払いのラインアイテムには、頻度を含めることもできます。購入を構成する製品の項目別リストを表示するためにラインアイテムを使用しないでください。開発者のガイダンスについては、paymentを参照してください。寄付に関するガイダンスについては、寄付の支援を参照してください。

A screenshot of an in-app payment sheet that includes an additional charge for gift wrap and a credit applied for a coupon.

ラインアイテムを短くしてください。ラインアイテムを一目で具体的でわかりやすくします。可能な限り、ラインアイテムを1行に収めます。

合計と同じ行に「支払う」という単語の後にビジネス名を入力します。銀行やクレジットカードの明細書で請求を探すときに、人々が見るのと同じビジネス名を使用してください。これにより、支払いが適切な場所に行くという安心感が得られます。例えば、Pay [Business_Name]。

エンドマーチャントでない場合は、支払いシートにビジネス名とエンドマーチャントの名前の両方を指定してください。あなたのアプリ、アプリクリップ、またはウェブサイトは、あなたの会社とは無関係なエンドマーチャントから購入するのに役立ついくつかの方法があります。たとえば、マーケットプレイスアプリは、人々が認識できないかもしれないエンドマーチャントから購入するのに役立ちます。もう1つの例は、人々が店のチェックアウトカウンターを訪問することなく、エンドマーチャントの物理的な店でアイテムを支払うために使用できるセルフチェックアウトサービスを提供するアプリです。このようなシナリオでは、人々は2つのビジネスが取引に関与していることに気づいていないかもしれないので、両方のビジネスに名前を付け、その役割を明確にすることが不可欠です。アプリがエンドマーチャントの仲介者として機能する場合、Pay [End_Merchant_Business_Name (viaYour_Business_Name)]のようなものを使用して、支払いシートのペイラインで状況を明確かつ簡潔に説明してください。

支払い承認後、いつ追加費用が発生する可能性があるかを明確に開示する。場合によっては、チェックアウト時に総費用が不明な場合があります。たとえば、距離や時間に基づく車の乗車料金は、チェックアウト後に変更される場合があります。または、顧客は製品が配達された後にチップを追加したいと思うかもしれません。このような状況では、現地の規制で許可されている場合は、支払いシートと保留金額としてマークされた小計で明確な説明を提供することができます。特定の金額を事前承認する場合は、支払いシートにこの情報が正確に反映されていることを確認してください。

データ入力と支払いエラーを適切に処理します。チェックアウト中にエラーが発生した場合は、人々が取引を完了できるように迅速に解決できるように支援してください。関連するガイダンスについては、データ検証を参照してください。

Webサイトのアイコンを表示する

多くのウェブサイトは、ブックマーク、URLフィールド、またはデバイスのホーム画面に表示できるアイコンを提供しています。Apple PayをサポートするWebサイトでは、このアイコンをサマリービューと、支払いの承認に使用される接続されたデバイスの支払いシートに表示できます。このアイコンは、支払いが正しい場所に行くという視覚的な安心感を提供します。

ウェブサイトがApple Payをサポートしている場合は、サマリービューと支払いシートで使用するために、次のサイズのアイコンを提供してください。

@2x@3x
60×60 pt (120×120 px @2x)60×60 pt (180×180 px @3x)
An illustration of an Apple Pay payment sheet on iPhone, which shows a website icon above the payment details.

エラーの処理

チェックアウトや支払い処理中に問題が発生した場合に、明確で実用的なガイダンスを提供し、人々が問題を迅速に解決し、取引を完了できるようにします。

データ検証

アプリまたはWebサイトは、支払いシートが表示されたとき、支払いシートの特定のフィールド値を変更したとき、およびトランザクションを認証した後に、ユーザーの入力に応答できます。これらの機会を利用して、データ入力の問題をチェックし、明確で一貫したメッセージングを提供します。

A screenshot of an in-app Apple Pay payment sheet on iPhone that shows an error with the shipping address.
 Payment sheet error messaging
A screenshot of an in-app shipping screen on iPhone. The screen denotes the zip code doesn't match the city for the home address. Options exist to select or add a different shipping address.
 Custom detail view error messaging

データが無効な場合、システムが提供するエラーメッセージングは、支払いシートの関連フィールドに注意を喚起します。人々はフィールドを選択して追加の詳細を表示し、問題を解決できます。人々が問題のあるフィールドを選択したときに表示される詳細ビューにカスタマイズされたエラーメッセージを提供します。

開発者のガイダンスについては、PKPaymentAuthorization(iOS、watchOS)とApple Pay on the Web(Web)を参照してください。

注意

プライバシー上の理由から、あなたのアプリやウェブサイトは、人々が取引を承認しようとするまで、データへのアクセスが制限されています。承認前に、カードの種類と編集された配送先住所のみにアクセスできます。承認が失敗したときにエラーを表示することが重要ですが、可能な限り、利用可能な情報を検証し、承認前に問題を報告する必要があります。

ビジネスロジックの遵守を強制することは避けてください。無関係なデータを無視し、可能な限り不足しているデータを推測するのに十分なインテリジェントなデータ検証プロセスを設計する。たとえば、アプリに5桁の郵便番号が必要ですが、誰かがZip + 4コードを入力した場合、修正を求めるのではなく、追加の数字を無視します。エラーが発生することなく、ダッシュの有無、国コードの有無など、複数の形式で電話番号を入力できます。

システムに正確なステータスレポートを提供します。問題が発生した場合は、システムが支払いシートに最も関連性の高いエラーメッセージを表示できるように、アプリやウェブサイトが問題の種類を正確に示すことが不可欠です。これは、カスタムエラーメッセージに正しいステータスコードを添付することによって行われます。開発者のガイダンスについては、PKPayment(iOS、watchOS)とApple Payステータスコード(ウェブ)を参照してください。

データが無効または正しくフォーマットされていない場合の問題を簡潔かつ具体的に説明してください。関連するフィールドを参照し、期待されていることを正確に示してください。たとえば、無効な郵便番号を入力した場合、「住所は無効です」を表示する代わりに、「郵便番号が都市と一致しません」などの特定のメッセージを表示します。配送先住所が使用できない場合は、「この州では配送できません」のようなメッセージで理由を明記してください。文スタイルの大文字化と終了句読点のない名詞句を使用してください。切り捨てを避けるために、メッセージを128文字以下に保つことを目指します。

支払い処理

割り込みを正しく処理します。キャンセルのようなユーザー主導のイベントやタイムアウトのようなシステム主導のイベントは、支払いフローを中断させ、支払いシートが却下される可能性があります。そのようなイベントが発生した場合は、進行中の支払いをキャンセルする必要があります。支払いシートが却下された後、Apple Payボタンを再度選択してプロセスを再開できます。開発者のガイダンスについては、PKPaymentAuthorization(iOS、watchOS)およびoncancel(ウェブ)を参照してください。

サブスクリプションのサポート

アプリまたはWebサイトでは、Apple Payを使用して定期的な料金の承認をリクエストできます。定期的な料金は、毎月の映画チケットのサブスクリプションなどの固定額、または地元の規制が許す限り、毎週の食料品の注文などの変動額にすることができます。最初の承認には、割引や追加料金も含まれます。

A screenshot of an in-app Apple Pay payment sheet for a fixed subscription, which includes a monthly amount.
 Fixed subscription
A screenshot of an in-app Apple Pay payment sheet for a variable subscription, which includes the text 'Amount Pending'.
 Variable subscription (where local regulations allow)

支払いシートを表示する前に、サブスクリプションの詳細を明確にしてください。定期的な支払いを承認するよう依頼する前に、請求頻度やその他の利用規約を完全に理解していることを確認してください。支払いシートで請求頻度を繰り返すことができます。

請求頻度、割引、および追加の前払い料金を繰り返すラインアイテムを含めます。これらのラインアイテムを使用して、彼らが承認していることを人々に思い出させます。承認時に支払いが不要な場合は、請求がいつ行われるかを明確に開示してください。

A screenshot of an in-app Apple Pay payment sheet for a fixed subscription that doesn’t require payment until after the first month. The total shows a zero dollar amount.
 No payment required at authorization

合計行で現在の支払い金額を明確にします。承認時に請求される金額を人々が知っていることを確認してください。

サブスクリプションの変更により追加料金が発生する場合にのみ、支払いシートを表示します。誰かがサブスクリプションを変更した場合、コストが減少した場合、または同じままの場合、承認は必要ありません。

寄付の支援

承認された非営利団体は、Apple Payを使って寄付を受け入れることができます。

寄付を示すためにラインアイテムを使用してください。支払いシートに、寄付を承認していることを人々に思い出させるラインアイテムを表示します。たとえば、寄付$ 50.00を表示します。

事前に定義された寄付金額を提供することで、チェックアウトを合理化します。25ドル、50ドル、100ドルなど、ワンステップの推奨寄付を提供することで、寄付プロセスのステップを減らすことができます。必要に応じて寄付をカスタマイズできるように、その他の金額のオプションも必ず含めてください。

Apple Payボタンの使用

このシステムは、アプリやウェブサイトで使用できるいくつかのApple Payボタンの種類とスタイルを提供します。Apple Payボタンとは対照的に、Apple Payマークを使用して、支払いオプションとしてApple Payの可用性を伝えます。

独自のApple Payボタンデザインを作成したり、システムが提供するボタンデザインを模倣したりしないでください。

開発者のガイダンスについては、PKPaymentPKPayment(iOSとmacOS)、WKInterface(watchOS)、Apple Pay on the Web(web)を参照してください。

ボタンの種類

Appleはいくつかのタイプのボタンを提供しているので、購入や支払いの経験の用語や流れに最も適したボタンの種類を選択できます。

Appleが提供するAPIを使用して、Apple Payボタンを作成します。システムが提供するAPIを使用すると、次のようになります。

  • Appleが承認したキャプション、フォント、色、スタイルを使用することが保証されているボタン
  • サイズを変更すると、ボタンの内容が理想的なプロポーションを維持することを保証する
  • ボタンのキャプションをデバイスに設定されている言語に自動的に翻訳する
  • UIのスタイルに合わせてボタンのコーナー半径を設定するためのサポート
  • VoiceOverがボタンを記述できるようにする、システム提供の代替テキストラベル
支払いボタンの種類使用例
Buy with Apple Pay button製品詳細ページやショッピングカートページなど、人々が購入できるアプリやウェブサイトのエリア。
Pay with Apple Pay buttonケーブルや電気などのユーティリティや、配管や車の修理などのサービスなど、請求書や請求書や請求書を支払うことができるアプリやウェブサイト。
Check out with Apple Pay buttonチェックアウトというテキストで始まる他の支払いボタンを含む、ショッピングカートまたは購入体験を提供するアプリまたはウェブサイト。
Continue with Apple Pay button続行のテキストで始まる他の支払いボタンを含む、ショッピングカートまたは購入体験を提供するアプリまたはウェブサイト。
Book with Apple Pay button人々がフライト、旅行、またはその他の体験を予約するのに役立つアプリまたはウェブサイト。
Donate with Apple Pay button人々が寄付をすることを可能にする承認された非営利団体のためのアプリまたはウェブサイト。
Subscribe with Apple Pay buttonジムのメンバーシップや食事キットの配達サービスなど、サブスクリプションを購入できるアプリやウェブサイト。
Reload with Apple Pay buttonトランジットやプリペイド電話プランなどのサービスに関連するカード、アカウント、または支払いシステムにお金を追加するのを助けるために、用語リロードを使用するアプリまたはウェブサイト。
Add Money with Apple Pay button交通やプリペイド電話プランなどのサービスに関連するカード、アカウント、または支払いシステムにお金を追加するのを助けるために、add moneyという用語を使用するアプリまたはウェブサイト。
Top Up with Apple Pay button乗り継ぎやプリペイド電話プランなどのサービスに関連するカード、アカウント、または支払いシステムにお金を追加するのを助けるためにトップアップという用語を使用するアプリまたはウェブサイト。
Order with Apple Pay button食事や花などのアイテムを注文できるアプリやウェブサイト。
Rent with Apple Pay button人々が車やスクーターなどのアイテムをレンタルできるアプリやウェブサイト。
Support with Apple Pay button人々がプロジェクト、原因、組織、その他のエンティティにお金を与えるのを助けるために用語サポートを使用するアプリまたはウェブサイト。
Contribute with Apple Pay button貢献という用語を使用して、人々がプロジェクト、原因、組織、その他のエンティティにお金を寄付するのを支援するアプリまたはウェブサイト。
Tip with Apple Pay button人々が商品やサービスにチップを渡すことができるアプリやウェブサイト。
Apple Pay button最小幅を小さくすることができる、または行動を促すフレーズを指定していないボタンを使用する文体的な理由があるアプリまたはウェブサイト。アプリやウェブサイトが実行されているオペレーティングシステムのバージョンでサポートされていない支払いボタンの種類を選択すると、システムはこのボタンに置き換えることができます。

デバイスがApple Payをサポートしているが、まだ設定されていない場合は、Apple Payの設定ボタンを使用して、Apple Payが受け入れられていることを表示し、人々にそれを設定する明示的な機会を与えることができます。

Set up Apple Pay button

設定ページ、ユーザープロフィール画面、インタースティシャルページなどのページに、Apple Payの設定ボタンを表示できます。これらの場所のいずれかでボタンをタップすると、カードを追加するプロセスを開始する必要があります。

ボタンスタイル

自動スタイルを使用して、現在のシステムの外観がアプリのApple Payボタンの外観を決定できるようにすることができます(開発者のガイダンスについては、PKPayment.automaticを参照してください)。ボタンの外観を自分で制御したい場合は、次のいずれかのオプションを使用できます。ウェブ開発者のガイダンスについては、Appleを参照してください。

Black

十分なコントラストを提供する白または明るい色の背景に使用します。黒や暗い背景には使用しないでください。

An illustration showing the correct placement of a black Apple Pay button over a light background.
Correct usage
An illustration showing the incorrect placement of a black Apple Pay button over a dark background.
Incorrect usage

White with outline

十分なコントラストを提供しない白または明るい色の背景に使用してください。暗い背景や飽和した背景に置かないでください。

An illustration showing the correct placement of a white, outlined Apple Pay button over a light background.
Correct usage
An illustration showing the incorrect placement of a white, outlined Apple Pay button over a dark background.
Incorrect usage

White

十分なコントラストを提供する暗い色の背景に使用します。

An illustration showing the correct placement of a white Apple Pay button over a dark background.
Correct usage
An illustration showing the incorrect placement of a white Apple Pay button over a light background.
Incorrect usage

Button size and position

Apple Payボタンを目立つように表示します。Apple Payボタンを他の支払いボタンよりも小さくないようにし、人々がスクロールして見ないようにしてください。

An illustration showing an Apple Pay button positioned correctly above a custom Add to Cart button. Both buttons are the same size.
Correct usage
An illustration showing an Apple Pay button positioned incorrectly at a smaller size above a larger custom Add to Cart button.
Incorrect usage

カートに追加ボタンに関連して、Apple Payボタンを正しく配置してください。横並びのレイアウトで、Add to Cartボタンの右側にApple Payボタンを置きます。

An illustration showing a Check Out with Apple Pay button correctly positioned to the right of a custom Add to Cart button.
Correct usage
An illustration showing a Check Out with Apple Pay button incorrectly positioned to the left of a custom Add to Cart button.
Incorrect usage

積み重ねられたレイアウトで、カートに追加ボタンの上にApple Payボタンを置きます。

An illustration of a Check Out with Apple Pay button correctly positioned above a custom Add to Cart button.
Correct usage
An illustration of a Check Out with Apple Pay button incorrectly positioned below a custom Add to Cart button.
Incorrect usage

他のボタンの外観に合わせてコーナー半径を調整します。デフォルトでは、Apple Payボタンは角が丸みを帯びています。角の半径を変更して、四角のボタンや錠剤型のボタンを作成できます。開発者のガイダンスについては、cornerを参照してください。

An illustration showing a Check Out with Apple Pay button above a custom Add to Cart button. Both buttons have 90-degree corners.
 Minimum corner radius
An illustration showing a Check Out with Apple Pay button above a custom Add to Cart button. Both buttons have the default corner radius.
 Default corner radius
An illustration showing a Check Out with Apple Pay button above a custom Add to Cart button. Both buttons have the maximum corner radius, which results in a lozenge-like appearance.
 Maximum corner radius

ボタンの周りの最小ボタンサイズと余白を維持します。ボタンのタイトルは、ロケールによって長さが異なる場合があることに注意してください。

注意

指定したサイズが、使用している支払いボタンの種類の翻訳されたタイトルに合わない場合、システムは自動的に左側の以下のプレーンなApple Payボタンに置き換えます。Apple Payの設定ボタンの自動交換はありません。

An illustration of an Apple Pay button, labeled to indicate minimum margins of one-tenth the button’s height, a 100-point minimum width, and a 30-point minimum height.
An illustration of a Donate with Apple Pay button, labeled to indicate minimum margins of one-tenth the button’s height, a 140-point minimum width, and a 30-point minimum height.

Use the following values for guidance.

ButtonMinimum widthMinimum heightMinimum margins
Apple Pay100pt (100px @1x, 200px @2x)30pt (30px @1x, 60px @2x)1/10 of the button’s height
Book with Apple Pay140pt (140px @1x, 280px @2x)30pt (30px @1x, 60px @2x)1/10 of the button’s height
Buy with Apple Pay
Check out with Apple Pay
Donate with Apple Pay
Set up Apple Pay
Subscribe with Apple Pay

Apple Pay mark

Apple Payマークのグラフィックを使用して、同様の方法で他の支払いオプションを表示するときに、Apple Payが利用可能な支払いオプションであることを示します。Apple Payマークはボタンではありません。Apple Payボタンが必要な場合は、ボタンの種類に記載されているボタンのいずれかを選択してください。Apple Payを支払いオプションとして表示することに関する設計ガイダンスについては、Apple Payの提供を参照してください。

A row of four credit card logos, all of which are the same size and shape. The leftmost logo is the Apple Pay mark.

Appleが提供するアートワークのみを使用し、高さ以外に変更はありません。Apple Payマークの高さを指定できますが、使用する高さが支払いフローで他の支払いブランドマークと同等かそれ以上であることを確認してください。アートワークの幅、角の半径、またはアスペクト比を調整しないでください。商標記号やその他のコンテンツを追加しないでください。境界線を削除しないでください。影、輝き、反射などの視覚効果をマークに追加しないでください。Apple Payマークを反転、回転、またはアニメーション化しないでください。

その高さの1/10のマークの周りに最小のクリアスペースを維持します。Apple Payマークが周囲の境界線を別のグラフィックやボタンと共有させないでください。

Apple Payマークのグラフィックと完全な使用ガイドラインはこちらからダウンロードしてください。

Apple Payを参照する

すべてのApple製品名と同様に、Apple商標リストに示されているとおりにApple Payを使用し、複数形や所有物にしないでください。また、Apple商標の使用に関するガイドラインを遵守してください。

プレーンテキストを使用してApple Payを宣伝し、Apple Payが支払いオプションであることを示すことができます。

Appleの商標リストに表示されるように、Apple Payをテキストで大文字にします。他のすべての文字には、大文字のA、大文字のP、小文字の2つの単語を使用してください。すべてのテキストを大文字にするアプリなど、確立されたタイポグラフィインターフェイススタイルに準拠するために必要な場合にのみ、Apple Payを完全に大文字で表示します。

Appleロゴをテキストで表現するためにAppleロゴを使用しないでください。米国では、Apple Payが本文に初めて表示されるときは、登録商標記号(®)を使用してください。チェックアウト時にApple Payが選択オプションとして表示される場合は、登録商標記号を含めないでください。

Example text
Correct usagePurchase with Apple Pay
Correct usagePurchase with Apple Pay®
Incorrect usagePurchase with ApplePay
Incorrect usagePurchase with  Pay
Incorrect usagePurchase with APPLE PAY

フォントの文字とサイズをアプリで調整します。Appleのタイポグラフィを模倣しないでください。代わりに、アプリやウェブサイトの残りの部分と一致するテキスト属性を使用してください。

Apple Payやその他のAppleの商標を翻訳しないでください。英語以外のテキスト内に表示される場合でも、常に英語でAppleの商標を使用してください。

支払い選択のコンテキストでは、すべての支払いオプションにテキストのみの説明がある場合にのみ、Apple Payのテキストのみの説明を表示できます。他の支払いオプションの説明にアイコンやロゴが含まれている場合は、Apple Pay提供で説明されているようにApple Payマークを使用する必要があります。

アプリのApple Payの使用を宣伝するときは、App Storeのガイドラインに従ってください。アプリのApple Payを宣伝する前に、App Storeマーケティングガイドラインを参照してください。

プラットフォームの考慮事項

iOS、iPadOS、macOS、またはwatchOSに関する追加の考慮事項はありません。tvOSではサポートされていません。

Resources

Apple Pay Marketing Guidelines

Developer documentation

Apple Pay

Apple Pay on the Web

WKInterfacePaymentButton

Videos

What’s new in Wallet and Apple Pay 

What’s new in Wallet and Apple Pay 

Wallet and Apple Pay: Creating Great Customer Experiences 

コメント