Address Element

The Address Element is an embeddable component for collecting local and international billing and shipping addresses.

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

The Address Element can autocomplete addresses for 25 countries. If your customer selects a supported country for their address, then they see the autocomplete options. You can check the list of supported countries here.

If you use the Address Element and the Payment Element together, Stripe enables autocomplete with no configuration required.

Creating an Address Element

When you create an Address Element, specify whether to use it in shipping or billing mode.

In shipping mode, the element does two things:

Collect a shipping address.
Offer the customer the option to use it as a billing address too.

In billing mode, the element only collects a billing address.

        <div [formGroup]="addressElementForm">
  <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="Email" type="email" formControlName="email" />
  </mat-form-field>
  @if (elementsOptions.clientSecret) {
    <ngx-stripe-elements
      [stripe]="stripe"
      [elementsOptions]="elementsOptions"
    >
      <ngx-stripe-address #shippingAddress [options]="shippingAddressOptions" />
      <ngx-stripe-address #billingAddress [options]="billingAddressOptions" />
    </ngx-stripe-elements>
  }
  <button (click)="pay()">PAY</button>
</div>

Get Address Value

The getValue() validates and retrieves form values from an Address Element. If there are any input validation errors, the errors will display by their respective fields.

        import { Component, inject, OnInit, ViewChild } from '@angular/core';
import { UntypedFormBuilder, Validators } from '@angular/forms';

import { MatInputModule } from '@angular/material/input';

import {
  injectStripe,
  StripeElementsDirective,
  StripeAddressComponent
} from 'ngx-stripe';
import {
  StripeElementsOptions,
  StripeAddressElementOptions
} from '@stripe/stripe-js';

import { YourOwnAPIService } from './your-own-api.service';

@Component({
  selector: 'ngstr-checkout-form',
  templateUrl: './address-element.component.html',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatInputModule,
    StripeElementsDirective,
    StripeAddressComponent
  ]
})
export class CheckoutFormComponent implements OnInit {
  @ViewChild('shippingAddress') shippingAddress!: StripeAddressComponent;

  private readonly fb = inject(UntypedFormBuilder);
  private readonly yourOwnAPI = inject(YourOwnAPIService);

  addressElementForm = this.fb.group({
    name: ['John doe', [Validators.required]],
    email: ['[email protected]', [Validators.required]],
    amount: [2500, [Validators.required, Validators.pattern(/d+/)]]
  });

  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    appearance: {
      theme: 'flat'
    },
  };

  shippingAddressOptions: StripeAddressElementOptions = {
    mode: 'shipping'
  };

  billingAddressOptions: StripeAddressElementOptions = {
    mode: 'billing'
  };

  // Replace with your own public key
  stripe = injectStripe(this.yourOwnAPI.StripePublicKey);

  ngOnInit() {
    this.yourOwnAPI
      .createPaymentIntent({
        amount: this.addressElementForm.get('amount').value,
        currency: 'usd'
      })
      .subscribe(pi => {
        this.elementsOptions.clientSecret = pi.client_secret as string;
      });
  }

  async getAddressValue() {
    const result = await this.shippingAddress.getValue();
    const { complete, isNewAddress, value } = result;

    // if complete is true, you can allow the user to the next step
    // Optionally: you can use value to store address details
  }

  pay() {
    // ... handle payment here
  }
}

Autofill with Link

Link, Stripe's one-click checkout tool, saves and autofills payment and shipping information. When a returning Link customer authenticates, Stripe autofills their shipping information in the Address element.

        <div [formGroup]="addressElementForm">
  <mat-form-field class="example-full-width" appearance="fill">
    <input matInput placeholder="name" formControlName="name" />
  </mat-form-field>
  @if (elementsOptions.clientSecret) {
    <ngx-stripe-elements
      [stripe]="stripe"
      [elementsOptions]="elementsOptions"
    >
      <ngx-stripe-link-authentication [options]="linkOptions" />
      <ngx-stripe-address [options]="shippingAddressOptions" />
      <ngx-stripe-address [options]="billingAddressOptions" />
      <ngx-stripe-payment [options]="paymentElementOptions" />
    </ngx-stripe-elements>
  }
  <button (click)="pay()">PAY</button>
</div>

arrow_back

Core Concepts - Previous
Link Authentication Element

Next - Core Concepts
Issuing Elements

arrow_forward