# Contact Details Element の詳細を見る

メールアドレスの収集と Link の認証の両方に対応する 1 つのメールアドレス入力を作成します。

顧客のメールアドレスがすでに分かっている場合は、代わりに [Payment Element に直接渡します](https://docs.stripe.com/payments/link/payment-element-link.md?elements=pass-email)。

Elements 連携に [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-element.md) (旧称: Link Authentication Element) を追加すれば、メールアドレスの収集と Link 認証の両方に使える 1 つのメールアドレス入力欄を作成できます。顧客が Link アカウントを持っておらず、対応している決済手段 (クレジットカード、デビットカード、アメリカの銀行) のいずれかを選択した場合は、登録するオプションが表示されます。

また、顧客にすでに Link アカウントがある場合は、ワンタイムパスワードで認証され、Payment Element に決済情報が自動的に入力されます。
![決済画面の一部として Contact Details Element を使用する](https://b.stripecdn.com/docs-statics-srv/assets/contact-details-element.8c4f44b62b56336cc7ae2bcccc31ab6f.png)

決済画面の一部として Contact Details Element を使用する

## Contact Details Element を追加

Contact Details Element を決済画面の先頭に配置し、その後に [Address Element](https://docs.stripe.com/elements/address-element.md) (任意)、続いて Payment 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 optionally prefilling a customer's email address.
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Passing in defaultValues is optional, but useful if you want to prefill customer information to simplify the customer experience.
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      name: 'John Doe',
      phone: '888-888-8888',
    },
  },
});

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

`contactDetailsElement` はメールアドレス入力欄を表示します。Link が顧客のメールアドレスを既存の Link アカウントと照合すると、認証のために安全なワンタイムコードを顧客の電話に送信します。顧客が正常に認証されると、Stripe は Link に保存済みの住所と決済手段を自動的に表示するため、顧客はそれらを使用できます。さらに、[ドメインを登録する](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)必要があります。

#### React

決済ページで、決済フォームを `Elements` コンポーネントでラップし、[client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を渡します。

既存のメールアドレス入力欄を `ContactDetailsElement` に置き換えます。顧客のメールアドレスが既存の Link アカウントと一致する場合、Link は顧客の電話に安全なワンタイムコードを送信して認証します。正常に認証されると、Stripe は Link に保存済みの住所と決済手段を自動入力します。

[defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) を使用して、可能な限り多くの顧客の情報を渡し、顧客の決済プロセスをスピードアップします。

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

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

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// 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
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            email: 'foo@bar.com',
          },
        }}
      />
      <h3>Payment</h3>
      <PaymentElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            billingDetails: {
              name: 'John Doe',
              phone: '888-888-8888',
            },
          },
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

Contact Details Element、Payment Element、Address Element を同じページに配置する必要はありません。決済フロー内で最も適切な場所に各 Element を表示できます。

> 決済フローの早い段階で Contact Details Element を使用してメールアドレスを収集する場合は、配送先住所入力画面や決済画面に追加する必要はありません。1 回だけ表示してください。

### メールアドレスを取得する

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

```jsx
<ContactDetailsElement onChange={(event) => {
  setEmail(event.value.email);
}} />
```

## See also

- [Stripe Web Elements](https://docs.stripe.com/payments/elements.md)
- [Payment Element](https://docs.stripe.com/payments/payment-element.md)
- [Address Element](https://docs.stripe.com/elements/address-element.md)