Contact Details Element

Link saves and autofills customer payment and shipping information. Customers can use different funding sources to pay with Link, including credit cards, debit cards, and US bank accounts. Learn more at link.com.

Use the Contact Details Element (previously known as the Link Authentication Element) to create a single email input field for both email collection and Link authentication.

Start with examples

To see the Contact Details Element in action, start with one of these examples:

Before you begin

Before you start, you need to register your domain.

Create the Contact Details Element

The following code creates an instance of the Contact Details Element and mounts it to the DOM:

// 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");

Retrieving email address

You can retrieve the email address details using the onChange prop on the contactDetailsElement component. The onChange handler fires whenever the user updates the email field, or when a saved customer email is autofilled.

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

Prefill customer data

The Contact Details Element accepts an email address. Providing a customer’s email address starts the Link authentication flow as soon as the customer lands on the payment page using the defaultValues option:

// 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");

If you want to prefill additional customer data, add the defaultValues.billingDetails object to the Payment Element. This prefills a customer’s name, phone number, and shipping addresses. By prefilling as much of your customer’s information as possible, you simplify Link account creation and reuse.

The following code shows a Payment Element with all of its values prefilled:

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

Combine Elements

The Contact Details Element only interacts with the Payment Element by prefilling payment information for returning Link users. However, it can still be displayed with other Elements as well, like the following example with the Contact Details Element, Address Element, and Payment Element:

Use the Contact Details Element with other Elements to compose your checkout page

Appearance

You can use the Appearance API to control the style of all Elements. Choose a theme or update specific details.

Use the Appearance API to change the look and style of your Elements

In the following example, the “flat” theme overrides the default text color used for Elements:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};