javascript - Using Stripe with Angular 5 - Stack Overflow

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

I include this script in my index.html

<script src="/"></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?

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./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?

• javascript
• angular
• typescript
• stripe.js

Share Follow asked Dec 16, 2017 at 16:14 Wisam ShakerWisam Shaker 19911 silver badge1313 bronze badges 2

• 1 This can be helpful : blog.mgechev./2016/07/05/using-stripe-payment-with-angular-2 – br.julien Commented Dec 16, 2017 at 17:30
• I've seen this solution, but I only want to do it this way as a last resort. The use of the window object is not a good practice since it might not be consistent on all browsers – Wisam Shaker Commented Dec 16, 2017 at 17:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 ponents 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()
  }

}

Try to use

npm i stripe-payment-ponent

for angular typescript version.

Try this npm: ngx-stripe-checkout

With this you can integrate stripe checkout easily in angular.

For more details : https://www.npmjs./package/ngx-stripe-checkout.