Express Checkout Element

The Express Checkout Element gives you a single integration for accepting payments through one-click payment buttons. Supported payment methods include Link, Apple Pay, Google Pay, and Paypal.

Basic Example

Integrating the Express Checkout Element with ngx-stripe involves a few straightforward steps. Below, we provide an example of how to set up and use the Express Checkout Element in your Angular application.

For detailed information about the Express Checkout Element and its usage, refer to the official Stripe documentation.

        import { Component, inject } from '@angular/core';

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

import { YourOwnAPIService } from '../core';

@Component({
  selector: 'ngstr-express-checkout-element-example',
  template: `
    <div maxWidth="900">
      <div color="secondary" section-content-header>
        <span>Express Checkout Element</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
          <ngx-stripe-express-checkout [options]="options" />
        </ngx-stripe-elements>
        <button (click)="pay()">PAY</button>
      </div>
    </div>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripeExpressCheckoutComponent
  ]
})
export default class ExpressCheckoutElementExampleComponent {
  private readonly yourOwnAPI = inject(YourOwnAPIService);

  stripe = injectStripe(this.plutoService.KEYS.main);
  elementsOptions: StripeElementsOptions = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    locale: 'es'
  };

  options: StripeExpressCheckoutElementOptions = {
    buttonType: {
      applePay: 'buy',
      googlePay: 'buy'
    }
  };

  pay() {}
}

Click Event

The click event is triggered from an Express Checkout Element when the customer clicks a payment button. Use this event to configure the payment interface.

You must call the resolve function with all the status info to display the payment interface. Refer to the official docs for more details.

Notice the event name is clicked, not click that could cause a conflict with the native click event.

        import { Component, inject } from '@angular/core';

import {
  injectStripe,
  StripeElementsDirective,
  StripeExpressCheckoutComponent
} from 'ngx-stripe';
import {
  StripeElementsOptions,
  StripeExpressCheckoutElementOptions,
  StripeExpressCheckoutElementClickEvent
} from '@stripe/stripe-js';

import { YourOwnAPIService } from '../core';

@Component({
  selector: 'ngstr-express-checkout-element-example',
  template: `
    <div maxWidth="900">
      <div color="secondary" section-content-header>
        <span>Express Checkout Element</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
          <ngx-stripe-express-checkout
            [options]="options"
            (clicked)="onClicked($event)"
          />
        </ngx-stripe-elements>
        <button (click)="pay()">PAY</button>
      </div>
    </div>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripeExpressCheckoutComponent
  ]
})
export default class ExpressCheckoutElementExampleComponent {
  private readonly yourOwnAPI = inject(YourOwnAPIService);

  stripe = injectStripe(this.plutoService.KEYS.main);
  elementsOptions: StripeElementsOptions = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    locale: 'es'
  };

  options: StripeExpressCheckoutElementOptions = {
    buttonType: {
      applePay: 'buy',
      googlePay: 'buy'
    }
  };

  onClicked(event: StripeExpressCheckoutElementClickEvent) {
    const { elementType, expressPaymentType, resolve } = event;

    // You must call the resolve function within 1 second
  }
}

Confirm Event

The confirm event is triggered from an Express Checkout Element when the customer finalizes their payment. Use this event to trigger payment confirmation.

        import { Component, inject } from '@angular/core';

import {
  injectStripe,
  StripeElementsDirective,
  StripeExpressCheckoutComponent
} from 'ngx-stripe';
import {
  StripeElementsOptions,
  StripeExpressCheckoutElementOptions,
  StripeExpressCheckoutElementConfirmEvent
} from '@stripe/stripe-js';

import { YourOwnAPIService } from '../core';

