Link Authentication Element

The Link Authentication Element enables seamless collection of email addresses and facilitates user login via Link on your checkout page. This embeddable component is designed to enhance the checkout experience by providing a streamlined authentication process.

To gain a deeper understanding of the Link Authentication Element, consult the Stripe documentation.

There are three primary methods to secure a customer's email address for Link authentication and enrollment:

Pass in an Email Address: An email address can be supplied to the Payment Element using defaultValues. This method is recommended if you are already collecting the customer's email or phone number during the checkout process.
Collect an Email Address: The Payment Element can be configured to collect an email address directly. Opt for this approach if the email address is not being collected elsewhere in the checkout flow.
Link Authentication Element: Utilize the Link Authentication Element to create a dedicated input field for both email collection and Link authentication.

This guide concentrates on the Link Authentication Element, as it necessitates the integration of a new element. For the other methods, refer to the Payment Element guide and ensure Link is enabled in your Stripe Account. For further details, visit the Stripe documentation .

Using the Link Authentication Element

The Link Authentication Element is ideal if you:

Require a unified component for both email collection and Link authentication.
Need to collect a shipping address from your customer.

Note that, unlike the Payment Element example , the email is not provided directly in the confirmPayment call when using the Link Authentication Element. This element autonomously handles the collection of email details.

        <div [formGroup]="paymentElementForm">
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="name" formControlName="name" />
  </mat-form-field>
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="Address" formControlName="address" />
  </mat-form-field>
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="ZIP Code" formControlName="zipcode" />
  </mat-form-field>
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="city" formControlName="city" />
  </mat-form-field>
  @if (elementsOptions.clientSecret) {
    <ngx-stripe-elements
      [stripe]="stripe"
      [elementsOptions]="elementsOptions"
    >
      <h3>Contact Info</h3>
      <ngx-stripe-link-authentication [options]="linkOptions" />

      <h3>Payment</h3>
      <ngx-stripe-payment [options]="paymentElementOptions" />
    </ngx-stripe-elements>
  }
  <button (click)="pay()">PAY</button>
</div>

Retrieving the Email Address

The email address can be obtained using the change event on the Link Authentication component. This event is triggered whenever the user updates the email field or when a saved customer email is auto-filled.

        <div [formGroup]="paymentElementForm">
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="name" formControlName="name" />
  </mat-form-field>
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="Address" formControlName="address" />
  </mat-form-field>
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="ZIP Code" formControlName="zipcode" />
  </mat-form-field>
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="city" formControlName="city" />
  </mat-form-field>
  @if (elementsOptions.clientSecret) {
    <ngx-stripe-elements
      [stripe]="stripe"
      [elementsOptions]="elementsOptions"
    >
      <h3>Contact Info</h3>
      <ngx-stripe-link-authentication [options]="linkOptions" (change)="onChange($event)" />

      <h3>Payment</h3>
      <ngx-stripe-payment [options]="paymentElementOptions" />
    </ngx-stripe-elements>
  }
  <button (click)="pay()">PAY</button>
</div>

arrow_back

Core Concepts - Previous
Express Checkout Element

Next - Core Concepts
Address Element

arrow_forward