Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
About Stripe payments
Upgrade your integration
Payments analytics
Online payments
OverviewFind your use caseManaged Payments
Use Payment Links
Build a checkout page
Build an advanced integration
Build an in-app integration
Payment methods
Add payment methods
Manage payment methods
Faster checkout with Link
Payment interfaces
Payment Links
Checkout
Web Elements
    Overview
    Payment Element
    Express Checkout Element
    Address Element
    Currency Selector Element
    Link Authentication Element
    Payment Method Messaging Element
In-app Elements
Payment scenarios
Custom payment flows
Flexible acquiring
Orchestration
In-person payments
Terminal
Other Stripe products
Financial Connections
Crypto
Climate
HomePaymentsWeb Elements

Link Authentication Element

Use the Link Authentication Element to integrate Link.

Copy page

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 Link Authentication Element to create a single email input field for both email collection and Link authentication.

Customer location
Size
Theme
Layout
To see how Link works for a returning user, enter the email demo@stripe.com. To see how Link works during a new signup, enter any other email and complete the rest of the form. This demo only displays Google Pay or Apple Pay if you have an active card with either wallet.
OptionDescription
ThemeUse the dropdown to choose a theme or customize the theme with the Elements Appearance API.
Desktop and mobile sizeUse the dropdown to set the max pixel width of the parent element that the Address Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Customer locationUse the dropdown to choose a location for accepting complete addresses. Changing the location localizes the UI language and displays locally relevant payment methods.
LayoutUse the dropdown to display the element using tabs (displayed horizontally) or accordion (displayed vertically) layouts.

Start with examples

To see the Link Authentication Element in action, start with one of these examples:

Quickstart

Code and instructions for accepting a payment and using the Link Authentication Element to integrate Link.

Clone a sample app on GitHub
HTML · React · Vue

Before you begin

Before you start, you need to register your domain.

Create the Link Authentication Element

The following code creates an instance of the Link Authentication Element and mounts it to the DOM:

checkout.js
// 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 Link Authentication Element. const linkAuthenticationElement = elements.create("linkAuthentication"); // Mount the Elements to their corresponding DOM node linkAuthenticationElement.mount("#link-authentication-element"); paymentElement.mount("#payment-element");

Retrieving email address

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

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

Prefill customer data

The Link Authentication 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:

checkout.js
// Create the Link Authentication Element with the defaultValues option const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}}); // Mount the Link Authentication Element to its corresponding DOM node linkAuthenticationElement.mount("#link-authentication-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:

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

Combine Elements

The Link Authentication 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 Link Authentication Element, Address Element, and Payment Element:

A checkout page that includes the Link Authentication Element, Address Element, and Payment Element.

Use the Link Authentication 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.

Examples of light and dark modes for the payment element checkout form.

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:

index.js
View full sample
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const appearance = { theme: 'flat' variables: { colorPrimaryText: '#262626' } };
Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc
Related Guides
Add Link to an Elements integration
Products Used
Elements