Stripe.js客户端导入

Question

在这里尝试遵循步骤2，在一个React应用程序中：https://stripe.com/docs/connect/creating-a-payments-page?cancel=true#web-accept-payment

// Initialize Stripe.js with the same connected account ID used when creating
// the Checkout Session.
const stripe = Stripe('pk_test_s3JwCARtUtLnQGm4xlDx70Wt002kwkyJ8P', {
  stripeAccount: '{{CONNECTED_STRIPE_ACCOUNT_ID}}'
});

我已经运行了npm install @stripe/stripe-js，但是有人知道如何导入Stripe吗？

我已经试过了

import {Stripe} from '@stripe/stripe-js';
import Stripe from '@stripe/stripe-js';

但都失败了

Attempted import error: 'Stripe' is not exported from '@stripe/stripe-js'.

在npm文档中，他们建议(https://www.npmjs.com/package/@stripe/stripe-js)：

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

但这显然不同于他们在Stripe文档中提供的内容。

而且，尽管我已经验证了我提供的值不是未定义的，但这在Uncaught (in promise) IntegrationError: Invalid value for Stripe(): apiKey should be a string. You specified: undefined.中还是失败的。

我不知道他们为什么不能在他们的docs...but中包括一个正确的导入语句，有人知道如何解决这个问题吗？

Answer 1

他们建议在npm文档中使用

(https://www.npmjs.com/package/@stripe/stripe-js)：

从‘@ stripe /stripe-js’导入{loadStripe}；const =等待loadStripe

但这显然不同于他们在Stripe文档中提供的内容。

没什么不同。它只是一个帮助函数来做同样的事情。条形文档会让您向文档中添加一个脚本标记，如下所示：

<script src="https://js.stripe.com/v3/"></script>

该脚本标记将下载条带并将其添加到全局变量window.Stripe中。

调用loadStripe将创建一个具有正确属性的<script>标记，将其附加到文档中，等待它加载，调用init传递您的api键，然后解析对window.Stripe中值的承诺。