Typescript Ionic v3与新的StripeJS/Stripe元素的集成（v.7.26.0）

我在将新的条带版本集成到我的ionic v3应用程序中时遇到了两个不同的问题。（请不要对升级到ionic v5提出任何建议。这对我们的团队来说现在是不可能的！）

在我的简历中，我有：

var stripe = Stripe('pk_test_OwV8RfgF7JQp1FEW3OfqmPpz');
  var elements = stripe.elements();
  var style = {
    base: {
      color: "#32325d",
    }
  };

  var card = elements.create("card", { style: style });
  card.mount("#card-element");

  card.addEventListener('change', ({error}) => {
    const displayError = document.getElementById('card-errors');
    if (error) {
      displayError.textContent = error.message;
    } else {
      displayError.textContent = '';
    }
  });

  var form = document.getElementById('payment-form');

  form.addEventListener('submit', function(ev) {
    ev.preventDefault();

    stripe.confirmCardPayment( this.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Jenny Rosen'
        }
      }
    }).then(function(result) {
      if (result.error) {
        // Show error to your customer (e.g., insufficient funds)
        console.log(result.error.message);
      } else {
        // The payment has been processed!
        if (result.paymentIntent.status === 'succeeded') {

          /****  this.postOrder(); */

          // Show a success message to your customer
          // There's a risk of the customer closing the window before callback
          // execution. Set up a webhook or plugin to listen for the
          // payment_intent.succeeded event that handles any business critical
          // post-payment actions.
        }
      }
    });
  });

问题#1:var stripe=stripe（'pk#u test********************'） VSCode在“Stripe（'pk_test…）下给了我一条可怕的红色曲线。VSCode的错误是“type'typeof Stripe'的值不可调用”。你的意思是包括“新的”吗？ts（2348）“我是谷歌搜索过的，但我不知道如何清除这个错误。我试图声明“Stripe”，但没有帮助。我知道Stripe是StripeJS中的一个引用

问题2：stripe.confirmCardPayment（this.clientSecret，{… 同样，红色曲线，这次在“this.clientSecret”下。this.clientSecret在我的应用程序中通过向我的服务器返回paymentIntents调用来定义，如下所示：

this.inStockService.paymentIntentRoutine(this.ot).subscribe(res => {
        this.clientSecret = res;
      });

VSCode的错误是“类型“HtmleElement”.ts（2339）”上不存在属性“clientSecret”。作为一名开发人员，我还不足以理解发生这种情况的原因

如果有人能帮我解决这些问题，我将永远感激。

问题1:

如果您通过index.html中的

导入了条带，则条带对象将通过Windows全局对象作为window.Stripe变得可用，您需要在导入后立即在组件中声明条带：

> declare var Stripe: any;

或者通过代码中的窗口['stripe']访问stripe，这也不太好

您还可以为正在使用的条带版本安装类型，以防止类型脚本问题。以下是v3：

npm安装--save@types/stripe-v3

问题2：

您需要利用胖箭头函数来防止“this”指向匿名函数作用域：

form.addEventListener('submit', ev => {

    ev.preventDefault();

    stripe.confirmCardPayment( this.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Jenny Rosen'
        }
      }
    }).then( result => {
      if (result.error) {
        // Show error to your customer (e.g., insufficient funds)
        console.log(result.error.message);
      } else {
        // The payment has been processed!
        if (result.paymentIntent.status === 'succeeded') {

          /****  this.postOrder(); */

          // Show a success message to your customer
          // There's a risk of the customer closing the window before callback
          // execution. Set up a webhook or plugin to listen for the
          // payment_intent.succeeded event that handles any business critical
          // post-payment actions.
        }
      }
    });
  });

---

对于第二个问题，这是因为

this

反弹到触发表单提交处理程序内事件的DOM元素：所以通常这就是为什么人们使用

self

进行全局等等。对于第一个问题，我从未使用过typescript，所以我不知道。stripe.js库没有typescript定义s、 因此，您可能应该从检查程序中排除这些行。@karllekko-谢谢。这是第二期。这实际上很有意义。我将尝试看看我能做些什么来更改范围。我仍然对#1感到困惑，但我正在处理它。对于第一期-如何准确导入条带？只是index.html fro中的一个脚本标记m他们的来源？@Sergey Rudenko——是的，只是index.html中的一个脚本标记。我现在正在实施下面的建议，并将尽快更新。顺便说一句，帮助问题1的另一个方法是获取条带类型。我将尝试将其添加到答案中。谢谢您更新答案以包含条带类型