javascript - 尝试将 braintree-web 集成到 Angular2 中

Question

我正在尝试在我的 Angular2 应用程序中使用 Braintree SDK (braintree-web)。我真的很感激任何关于如何让它工作的指示。我认为这是因为我没有导入 braintree-web 模块，但我也不知道该怎么做。我可以在整个模块中找到任何导出。

我在这里:

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

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

我试图将 Braintree 提供的 JS 示例破解成 Angular2 TS 组件，但我不断收到错误:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./UpaccountComponent class UpaccountComponent - inline template:5:7 ORIGINAL EXCEPTION: TypeError: this.braintree.setup is not a function

这是 .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 添加到类型安装中。