【问题标题】：How can I access a library through a script in a Typescript React app?如何通过 Typescript React 应用程序中的脚本访问库？
【发布时间】：2019-07-29 23:39:02
【问题描述】：

我对 React 还很陌生，并且多年来没有做过任何广泛的 Web 开发，所以我正在努力解决一个（可能）基本的 Web 问题：

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

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

Checkout 依赖于 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 结帐 API 调用行为。

【问题讨论】：

您可以尝试安装：npmjs.com/package/@types/stripe-v3

标签： reactjs typescript stripe-payments

【解决方案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`.
});

【讨论】：

【解决方案2】：

尝试改用 windows 对象：

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

【讨论】：

【解决方案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) => {
      ...
};

【讨论】：

目前，条带客户端库不能作为 npm 模块使用，只有服务器端版本。
正如@MauriceDöpke 所说，stripe 并未通过 npm 正式提供，出于安全考虑，我宁愿不使用第三方包。