> 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 例

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

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

技術的な詳細は、こちらを参照してください。 [Click to Pay を実装する](/click-to-pay/ja/implement-click-to-pay-issuers.md).

## 設計チェックリスト

イシュアのアプリケーションまたはオンラインバンキングサイトで 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 に必要なすべての詳細を収集するための項目を表示します（たとえば、メールアドレスや携帯電話番号）。
* 詳細が不足している場合は、エンドユーザーにイシュアのアプリケーションまたはオンラインバンキングサイトで入力してもらいます。
* 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/f482a06359f6035f80726c6cc5a98dd2bd69898e" alt=""><figcaption></figcaption></figure>

## Click to Pay 登録の前に不足しているエンドユーザー詳細を要求する

既存カードの場合、必要なエンドユーザー詳細がすべて揃い次第、Click to Pay 登録 API を呼び出せます。詳細が不足している場合は、カードを登録する前にイシュアのアプリケーションまたはオンラインバンキングサイトで収集してください。実装オプションについては、こちらを参照してください。 [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 の view profiles 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 get consumer profiles API](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md) を使用して、エンドユーザーの完全なプロフィールを取得し、イシュアのアプリケーションまたはオンラインバンキングサイトに関連する詳細を表示します。
  {% endstep %}

{% step %}

#### エンドユーザーに詳細の編集を許可する

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

使用する API：

* Click to Pay update consumer （[API の概要](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md))
* Click to Pay update card （[API の概要](/click-to-pay/ja/integrate-the-d1-api/d1-api-summary.md))
  {% endstep %}
  {% endstepper %}

<figure><img src="/files/9112b8518e8368e6f24ac7e902ea26c863c6ac99" alt=""><figcaption></figcaption></figure>

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

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

{% stepper %}
{% step %}

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

* イシュアのアプリケーションまたはオンラインバンキングサイトで明確なオプトアウトの選択肢を提供し、エンドユーザーにその操作の確認を求めます。
  {% 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/bb7959449f6ce236958fa6e95873fda36bd304c6" 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.