Elements

Stripe Elements are pre-built UI components designed to securely collect payment details, simplifying the integration of Stripe's payment processing capabilities.

Create an Elements Instance

Use an Elements instance to create and manage a group of individual Element instances. In Ngx Stripe, the Elements instance is created using the StripeElementsDirective.

For more information on customization details, refer to the official Stripe documentation .

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

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
      <ngx-stripe-payment />
    </ngx-stripe-elements>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripePaymentElementComponent
  ]
})
export class AppComponent {
  stripe = injectStripe({{your-stripe-publishable-key}});
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };
}

Fetch Updates

If you're using the Payment Element, you can fetch updates from the associated card PaymentIntent or SetupIntent on an existing Element instance, and reflect those updates in the Payment Element.

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

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
      <ngx-stripe-payment />
    </ngx-stripe-elements>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripePaymentElementComponent
  ]
})
export class AppComponent {
  @ViewChild(StripeElementsDirective) elements!: StripeElementsDirective;

  stripe = injectStripe({{your-stripe-publishable-key}});
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };

  fetchUpdates() {
    this.elements.fetchUpdates();
  }
}

Update Elements

You can update the options of an existing Element instance by calling the update method, similar to how you call fetchUpdates. However, there is an easier way. You can update the Elements instance simply by changing the options object. The component will calculate the differences and update the Elements instance accordingly.

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

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
      <ngx-stripe-payment />
    </ngx-stripe-elements>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripePaymentElementComponent
  ]
})
export class AppComponent implements OnInit {
  @ViewChild(StripeElementsDirective) elements!: StripeElementsDirective;

  stripe = injectStripe({{your-stripe-publishable-key}});
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };

  ngOnInit() {
    // But can simply be done by updating the options
    setTimeout(() => {
      this.elementsOptions.locale = 'fr';
    }, 1000);
  }

  update(options: StripeElementsUpdateOptions) {
    // This is the imperative way to update the elements
    this.elements.update();
  }
}

Get Element

Use this method to retrieve an Element instance from the Elements instance.

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

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
      <ngx-stripe-payment />
    </ngx-stripe-elements>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripePaymentElementComponent
  ]
})
export class AppComponent {
  @ViewChild(StripeElementsDirective) elements!: StripeElementsDirective;

  stripe = injectStripe({{your-stripe-publishable-key}});
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };

  getElement() {
    const paymentElement = this.elements.getElement('payment');

    console.log(paymentElement instanceof StripePaymentElement); // true
  }
}

Submit

Use submit when creating the Elements object without an Intent. Before confirming a payment, call submit to validate the form fields and collect any data required for wallets.

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

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
      <ngx-stripe-payment />
    </ngx-stripe-elements>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripePaymentElementComponent
  ]
})
export class AppComponent {
  @ViewChild(StripeElementsDirective) elements!: StripeElementsDirective;

  stripe = injectStripe({{your-stripe-publishable-key}});
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };

  submit() {
    this.elements.submit();
  }
}

Default Stripe Instance

If you have set your Stripe Key in either the forRoot call or the provideNgxStripe, a default Stripe instance will be automatically created. This instance can be used to create Elements. Fetch it by calling injectStripe with no parameters.

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

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

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions">
      <ngx-stripe-payment />
    </ngx-stripe-elements>
  `,
  standalone: true,
  imports: [
    StripeElementsDirective,
    StripePaymentElementComponent
  ]
})
export class AppComponent {
  stripe = injectStripe();
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };
}

Implicit Elements

Certain elements, such as the Payment Element, can be used without an Elements instance. You can directly pass the elements' options for creation. However, this approach is considered deprecated and is maintained solely for backward compatibility. It is recommended to use an Elements instance, especially when combining multiple elements. Below is an example of how to use the Payment Element without an Elements instance.

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

import { StripeElementsOptions } from '@stripe/stripe-js';
import { injectStripe, StripePaymentElementComponent } from 'ngx-stripe';

@Component({
  selector: 'app-root',
  template: `
    <ngx-stripe-payment [stripe]="stripe" [elementsOptions]="elementsOptions" />
  `,
  standalone: true,
  imports: [
    StripePaymentElementComponent
  ]
})
export class AppComponent {
  stripe = injectStripe({{your-stripe-publishable-key}});
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    // passing the client secret obtained from the server
    clientSecret: '{{CLIENT_SECRET}}'
  };
}

arrow_back

Getting Started - Previous
Setup Application

Next - Core Concepts
Payment Element

arrow_forward