Setup Application

This section guides you through setting up ngx-stripe in your Angular application, explaining how to configure the library for optimal integration with Stripe's payment processing capabilities.

This doc assumes that you already have a basic working knowledge of Angular and that you have already set up an Angular project. If you're new to Angular, we recommend that you take a look at the new Angular Documention site.

Ngx Stripe initialization is designed to align closely with the StripeJS initialization process. The parameters you pass to ngx-stripe's forRoot method or provideNgxStripe are equivalent to those you would pass to the Stripe constructor as per StripeJS documentation.

When initializing Ngx Stripe, you can pass the following parameters:

• Stripe Publishable Key: Your Stripe account's publishable key. This key is used to identify your Stripe account and to tokenize payment information client-side before it's sent to Stripe's servers.
• StripeJS Options: Additional options for configuring the StripeJS instance, such as locale, apiVersion or stripeAccount.

If you're using standalone architecture, you can use provideNgxStripe to setup the services. This is the recommended way to do it.

        import { provideNgxStripe } from 'ngx-stripe';

bootstrapApplication(AppComponent, {
  providers: [provideNgxStripe('***your-stripe-publishable-key***')]
});
      

or if you're still using modules, you do it as usual using forRoot

        import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import your library
import { NgxStripeModule } from 'ngx-stripe';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxStripeModule.forRoot('***your-stripe-publishable-key***'),
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
      

It's important to note that passing the Stripe publishable key and options during initialization is not mandatory. In scenarios where your Stripe keys are fetched dynamically, or you need to initialize Stripe instances with different configurations, you have two flexible options:

1. Use injectStripe Method: You can inject a Stripe instance into your components when you don't have the keys at the initialization phase. This method allows for dynamic Stripe instance creation based on your application's logic. For an implementation example, refer to the injectStripe usage example.
2. Stripe Service Factory: allows you to create a Stripe instance on demand with specific parameters. This method is particularly useful when working with multiple Stripe accounts or configurations. Learn more about it in the StripeServiceFactory documentation.