Runtime value in forRoot of Angular Module

Question

In my angular app there is this module called Ngx-Stripe

I have defined it as documentation like following:

NgxStripeModule.forRoot('***your-stripe-publishable key***');

But the problem is I don't get this key on app bootstrap, I am not supposed to hardcode it in angular app.module or global like in index.html when I am using stripe withput any angular library.

I am getting this key on the api call after user proceeds to payment page. How can I define this key in this scenario ?

Answer 1

I wish it'd be straightforward, but the only way I was able to achieve it was something like:

index.html (alternatively webpack-injected script), has to be placed before Angular's sources:

<script>
  var STRIPE_KEY = 'paste it here';
</script>

app.module.ts :

declare var STRIPE_KEY;

// ...
NgxStripeModule.forRoot(STRIPE_KEY);

The problem here is .forRoot() has to be statically-analyzed by Angular AoT compiler, so it can't accept what you want it to accept... How about setting the key after you got it via StripeService.changeKey(key: string) method?

Answer 2

For lazy loading your Stripe config key you can create your own instance of StripeService using StripeFactory that is available from ngx-stripe.

Check the documentation here for a full explanation:

https://richnologies.gitbook.io/ngx-stripe/core-concepts/service-factory