Menu
Reading Stripe docs regarding the embeddable Pricing tables feature - I have constructed a pricing table following the steps as described.
This results in a code snippet that can be used to embed the hosted pricing table on one's own website/application.
Example snippet;
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table pricing-table-id="xxx_xxxxxxxxxx"
publishable-key="pk_test_xxxxxxxxxx">
</stripe-pricing-table>
The examples in the docs relating to how to embed this snippet give only HTML and React examples.
I'd like to know how to achieve the same result in angular.
I have attempted to use Stipe Elements to build an element to hold the pricing table, but Elements does not seem to have a component for the new Pricing tables.
722
Yes at the moment Stripe Docs has no information for Angular. Here is my solution suggestion with dynamic attribute placement from component to html view.
1. index.html
<head>
<!-- Paste the script snippet in the head of your app's index.html -->
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
</head>
2) in xyz.module.ts
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@NgModule({
declarations: [
XyzComponent,
...
],
imports: [...],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
3. in xyz.component.ts
public stripe_key: string = 'pk_test_***';
public stripe_table: string = 'prctbl_***'
4. in xyz.componet.html
<stripe-pricing-table
[attr.pricing-table-id]="stripe_table"
[attr.publishable-key]="stripe_key">
</stripe-pricing-table>
If you don't need dynamic publishable-key and pricing-table-id skip point 3 and hardcode point 4, as here:
xyz.componet.html
<stripe-pricing-table
pricing-table-id="prctbl_***"
publishable-key="pk_test_***">
</stripe-pricing-table>
answered Oct 21 '25 12:10
I just found the solution and processed as followed :
Integrate the stripe script file inside your index.html.
Create and extends a component with HTMLElement and do as they say here
Then you had CUSTOM_ELEMENTS_SCHEMA from Angular core to your module :
@NgModule({ ... schemas: [CUSTOM_ELEMENTS_SCHEMA })
Finally, call your component which embed the stripe pricing table web component and your pricing table will shows up properly in an Iframe.
34
answered Oct 21 '25 13:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With