@Component({
  selector: 'ngstr-express-checkout-element-example',
  template: `
    <div maxWidth="900">
      <div color="secondary" section-content-header>
        <span>Express Checkout Element</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
          <ngx-stripe-express-checkout
            [options]="options"
            (confirm)="onConfirm($event)"
          />
        </ngx-stripe-elements>
        <button (click)="pay()">PAY</button>
      </div>
    </div>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripeExpressCheckoutComponent
  ]
})
export default class ExpressCheckoutElementExampleComponent {
  @ViewChild(StripeExpressCheckoutComponent)
  expressCheckout!: StripeExpressCheckoutComponent;

  private readonly yourOwnAPI = inject(YourOwnAPIService);

  stripe = injectStripe(this.plutoService.KEYS.main);
  elementsOptions: StripeElementsOptions = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    locale: 'es',
    clientSecret: '{{ YOUR_CLIENT_SECRET  }}'
  };

  options: StripeExpressCheckoutElementOptions = {
    buttonType: {
      applePay: 'buy',
      googlePay: 'buy'
    }
  };

  onConfirm(event: StripeExpressCheckoutElementConfirmEvent) {
    const { elementType, expressPaymentType, paymentFailed } = event;

    // You can only call `paymentFailed` before calling `confirmPayment` to signal
    // an error before payment confirmation.

    this.stripe
      .confirmPayment({
        elements: this.expressCheckout.elements,
        clientSecret: this.elementsOptions.clientSecret,
        confirmParams: {
          return_url: 'https://ngx-stripe.dev'
        }
      })
      .subscribe((result) => {
        // Handle result.error or result.paymentIntent
      });
  }
}

Cancel Event

The cancel event is triggered from an Express Checkout Element when the payment interface is dismissed.

Note that in some browsers, the payment interface might be dismissed by the customer even after they authorize the payment. This means that you might receive a cancel event after receiving a confirm event. If you're using the cancel event as a hook for canceling the customer's order, make sure you also refund the payment that you just created.

        import { Component, inject } from '@angular/core';

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

import { YourOwnAPIService } from '../core';

@Component({
  selector: 'ngstr-express-checkout-element-example',
  template: `
    <div maxWidth="900">
      <div color="secondary" section-content-header>
        <span>Express Checkout Element</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
          <ngx-stripe-express-checkout
            [options]="options"
            (cancel)="onCancel()"
          />
        </ngx-stripe-elements>
        <button (click)="pay()">PAY</button>
      </div>
    </div>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripeExpressCheckoutComponent
  ]
})
export default class ExpressCheckoutElementExampleComponent {
  private readonly yourOwnAPI = inject(YourOwnAPIService);

  stripe = injectStripe(this.plutoService.KEYS.main);
  elementsOptions: StripeElementsOptions = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    locale: 'es'
  };

  options: StripeExpressCheckoutElementOptions = {
    buttonType: {
      applePay: 'buy',
      googlePay: 'buy'
    }
  };

  onCancel() {
    // handle cancel event
  }
}

Shipping Events

The shippingaddresschange event is triggered from an Express Checkout Element whenever the customer selects a new address in the payment interface.

The shippingratechange event is triggered from an Express Checkout Element whenever the customer selects a new shipping rate in the payment interface.

        import { Component, inject } from '@angular/core';

import {
  injectStripe,
  StripeElementsDirective,
  StripeExpressCheckoutComponent
} from 'ngx-stripe';
import {
  StripeElementsOptions,
  StripeExpressCheckoutElementOptions,
  StripeExpressCheckoutElementShippingAddressChangeEvent,
  StripeExpressCheckoutElementShippingRateChangeEvent
} from '@stripe/stripe-js';

import { YourOwnAPIService } from '../core';

@Component({
  selector: 'ngstr-express-checkout-element-example',
  template: `
    <div maxWidth="900">
      <div color="secondary" section-content-header>
        <span>Express Checkout Element</span>
      </div>
      <div section-content>
        <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
          <ngx-stripe-express-checkout
            [options]="options"
            (shippingaddresschange)="onShippingAddressChange()"
            (shippingratechange)="onShippingRateChange()"
          />
        </ngx-stripe-elements>
        <button (click)="pay()">PAY</button>
      </div>
    </div>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripeExpressCheckoutComponent
  ]
})
export default class ExpressCheckoutElementExampleComponent {
  private readonly yourOwnAPI = inject(YourOwnAPIService);

  stripe = injectStripe(this.plutoService.KEYS.main);
  elementsOptions: StripeElementsOptions = {
    mode: 'payment',
    amount: 1099,
    currency: 'usd',
    locale: 'es'
  };

  options: StripeExpressCheckoutElementOptions = {
    buttonType: {
      applePay: 'buy',
      googlePay: 'buy'
    }
  };

  onShippingAddressChange(event: StripeExpressCheckoutElementShippingAddressChangeEvent) {
    const { name, address, resolve, reject } = event;
    const { city, state, postal_code, country } = address;

    // handle shippingaddresschange event

    // call event.resolve within 20 seconds
  }

  onShippingRateChange(event: StripeExpressCheckoutElementShippingRateChangeEvent) {
    const { shippingRate, resolve, reject } = event;
    const { id, amount, displayName } = shippingRate;

    // handle shippingratechange event

    // call event.resolve within 20 seconds
  }
}

arrow_back

Core Concepts - Previous
Payment Element

Next - Core Concepts
Link Authentication Element

arrow_forward