试图将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类型安装。