ngx-stripe-checkout

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

Features

• Lazy loading
• Angular 4 and above

Getting Started

Install with NPM:

$ npm i ngx-stripe-checkout --save

Stripe configurations:

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

Import into your project:

// Module
import { StripeCheckout, StripeModule } from 'ngx-stripe-checkout';

@NgModule({
  declarations: [
  ],
  imports: [
    StripeModule
  ],
  providers: [
    StripeCheckout
  ],
  bootstrap: []
})

Import and initialize stripe in your component:

// Component
import { StripeCheckout, OnetimeCheckoutOptions, RecurringCheckoutOptions } from 'ngx-stripe-checkout';

  constructor(public stripe: StripeCheckout) {
    this.stripe.initializeStripe(`your stripe key`)
    .then((res) => console.log(res))	// Stripe Initialized
    .catch((err) => console.log(err));	// Error message
  }

// For Recurring Payments
// Invoke this function on button click
   openSubscriptionCheckout() {
    var checkoutOptions: RecurringCheckoutOptions = {
      items: [{
        plan: 'your plan id',
        quantity: 'quantity'
      }],
      successUrl: 'https://example.com/payment/success',
      cancelUrl: 'https://example.com/payment/failure'
    }
    this.stripe.openRecurringCheckout(checkoutOptions);
  }

// For One time Payments
// Invoke this function on button click
    var checkoutOptions: OnetimeCheckoutOptions = {
      items: [{
        sku: 'your sku id',
        quantity: 'quantity'
      }],
      successUrl: 'https://example.com/payment/success',
      cancelUrl: 'https://example.com/payment/failure'
      submitType: 'donate',
      billingAddressCollection: 'required'
    }
    this.stripe.openOnetimeCheckout(checkoutOptions);
  }