Ionic v3 与新 StripeJS/Stripe 元素的集成 (v.7.26.0)

Question

我在将新的 stripe 版本集成到我的 ionic v3 应用程序中时遇到了两个不同的问题。（请不要提供有关升级到 ionic v5 的建议。我们的团队现在不可能做到这一点！）

在我的 ionDidLoad 中我有：

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_test_*******************') VSCode 在 "Stripe('pk_test...). The error from VS Code is " 类型 'typeof Stripe' 的值下给我可怕的红色波浪线是不可调用的。你是想包括 'new'?ts(2348)" 我已经用谷歌搜索了等等，但我不知道如何清除这个错误。我试着声明 "Stripe" 但它没有帮助。我知道 Stripe 是 StripeJS 中的引用。

问题 #2：stripe.confirmCardPayment( this.clientSecret, {... 同样，红色波浪线，这次在 "this.clientSecret" 下方。 this.clientSecret 在我的应用程序中由对我的服务器的 paymentIntents 调用的 return 定义如下：

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

来自 VSCode 的错误是 "Property 'clientSecret' does not exist on type 'HTMLElement'.ts(2339)"。我还不够了解这是怎么回事或为什么会发生这种情况。

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

Answer 1

问题 #1：

假设您在 index.html 中通过 <script src="https://js.stripe.com/v3/"></script> 导入了 Stripe - Stripe 对象通过 window 全局对象作为 window.Stripe 可用，您需要在导入后的组件：

> declare var Stripe: any;

或者在您的代码中通过 window['Stripe'] 访问条带，这也不是很好。

您还可以为正在使用的 Stripe 版本安装类型，以防止出现 TypeScript 问题。这是 v3：

npm install --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.
        }
      }
    });
  });

Ionic v3 与新 StripeJS/Stripe 元素的集成 (v.7.26.0)

Ionic v3 integration with the new StripeJS/Stripe Elements (v.7.26.0)

stripe-payments

typescript

typescript-typings

ionic3