试图将braintree-web集成到Angular2中 [英] Trying to integrate braintree-web into Angular2

问题描述

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

I am trying to use the Braintree SDK (braintree-web) in my Angular2 app. I'd really appreciate any pointers on how to get this working. I think it is because I am not importing the braintree-web module, but I can't figure out how to to that either. I can find any exports in the whole module.

这是我的位置：

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

I've imported the braintree-web library and a typings file I found.

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

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

I tried to hack the JS example Braintree provides into a Angular2 TS Component, but I keep getting an error:

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

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


}

推荐答案

我已经按照你的方式整合了大脑树并且它有效。
我刚安装了一个命令

I have integrated the brain-tree the same way as you have done and it works. I've just installed one more command

首次安装

npm install @types/braintree-web@3.0.1er

然后安装

npm install --save braintree-web@2.30.0

并使用

braintree = require('braintree-web');

再次询问 braintree 不是然后删除声明var braintree：any;
并替换以下代码

Again if it asks for braintree is not defined then remove declare var braintree:any; and replace bellow code

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

with

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

编辑：

只需声明var导入后声明var braintree：any; 如果你使用angular 4然后声明声明var require：any;

just declare the var after import declare var braintree:any; if your working with angular 4 then declare declare var require: any;

这篇关于试图将braintree-web集成到Angular2中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！