Question

考虑以下代码：

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

先前的代码是与通过脚本发送购买信息的支付网关进行集成。

如何在angular 2应用程序中使用此代码，因为在普通的HTML5页面中可以轻松使用script标签，但是在angular项目中，我想了解它的用法和工作方式。

Answer 1

首选方法是将库作为npm包使用。但是我找不到一个（如果存在）。

“在Angular中”使用此功能。将脚本标签添加到index.html

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

您可以考虑动态加载脚本标签，而不是将其包含在index.html

中

我建议将其放在Angular Service中，而不是直接放在组件中。

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

在您的组件中：

@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)
    }
}

如何在Angle 2项目中使用脚本标签

1 个答案: