試圖將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庫。