Stripe.js 客户端导入

Question

尝试在 React 应用程序中执行此处的第 2 步：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.。

我不确定为什么他们不能在他们的文档中包含正确的导入语句...但是无论如何，有人知道如何解决这个问题吗？

Answer 1

in the npm docs they suggest (https://www.npmjs.com/package/@stripe/stripe-js):
import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
but this is clearly different to what they gave in the Stripe docs.

没什么不同。它只是做同样事情的辅助函数。 stripe 文档会让您在文档中添加脚本标签，如下所示：

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

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

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

中的值

Stripe.js 客户端导入

Stripe.js Client Side Import

javascript

npm

stripe-payments

ecmascript-6

reactjs