How to embed Stripe Pricing tables in Angular app
Question
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.
2 answers
solution1
1 2023-01-31 16:01:18
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.comp.net.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.comp.net.html
<stripe-pricing-table
pricing-table-id="prctbl_***"
publishable-key="pk_test_***">
</stripe-pricing-table>
solution2
0 2023-01-26 15:14:30
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.