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

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>

应用程序组件.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 支付网关）

问题描述

2 个解决方案

解决方案1
0 2021-07-29 09:33:25

解决方案2
0 已采纳 2021-08-19 05:18:40

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

问题描述

2 个解决方案

解决方案1 0 2021-07-29 09:33:25

解决方案2 0 已采纳 2021-08-19 05:18:40

解决方案1
0 2021-07-29 09:33:25

解决方案2
0 已采纳 2021-08-19 05:18:40