CODEWITHSUNDEEP
javascriptangular
AlejoDev
AlejoDev

Reputation: 3252

How to use a script tag in an angular 2 project

Consider the following code:

<script type="text/javascript" src="https://checkout.epayco.co/checkout.js"></script>

var handler = ePayco.checkout.configure({
  key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  test: true
});
var data = {
  //Payment parameters
  name: "T-shirt",
  description: "Blue fit",
  invoice: "1234",
  currency: "cop",
  amount: "12000",
  tax_base: "0",
  tax: "0",
  country: "co",
  lang: "en",

  //Onpage="false" - Standard="true"
  external: "true"
};

handler.open(data);

The previous code is to make an integration with a payment gateway that sends the purchase information through the script.

How to use this code within an angular 2 application, since in a normal HTML5 page it is easy to use the script tag, but within an angular project I would like to understand how it is used and how it works.

Upvotes: 0

Views: 272

Answers (1)

C.OG
C.OG

Reputation: 6529

The preferred way would be to consume the library as a npm package. But I was unable to find one (if it exists).

To use this "in Angular". Add the script tag to the index.html

<script type="text/javascript" src="<https://checkout.passpayment.co/checkout.js>"></script>

You could consider dynamically loading the script tag, instead of including it in the index.html

I would suggest putting this in an Angular Service and not directly in the component.

EPaycoService

import { Injectable } from '@angular/core';

declare var ePayco;
@Injectable()
export class EPaycoService {

    handler = ePayco.checkout.configure({
        key: 'XXXXXXXXX',
        test: true
    })

    open(data) {
        this.handler.open(data)
    }
}

In your component:

@Component({
    //...
})
export class MyComponent {
    constructor(private ePaycoService: EPaycoService)

    makePayment() {
        const data = {
          //Payment parameters
          name: "T-shirt",
          description: "Blue fit",
          invoice: "1234",
          currency: "cop",
          amount: "12000",
          tax_base: "0",
          tax: "0",
          country: "co",
          lang: "en",

          //Onpage="false" - Standard="true"
          external: "true"
        }

        this.ePaycoService.open(data)
    }
}

Upvotes: 2

Related Questions