randhawp / angular-stripe-service

Angular Stripe Service

Angular Stripe Service

Stripe service used to integrate Stripe Elements with Angular.

Documentation

Integrating Stripe Elements with Angular

Stackblitz

Stackblitz Demo

Usage

  constructor(
    private cd: ChangeDetectorRef,
    private stripeService:AngularStripeService) {}

  ngAfterViewInit() {
    this.stripeService.setPublishableKey('pk_test_2syov9fTMRwOxYG97AAXbOgt008X6NL46o').then(
      stripe=> {
        this.stripe = stripe;
    const elements = stripe.elements();    
    this.card = elements.create('card');
    this.card.mount(this.cardInfo.nativeElement);
    this.card.addEventListener('change', this.cardHandler);
    });
}

Why?

The @fireflysemantics/angular-stripe-service service injects the Stripe scripts for us and waits for it to load before attempting to initialize elements.

The reason this is important is that if our component containing the Stripe form is loaded before Stripe has a chance to initialize elements then the form will not paint correctly.

In other words the Stripe API download and subsequent elements construction is racing the construction of the credit card form component.

If the form component wins that race, the component does not get constructed right, because elements is not yet available.