With ngx-stripe-checkout you can integrate stripe checkout in angular.

Features

• Lazy loading
• Angular 4 and above

Getting Started

Install with NPM:

1$ npm i ngx-stripe-checkout --save

Stripe configurations:

1Configure your stripe account for integrating checkout.
2https://stripe.com/docs/payments/checkout

Import into your project:

1// Module
2import { StripeCheckout, StripeModule } from 'ngx-stripe-checkout';
3
4@NgModule({
5  declarations: [
6  ],
7  imports: [
8    StripeModule
9  ],
10  providers: [
11    StripeCheckout
12  ],
13  bootstrap: []
14})

Import and initialize stripe in your component:

1// Component
2import { StripeCheckout, OnetimeCheckoutOptions, RecurringCheckoutOptions } from 'ngx-stripe-checkout';
3
4  constructor(public stripe: StripeCheckout) {
5	this.stripe.initializeStripe(`your stripe key`)
6	.then((res) => console.log(res))	// Stripe Initialized
7    .catch((err) => console.log(err));	// Error message
8  }
9
10// For Recurring Payments
11// Invoke this function on button click
12   openSubscriptionCheckout() {
13    var checkoutOptions: RecurringCheckoutOptions = {
14      items: [{
15        plan: 'your plan id',
16        quantity: 'quantity'
17      }],
18      successUrl: 'https://example.com/payment/success',
19      cancelUrl: 'https://example.com/payment/failure'
20    }
21    this.stripe.openRecurringCheckout(checkoutOptions);
22  }
23
24// For One time Payments
25// Invoke this function on button click
26    var checkoutOptions: OnetimeCheckoutOptions = {
27      items: [{
28        sku: 'your sku id',
29        quantity: 'quantity'
30      }],
31      successUrl: 'https://example.com/payment/success',
32      cancelUrl: 'https://example.com/payment/failure'
33      submitType: 'donate',
34      billingAddressCollection: 'required'
35    }
36    this.stripe.openOnetimeCheckout(checkoutOptions);
37  }