Using Stripe with Angular 5

Question

I have an angular application that uses Stripe to save customer payment card info.

I include this script in my index.html

<script src="https://js.stripe.com/v3/"></script>

this script provides a "Stripe" object that I can use like this:

<script> var stripe = Stripe('pk_XXXXXXXXXXX') </script>

the question is: How can I access the Stripe object from my angular typescript code?

Answer 1

Try to use

npm i stripe-payment-component

for angular typescript version.

Answer 2

Register the type in typings.d.ts

declare var Stripe: any;

Instantiate a Stripe object from a Service

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

@Injectable()
export class PaymentService {

  stripe = Stripe('pk_test_XXXXX');

}

Now you can inject this service into your components and interact with elements, but make sure to use AfterViewInit.

export class SomeComponent implements AfterViewInit {

  elements: any;

  constructor(private pmt: PaymentService) 

  ngAfterViewInit() {
    // initalize elements
    this.elements = this.pmt.stripe.elements()
  }

}