Kuy*_*hii 3 stripe-payments stripe-payments-js
阅读有关可嵌入定价表功能的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>
Run Code Online (Sandbox Code Playgroud)
文档中有关如何嵌入此代码片段的示例仅提供了HTML 和 React 示例。
我想知道如何在角度上达到相同的结果。
我尝试使用 Stipe Elements 构建一个元素来保存定价表,但 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>
Run Code Online (Sandbox Code Playgroud)
2) 在 xyz.module.ts 中
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@NgModule({
declarations: [
XyzComponent,
...
],
imports: [...],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
Run Code Online (Sandbox Code Playgroud)
3.在xyz.component.ts中
public stripe_key: string = 'pk_test_***';
public stripe_table: string = 'prctbl_***'
Run Code Online (Sandbox Code Playgroud)
4.在xyz.componet.html中
<stripe-pricing-table
[attr.pricing-table-id]="stripe_table"
[attr.publishable-key]="stripe_key">
</stripe-pricing-table>
Run Code Online (Sandbox Code Playgroud)
如果您不需要动态可发布密钥和定价表 ID,请跳过第 3 点和硬编码第 4 点,如下所示:
xyz.componet.html
<stripe-pricing-table
pricing-table-id="prctbl_***"
publishable-key="pk_test_***">
</stripe-pricing-table>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1278 次 |
| 最近记录: |