Question

我正在将Braintree Drop-in v3集成到带有包装的角度应用程序中 npm i -save braintree-web-drop-in。

然后我找到了包@types/braintree-web我正在关注提到的示例here但是它似乎不包含对Drop-in功能的支持。显然，这不是正确的方案。

braintree.dropin.create({
  authorization: environment.braintreeKey,
  selector: '#dropin-container'
}, function (err, dropinInstance) {
  if (err) {
    // Handle any errors that might've occurred when creating Drop-in
    console.error(err);
    return;
  }
  submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(function (err, payload) {
      if (err) {
        // Handle errors in requesting payment method
      }

      // Send payload.nonce to your server
    });
  });
});

我有导入声明 import * as braintree from "@types/braintree-web";

然后braintree被识别为全局命名空间，但braintree.dropin仍然会导致我出现问题。

Typescript编译器抱怨dropin对象：

Property 'dropin' does not exist on type 'typeof braintree'.

问题：

是否有一些简单的方法来告诉打字稿它一切都很好并随之滚动？或者我必须自己提供打字？或者他们已经存在于某个地方？或者最好使用braintree-web-package？

Answer 1

我使用import * as dropin from 'braintree-web-drop-in';解决了它可能因为我在node_modules中安装了braintree模块

它显然是打字稿的基础知识，但是我不知道的无神论事。

由于这个问题是关于UI中的braintree drop，这里是我的代码结合Typescript和angular 2. Javascript以不同于Typescript的方式对待this，所以你不应该在里面使用function关键字打字稿。

  braintreeIsReady: boolean;
  dropIninstance: any;

  ngOnInit() {
    dropin.create({
      authorization: environment.braintreeKey,
      selector: '#dropin-container'
    }, (err, dropinInstance) => {
      if (err) {
        // Handle any errors that might've occurred when creating Drop-in
        console.error(err);
        return;
      }
      this.dropIninstance = dropinInstance;
      this.braintreeIsReady = true;
    });
  }

  pay() {
    this.dropIninstance.requestPaymentMethod((err, payload) => {
      if (err) {
        // deal with error
      }
      else {
        //send nonce to the server

      }
    });
  }

用于角度的braintree.dropin v3打字的类型

1 个答案: