Question

我正在尝试在我的Angular2应用中使用Braintree SDK（braintree-web）。我真的很感激有关如何使这项工作的任何指示。我认为这是因为我没有导入braintree-web模块，但我也无法弄清楚如何去做。我可以在整个模块中找到任何导出。

我就在这里：

我已经导入了braintree-web库和我找到的打字文件。

ng install --save braintree-web
npm install @types/braintree-web@3.0.1

我试图破解Braintree为Angular2 TS组件提供的JS示例，但我一直收到错误：

EXCEPTION：错误：未捕获（在承诺中）：EXCEPTION：错误 ./UpaccountComponent类UpaccountComponent - 内联模板：5：7 原始异常：TypeError：this.braintree.setup不是函数

这是.ts文件。

import { Component, OnInit } from '@angular/core';


declare var braintree:any;

@Component({
  selector: 'up-btcheckoutform',
  templateUrl: './btcheckoutform.component.html',
  styleUrls: ['./btcheckoutform.component.css']
})
export class BtCheckoutFormComponent implements OnInit {
  braintree = require('BrainTreeWeb');
  // braintree = require('braintree-web');
  integration: any

  constructor() {   }

  ngOnInit() {
    var c = this;
    var clientToken = "CLIENT_TOKEN_GOES_HERE";
    braintree.setup(clientToken, "dropin", {
      container: "payment-form",
      onReady: function(int) {
        c.integration = int
        }
      });
  }

  ngOnDestroy() {
    this.integration.teardown();
  }


}

Answer 1

我不确定具体使用braintree-web，但如果您使用的是webpack，请删除行declare var braintree:any;和braintree = require('BrainTreeWeb');

除非他们有UMD模块，否则您还需要将braintree-web / index.js文件添加到捆绑包中。

从braintree-web快速浏览一下，看起来braintree.setup(..)不是一个功能。这样的事情可能是等价的：

braintree.client.create({ 
      authorization: "long-token-string"},
      (err, client) => {
            // Do stuff here
            client.request({..});
      });

安装软件包后，您需要在类型安装中添加--save-dev。

Answer 2

我已经像你所做的那样整合了大脑树并且它有效。我刚刚安装了一个命令

首先安装

npm install @types/braintree-web@3.0.1er

然后安装

npm install --save braintree-web@2.30.0

并使用

braintree = require('braintree-web');

如果要求braintree未定义，请再次移除declare var braintree:any;并替换以下代码

braintree.setup(clientToken, "dropin", {
    container: "payment-form",
    onReady: function(int) {
        c.integration = int
    }
});

带

this.braintree.setup(clientToken, "dropin", {
    this.container: "payment-form",
    onReady: function(int) {
        c.integration = int
    }
});

编辑：

如果你使用angular 4然后声明declare var braintree:any;

，只需在导入declare var require: any;后声明var

Answer 3

您也可以通过以下方式导入：

import * as braintree from 'braintree-web';

Answer 4

参考： Refrring 3rd party JS libraries in angular 2

这是一个通用的解决方案。你甚至不需要使用任何npm包。只需在index.html中引用BrainTree JS库，然后按照上面链接中记录的步骤操作即可。它适用于任何JS库。

试图将braintree-web集成到Angular2中

4 个答案: