Angular

Question

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

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

有人向我提供了这个 JS 库，我已将其添加到我的 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>

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

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

这是我所做的。

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

Answer 1

将此添加到 index.html

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

在各自的组件 html 文件和 css 文件中添加 html/css 代码

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

Answer 2

所以我的配置方式是；

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

declare var customcheckout: any;

现在这个 customcheckout() 可以立即使用

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

  CustomCheckout = customcheckout();

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

Angular - Call functions from external JS library (Bambora Payment Gateway)

javascript

bambora