We need to show a Stripe price table in my Angular app where the users should be able to subscribe. The subscription and payment's backend webhook works fine as it receives the events successfully from stripe. The problem we're experiencing is that Stripe has a field called client-reference-id to be able to utilize it to reconcile the payment in our end, and this field is not rendered when the component loads. The following code is the component after following the steps mentioned in this Stackoverflow post:
The HTML:
<mat-card class="price-table-card">
<mat-card-header>
<mat-card-title>Subscription</mat-card-title>
<mat-card-subtitle>Manage your subscription</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<stripe-pricing-table
pricing-table-id="prctbl_HardCode"
publishable-key="pk_test_HardCoded"
client-reference-id={{clientReference}}>
</stripe-pricing-table>
</mat-card-content>
</mat-card>
The typescript:
import { Component, OnInit } from '@angular/core';
import { environment } from '@env/environment';
@Component({
selector: 'app-manage-subscription',
templateUrl: './manage-subscription.component.html',
styleUrls: ['./manage-subscription.component.css']
})
export class ManageSubscriptionComponent implements OnInit {
public priceTableId: string;
public publishableKey: string;
public clientReference?: string;
constructor() {
this.priceTableId = environment.stripePricingTableId;
this.publishableKey = environment.stripePublishableKey;
}
ngOnInit(): void {
this.clientReference = localStorage.getItem('myKey') as string;
}
}
And, the following code snippet shows how this component is called in app.component.html within a mat-sidenav-containe along with other components in there:
<app-manage-subscription></app-manage-subscription>
Just to reiterate, the clientReference in the HTML is null or unpopulated despite this.clientReference = localStorage.getItem('myKey') as string returns a valid value.
If this works, we will be able to following the same pattern to use priceTableId and publishableKey instead of hard coding them in the HTML
I expect clientReference to be populated in the component when the page renders. Same expectation applies to both priceTableId and publishableKey to avoid hard coding them.
