> For the complete documentation index, see [llms.txt](https://docs.payments.thalescloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payments.thalescloud.io/click-to-pay/ja/get-started/overview/click-to-pay-ux-examples.md).

# Click to Pay の UX 例

このページでは、Click to Pay の UX 例を紹介し、D1 API と Click to Pay スキーム API を正しく統合したイシュアのジャーニーを設計できるようにします。

これらの例は網羅的ではありません。イシュアアプリケーションやオンラインバンキングのWebサイトに合わせて調整できる、一般的で推奨されるフローを示しています。

技術的な詳細については、 [Click to Pay の実装](/click-to-pay/ja/implement-click-to-pay-issuers.md).

## 設計チェックリスト

イシュアアプリケーションまたはオンラインバンキングのWebサイトで Click to Pay の体験を設計する際は、このチェックリストを使用してください:

* **価値を明確にしましょう。** エンドユーザーに登録を求める前に、Click to Pay がチェックアウトをどのように改善するか（たとえば、より速いチェックアウトや入力項目の削減）を説明します。
* **一貫した入口を提供します。** キャンペーンバナーだけでなく、新規カードのオンボーディング、既存カード管理、カード設定からも登録の入口を提供します。
* **既存の認証を再利用します。** 標準の SCA および ID\&V 手法を使用し、Click to Pay のためだけに新しい認証メカニズムを導入しないでください。
* **フローは短く保ちます。** 画面数と必須項目を最小限にします。Click to Pay と法規制上の要件に必要なデータだけを収集します。
* **不足データを適切に処理します。** データが不足している場合は、登録 API を呼び出す前に、1 つの整理されたフローでエンドユーザーに入力を完了してもらいます。
* **オプトアウトについて透明性を確保します。** オプトアウトの方法と Click to Pay データの扱いを明確に説明し、簡単に再登録できる方法を提供します。
* **アクセシビリティとローカライズをサポートします。** すべての Click to Pay メッセージと同意画面で、わかりやすい言葉、見やすいコントラスト、ローカライズされた文言を使用します。

## 各フローの使用タイミング

次のような場合に、このページのフローを使用します:

* **新規カード申請時の Click to Pay 登録**：エンドユーザーが新しいカードを申請または有効化しており、オンボーディング体験の一部として Click to Pay を案内したい場合。
* **Click to Pay 登録前に不足しているエンドユーザー情報を要求**：エンドユーザーの既存カードが Click to Pay の対象であるものの、必須データ（たとえばメールアドレスや携帯電話番号）が不足または未完了の場合。
* **Click to Pay プロファイル詳細を更新**：エンドユーザーが、通常はカード設定またはプロフィール設定から、連絡先情報や請求先住所など Click to Pay プロファイルに影響する詳細を変更したい場合。
* **Click to Pay のオプトアウト**：エンドユーザーが特定のカードまたはプロファイルで Click to Pay の使用を停止したい場合、またはコンプライアンスやサポート上の理由でオプトアウト機能を提供する必要がある場合。

## 新規カード申請時の Click to Pay 登録

エンドユーザーが新しいカードを申請したときは、そのカードを Click to Pay に登録するために必要なデータを収集する絶好のタイミングです。技術的な統合の詳細については、 [Click to Pay にカードを登録](/click-to-pay/ja/implement-click-to-pay-issuers/enroll-cards-in-click-to-pay.md).

{% stepper %}
{% step %}

#### エンドユーザー情報と利用規約を収集

* 新規カード申請フロー中に、Click to Pay に必要なすべての詳細情報を収集するための項目を表示します（たとえば、メールアドレスや携帯電話番号）。
* いずれかの情報が不足している場合は、イシュアアプリケーションまたはオンラインバンキングのWebサイトでエンドユーザーに入力してもらうようにします。
* Click to Pay 固有の規約を含む最新の利用規約を表示し、明示的な同意を取得します。
  {% endstep %}

{% step %}

#### エンドユーザーを認証

* 必要なデータと利用規約への同意を取得したら、エンドユーザーを認証します（たとえば、通常の ID\&V 手法を通じて SCA を使用します）。
  {% endstep %}

{% step %}

#### Click to Pay 登録 API を呼び出す

* データを収集し、エンドユーザーの認証が完了したら、 [Click to Pay 登録 API](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md).
* その後、決済ネットワークが Click to Pay デジタルカードを作成し、エンドユーザーは Click to Pay に対応する加盟店でそのカードを利用できます。

**注記**

* 物理カードの有効化後にのみカードを登録したい場合は、エンドユーザーがカードを有効化した後で API を呼び出してください。
  {% endstep %}
  {% endstepper %}

<figure><img src="/files/5e0884fa67517bcc755db303a23b775cbf26c37c" alt=""><figcaption></figcaption></figure>

## Click to Pay 登録前に不足しているエンドユーザー情報を要求

既存カードの場合、必要なエンドユーザー情報がすべてそろい次第、Click to Pay 登録 API を呼び出せます。一部の情報が不足している場合は、カードを登録する前にイシュアアプリケーションまたはオンラインバンキングのWebサイトで収集します。実装オプションについては、 [Click to Pay にカードを登録](/click-to-pay/ja/implement-click-to-pay-issuers/enroll-cards-in-click-to-pay.md).

{% stepper %}
{% step %}

#### エンドユーザーに通知して不足データを要求

* エンドユーザーに通知し（たとえば、プッシュ通知やアプリ内バナーで）、不足している Click to Pay 必要データの入力を促します。
  {% endstep %}

{% step %}

#### 認証して登録

* エンドユーザーが詳細を確認し、認証に成功したら、 [Click to Pay 登録 API](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md).
  {% endstep %}

{% step %}

#### 利用規約を管理

* 更新された利用規約が必要な場合は、不足している情報を収集した直後の同じフローで表示し、同意を取得します。
  {% endstep %}
  {% endstepper %}

<figure><img src="/files/45795cf69564e2d170a3788f6e9d21f82acebeea" alt=""><figcaption></figcaption></figure>

## Click to Pay プロファイル詳細を更新

エンドユーザーは、Click to Pay プロファイルに紐づく情報を更新する必要がある場合があります。すべての情報をローカルに保存する必要はありません。Click to Pay のプロファイル表示 API を使用して、決済ネットワークが保持している完全なデータを取得できます。API フロー全体については、 [Click to Pay プロファイルを取得](/click-to-pay/ja/implement-click-to-pay-issuers/retrieve-click-to-pay-profiles.md) と [Click to Pay プロファイルを更新](/click-to-pay/ja/implement-click-to-pay-issuers/update-click-to-pay-profiles.md).

{% stepper %}
{% step %}

#### 既存のプロファイルを取得

* 次を使用します: [Click to Pay の消費者プロフィール取得 API](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md) エンドユーザーの完全なプロフィールを取得し、イシュアアプリケーションまたはオンラインバンキングのWebサイトに関連する詳細を表示します。
  {% endstep %}

{% step %}

#### エンドユーザーが詳細を編集できるようにする

* エンドユーザーが、あなたの画面で必要な項目を更新できるようにします（たとえば、メールアドレスや請求先住所）。
* エンドユーザーが変更を承認し、認証に成功したら、該当する更新 API を呼び出します。

使用する API:

* Click to Pay の消費者更新([API の概要](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md))
* Click to Pay のカード更新([API の概要](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md))
  {% endstep %}
  {% endstepper %}

<figure><img src="/files/40d1b7ec58c1eef529b7eee83e475e768269c8c9" alt=""><figcaption></figcaption></figure>

## Click to Pay のオプトアウト

エンドユーザーは、イシュアアプリケーションまたはオンラインバンキングのWebサイトから、いつでも Click to Pay をオプトアウトできなければなりません。技術的な詳細については、 [Click to Pay オプトアウト API](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md).

{% stepper %}
{% step %}

#### オプトアウトの選択肢を提供

* イシュアアプリケーションまたはオンラインバンキングのWebサイトで明確なオプトアウトの選択肢を提供し、エンドユーザーに操作の確認を求めます。
  {% endstep %}

{% step %}

#### 認証してオプトアウト API を呼び出す

* 確認と認証が成功した後、 [Click to Pay オプトアウト API](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md) を呼び出して、決済ネットワークにリクエストを送信します。
  {% endstep %}

{% step %}

#### オプトアウト後の体験を定義

* オプトアウト後も、以前提供された Click to Pay の詳細を読み取り専用で表示してよい場合があります。
* 必要に応じて、エンドユーザーが簡単に再参加し、カードを Click to Pay に再登録できる方法を提供します。
  {% endstep %}
  {% endstepper %}

<figure><img src="/files/8af56179ff82fda392057b2f3cadd684b6769b81" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.payments.thalescloud.io/click-to-pay/ja/get-started/overview/click-to-pay-ux-examples.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.