最低限额

Question

我对React还是很陌生，多年来没有做过任何大规模的Web开发工作，所以我在（可能是）一个基本的Web问题上苦苦挣扎：

我正在React Web应用程序（使用Typescript编写）中实现基于Stripe的payment flow，并且在step 2上遇到了障碍（向重定向到检出客户端添加了重定向）。

快速入门指南指示我在网站上插入以下脚本标签，这是通过将标签插入<head>标签内完成的：

结帐依赖于Stripe.js。首先，请包含以下内容您网站上的脚本代码-应始终直接从中加载 https://js.stripe.com：
 <script src="https://js.stripe.com/v3/"></script>

下一步是我遇到的一个问题（使用ESNext语法，因为它在Typescript项目中）

接下来，通过提供可发布的API密钥作为第一个参数，创建Stripe对象的实例：
 const stripe = Stripe('pk_test_sdjxyNjHWmRefdkUNYuS53MA00Ot1f9HOu');

我想通过服务工作者而不是直接通过组件访问Stripe。但是，尝试初始化数据条实例不起作用。我尝试过：

以各种方式导入Stripe模块，但没有用
添加对@types/stripe的依赖，这似乎可以防止编译器抱怨

当前，我的StripeService.ts文件具有以下代码：

const stripe = Stripe("SOME_KEY");
export const redirectToCheckout = (sessionId: string) => {
  return stripe.redirectToCheckout(
    {
      sessionId: sessionId,
    });
};

Localhost实例给出此错误：

/src/services/stripe/StripeService.ts
  Line 12:  'Stripe' is not defined  no-undef

有关如何解决此问题的任何建议？我已经研究了react-stripe-elements包装器，但这是为了提供UI组件而设计的，而我只希望Stripe checkout API调用行为。

Answer 1

最低限额

最小的实现是使用any声明Stripe：

declare class Stripe {
    constructor(...args: any[]);
    redirectToCheckout(...args: any[]): any;
}

const stripe = new Stripe("pk_test_sdjxyNjHWmRefdkUNYuS53MA00Ot1f9HOu");
stripe.redirectToCheckout({
    sessionId: sessionId
})

更强的打字

您当然可以通过更明确地键入所需的部分来扩展它：

declare class Stripe {
    constructor(publicKey: string);
    redirectToCheckout({
        sessionId
    }: {
        sessionId: string;
    }): Promise<{ error: Error }>;
}

const stripe = new Stripe("pk_test_sdjxyNjHWmRefdkUNYuS53MA00Ot1f9HOu");
stripe.redirectToCheckout({
    sessionId
}).then(function (result) {
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `result.error.message`.
});

Answer 2

尝试改用Windows对象：

var stripe = window.Stripe("pk_test_h4naRpZD1t2edp2HQKG2NrZi00rzz5TQJk");

Answer 3

对于服务文件，您只需将stripe添加到package.json，然后在文件中执行以下操作：

import Stripe from "stripe";
const stripe = Stripe("SOME_KEY");
export const redirectToCheckout = (sessionId: string) => {
  return stripe.redirectToCheckout(
    {
      sessionId: sessionId,
    });
};

您将在客户端使用公共密钥，在服务器端使用秘密密钥。您应将条带对象（Stripe('pk_test_sdjxyNjHWmRefdkUNYuS53MA00Ot1f9HOu')）保持在您的状态，以便以后可以检索它。

一个示例调用可能像这样：

客户端

const {paymentMethod, error} = await this.state.stripe.createPaymentMethod('card', cardElement, {
      billing_details: {
      name: 'Jenny Rosen',
   },
});
StripeService.makePayment(paymentMethod);

服务器端

import Stripe as "stripe";
const stripe = Stripe("SOME_KEY");
export const makePayment = (paymentMethod: object) => {
      ...
};

如何通过Typescript React应用中的脚本访问库？

3 个答案:

最低限额

更强的打字