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

Question

I am Integrating Custom Checkout from Bambora in my Angular App.

Here's the doc - https://dev-apac.bambora.com/checkout/guides/custom-checkout/setup

I've been provided this JS libaray which I have added to my index.html's head

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

Now According to the doc I need to run the followings within the <script> tag

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

Here's the codepen example that they've given - https://codepen.io/apac-bambora/pen/bLVXqK/

Now How do I run the above code from my component's.TS file which calls customCheckout() method from the script that I added in the section?

Here's what I've done.

Index.html - added the JS library

<!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>

and in my 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

Add this in index.html

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

Add html/css code in respective component html file and css files

add javascript code as it is in oninit function in required component ts file

Answer 2

So the way I configured this was;

in my app.component.ts, I declared

declare var customcheckout: any;

now this customcheckout() is available instantly

so created a new variable and assigned the above method to it

  CustomCheckout = customcheckout();

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

Question

2 answers

solution1
0 2021-07-29 09:33:25

solution2
0 ACCPTED 2021-08-19 05:18:40

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

Question

2 answers

solution1 0 2021-07-29 09:33:25

solution2 0 ACCPTED 2021-08-19 05:18:40

solution1
0 2021-07-29 09:33:25

solution2
0 ACCPTED 2021-08-19 05:18:40