Runtime value in forRoot of Angular Module

Issue

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 ?

Solution

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?

Answered By - Daniel Kucal