# Contact Details Element

Contact Details Element を使用して Link を統合できます。

[Link](https://stripe.com/payments/link) は、顧客の決済と配送先の情報を保存して自動入力します。顧客は、クレジットカード、デビットカード、アメリカの銀行口座など、さまざまな資金供給元を使用して Link で支払うことができます。詳細は [link.com](https://www.link.com) をご覧ください。

[Contact Details Element](https://docs.stripe.com/js/element/contact_details_element) (以前は LinkAuthentication Element と呼ばれていました) を使用すると、メールアドレスの収集と Link 認証の両方に対応する単一のメールアドレス入力フィールドを作成できます。

| オプション      | 説明                                                                                                          |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| **顧客の所在地** | UI 言語を各地域に適応させ、各地域に適した決済手段を表示してください。                                                                        |
| **サイズ**    | Contact Details Element がマウントされる親 Element の最大ピクセル幅を設定します。750 px (**デスクトップ**) または 320 px (**モバイル**) に設定できます。 |
| **テーマ**    | Element の一般的な外観を選択してください。                                                                                   |
| **レイアウト**  | ドロップダウンを使用して、資金供給元リストを水平方向 (**タブ**) または垂直方向 (**アコーディオン**) に揃えてください。                                         |

## サンプルから開始する

Contact Details Element の動作を確認するには、以下のいずれかの例から始めます。

[クイックスタート](https://docs.stripe.com/payments/link/add-link-elements-integration.md): 決済を受け付け、Contact Details Element を使用して Link を統合するためのコードと手順

[GitHub のサンプルアプリを複製する](https://github.com/stripe-samples/accept-a-payment)

## Before you begin

始める前に、[ドメインを登録](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)する必要があります。

## Contact Details Element を作成

次のコードでは、Contact Details Element のインスタンスを[作成し](https://docs.stripe.com/js/elements_object/create_contact_details_element)、DOM に[マウントし](https://docs.stripe.com/js/element/mount)ます。

#### HTML + JS

```javascript
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

// Create an elements group from the Stripe instance passing in the clientSecret and enabling the loader UI.
const elements = stripe.elements({clientSecret, loader});

// Create an instance of the Contact Details Element.
const contactDetailsElement = elements.create("contactDetails");

// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```

#### React

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  ContactDetailsElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement/>
      <h3>Payment</h3>
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}
```

## メールアドレスの取得

`contactDetailsElement` コンポーネントの `onChange` プロパティを使用すると、メールアドレスの詳細を取得できます。ユーザーがメールアドレスフィールドを更新したとき、または保存済みの顧客のメールアドレスが自動入力されたときに、`onChange` ハンドラが実行されます。

```javascript
contactDetailsElement.on('change', (event) => {
  const email = event.value.email;
});
```

## 顧客データを事前入力する

Contact Details Element はメールアドレスを受け付けます。顧客のメールアドレスを指定すると、[defaultValues](https://docs.stripe.com/js/elements_object/create_contact_details_element#contact_details_element_create-options-defaultValues) オプションを使用して顧客が決済画面にアクセスした時点で、Link の認証フローが開始されます。

```javascript
// Create the Contact Details Element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Mount the Contact Details Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
```

追加の顧客データを事前入力する場合は、[defaultValues.billingDetails](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues-billingDetails) オブジェクトを [Payment Element](https://docs.stripe.com/payments/payment-element.md) に追加します。これにより、顧客の名前、電話番号、配送先住所が事前入力されます。できるだけ多くの顧客情報を事前入力すると、Link アカウントの作成と再利用を効率化できます。

次のコードは、すべての値が事前入力された Payment Element を示しています。

#### React

```jsx
<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;
```

#### HTML + JS

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      name: 'John Doe',
      phone: '888-888-8888',
      address: {
        postal_code: '10001',
        country: 'US',
      },
    },
  },
});

// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```

## Elements を組み合わせる

Contact Details Element は、再訪する Link ユーザー向けに決済情報を事前入力する場合にのみ Payment Element とやり取りします。ただし、以下の Contact Details Element、Address Element、Payment Element を使用した例のように、他の Elements とあわせて表示することもできます。
![Contact Details Element、Address Element、Payment Element を含む決済画面。](https://b.stripecdn.com/docs-statics-srv/assets/cde-with-ae-pe.30a772ba14b5b6b62ea625aea56d6d0c.png)

Contact Details Element を他の Elements と一緒に使用して決済画面を構成する

## 外観

[Appearance API](https://docs.stripe.com/elements/appearance-api.md) を使用して、すべての Elements のスタイルを管理できます。テーマを選択するか、特定の詳細を更新してください。
![Payment Element の決済フォームについて、ライトモードとダークモードの例。](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Appearance API を使用して、Elements の表示とスタイルを変更する

次の例では、「flat」のテーマで Element に使用されるデフォルトのテキストの色を上書きします。

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};
const options = { /* options */ };
const elements = stripe.elements({ clientSecret, appearance }); // 稼働している実装機能では、これはバックエンドが支払い額などの詳細とともに渡す値です。詳しくはサンプル全体をご覧ください。
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```