Angular - 从外部 JS 库（Bambora 支付网关）调用函数答案

【问题标题】：Angular - Call functions from external JS library (Bambora Payment Gateway)Angular - 从外部 JS 库（Bambora 支付网关）调用函数
【发布时间】：2021-10-04 21:56:36
【问题描述】：

我正在我的 Angular 应用程序中集成来自 Bambora 的自定义结帐。

这是文档 - https://dev-apac.bambora.com/checkout/guides/custom-checkout/setup

我已经提供了这个 JS libaray，我已将它添加到我的 index.html 的头

  <script src='https://customcheckout-uat.bambora.net.au/1.0.0/customcheckout.js'></script>

现在根据文档，我需要在<script> 标签内运行以下内容

<script>
var customCheckout = customcheckout();
var cardNumber = customCheckout.create('card-number')
cardNumber.mount('#card-number');
// ...
</script>

这是他们给出的 codepen 示例 - https://codepen.io/apac-bambora/pen/bLVXqK/

现在如何从我在本节中添加的脚本调用 customCheckout() 方法的组件的 .TS 文件中运行上述代码？

这就是我所做的。

Index.html - 添加了 JS 库

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CustomCheckout</title>
  <script src='https://customcheckout-uat.bambora.net.au/1.0.0/customcheckout.js'></script>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

在我的 app.component.html 中

<div class="container">
  <form id="checkout-form">
      <div id="card-number"></div>
      <label for="card-number" id="card-number-error"></label>

      <div id="card-cvv"></div>
      <label for="card-cvv" id="card-cvv-error"></label>

      <div id="card-expiry"></div>
      <label for="card-expiry" id="card-expiry-error"></label>

      <input id="pay-button" type="submit" class="btn disabled" value="Pay" disabled="true" />

      <div id="feedback"></div>
  </form>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
declare var customCheckout: any; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'custom-checkout';

  ngOnInit() {
    customCheckout = new customcheckout();
  }
}

【问题讨论】：

标签： javascript angular bambora

【解决方案1】：

在 index.html 中添加这个

<script src='https://customcheckout-uat.bambora.net.au/1.0.0/customcheckout.js'></script>

在相应的组件html文件和css文件中添加html/css代码

在所需组件 ts 文件中的 oninit 函数中添加 javascript 代码

【讨论】：

我试过了，但没用。请检查我更新的问题
请在 ngoninit 中添加完整的代码，例如他们的代码示例，不仅是第一行，如果它仍然不起作用，请告诉我
添加，我只是得到一堆错误。甚至第一行都抛出错误说“错误：src/app/app.component.ts:12:26 - 错误TS2552：找不到名称'customcheckout'”
可以通过将 customcheckout 替换为 customCheckout 来进行检查，其他人由于初始化而可以通过打字稿方式进行修复
是的，但它说“customCheckout 不是函数”。 customcheckout() 假设是该脚本中的一个函数，那么为什么要更改它呢？并且它无法从那个调用它

【解决方案2】：

所以我的配置方式是；

在我的 app.component.ts 中，我声明了

declare var customcheckout: any;

现在这个customcheckout() 立即可用

于是创建了一个新变量并将上面的方法赋值给它

  CustomCheckout = customcheckout();

【讨论】：