How to integrate latest version of stripe payment gateway (Server checkout) in angular-8?

Question

I am using the latest version of angular which is Angular(v8.1.2). Now I need to integrate the latest version of stripe (API version 2019-05-16) payment gateway in my project. Specifically I want to add Server checkout payment of stripe.

I have tried to integrate using npm module @types/stripe but it's not working.

import * as Stripe from 'stripe'; const stripe = new Stripe("sk_test_B...");

It should work but getting the below errors ... ERROR in ./src/app/app.component.ts Module not found: Error: Can't resolve 'stripe' in '/home/helal/Desktop/Angular/stripe-checkout/src/app' ℹ ｢wdm｣: Failed to compile

UPDATE

Finally, I have solved this issue.
1) My Front-end is Angular and created backend API in NodeJS
2) Created session id (stripe) in API (at backend, NodeJS)
3) Then using the session id, redirected to stripe hosted page from angular component ts file. I am giving example code below form more clarification.

Bankend Code Example

const stripe = Stripe('sk_test_*****************');

stripe.checkout.sessions.create(
  {
    success_url: 'http://localhost:4200/success',
    cancel_url: 'http://localhost:4200/cancel',
    payment_method_types: ['card'],
    line_items: [
      {
        name: 'T-shirt',
        description: 'Comfortable cotton t-shirt',
        amount: 1500,
        currency: 'usd',
        quantity: 2,
      },
    ],
  },
  (err, session) => {
    // asynchronously called
    res.send(JSON.stringify(session));
  },
);

Frontend Code Example (_.component.ts file)

// stripe session is the object returned from api
this.stripe_session = stripe_session; 
const stripe = Stripe('pk_test_*****************');
stripe.redirectToCheckout({
  sessionId: stripe_session.id
}).then(function (result) {
  console.log(result);
});

Visit Stripe Hosted Checkout Documentation for details.

Answer 1

The @types/stripe package merely contains the type definitions for Stripe API for Node JS. It is not to be used on client side libraries or Frameworks, such as Angular.

If you want to implement Stripe.js and Stripe Elements, which are the client side JavaScript library for Stripe and UI components respectively, you should be following the instructions on the following page instead. This will allow you to implement the client side payment flow on the front end.

Generally, how you should do it, is to add the following line on your index.html,

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

In addition, you may wish to install the type definitions for Stripe Checkout and Stripe Elements.

npm i @types/stripe-checkout
npm i @types/stripe-v3

And on the component that requires the usage of Stripe,

Add this on top of the declaration of your class/component.

declare var Stripe;

Then, you can mount the Stripe Elements

stripe;

ngOnInit() {
  this.stripe = Stripe('your_stripe_key');
  // do the rest.
}

If you want to find out more about it, you may refer to this 3rd party tutorial as well.