如何在Angular应用中嵌入条纹定价表

阅读关于可嵌入价格表特性的Stripe文档-我按照描述的步骤构建了一个价格表。

这将产生一个代码片段，可用于在自己的网站/应用程序中嵌入托管的价格表。

示例代码片段;

<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>

文档中关于如何嵌入这个片段的示例只给出了HTML和

React示例.我想知道如何在angular中实现相同的结果。

我已经尝试使用样式元素来构建一个元素来保存定价表，但是Elements似乎没有一个用于新定价表的组件。

是的，目前Stripe Docs还没有关于Angular的信息。这是我的解决方案建议，从组件到html视图的动态属性放置。

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。在xyz.component.ts

public stripe_key: string = 'pk_test_***';
public stripe_table: string = 'prctbl_***'

4。在xyz.componet.html

<stripe-pricing-table 
[attr.pricing-table-id]="stripe_table"
[attr.publishable-key]="stripe_key">
</stripe-pricing-table>

如果不需要动态publishable-key和pricing-table-id跳过第3点，硬编码第4点，如下所示:

xyz.componet.html

<stripe-pricing-table 
pricing-table-id="prctbl_***"
publishable-key="pk_test_***">
</stripe-pricing-table>

我刚刚找到了解决方案，并进行了如下处理:

将stripe脚本文件集成到index.html中。
用HTMLElement创建并扩展一个组件，并按这里所说的做
然后你把CUSTOM_ELEMENTS_SCHEMA从Angular的核心到你的模块:

@NgModule ({.．.模式:[CUSTOM_ELEMENTS_SCHEMA})
最后，调用嵌入条纹定价表web组件的组件，你的定价表将正确显示在Iframe中。

相关内容

最新更新

热门标签：