试图将braintree-web集成到Angular2中

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');

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

从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
    }
});

编辑：

只需在import declare var braintree:any;之后declare var braintree:any; 如果你使用angular 4然后声明declare var require: any;

Answer 3

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

import * as braintree from 'braintree-web';

Answer 4

请参阅： 以角度2重新构建第三方JS库

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