如何在 Angular 应用程序中嵌入 Stripe 定价表

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 似乎没有用于新定价表的组件。

Kar*_*rol 7

是的,目前 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)