angular - 如何将Worldpay与angular2集成

我正在尝试将WorldPay整合到Angular2应用程序中。
我正在使用自己的表单（own-form）方法，其中需要在页面中包含他们的脚本：
<script src="https://cdn.worldpay.com/v1/worldpay.js"></script>
为某些输入添加特定属性：data-worldpay并将worldpay.js逻辑附加到表单…
我设法采取了以下步骤：
1。在页面中包含worldpay.js
2。创建具有相关属性的付款表单
我怎样才能继续下一步…
我被那个问题困住了：
5。将worldpay.js附在您的表格上：

<script type="text/javascript">
var form = document.getElementById('paymentForm');

Worldpay.useOwnForm({
  'clientKey': 'your-test-client-key',
  'form': form,
  'reusable': false,
  'callback': function(status, response) {
    document.getElementById('paymentErrors').innerHTML = '';
    if (response.error) {
      Worldpay.handleError(form, document.getElementById('paymentErrors'), response.error);
    } else {
      var token = response.token;
      Worldpay.formBuilder(form, 'input', 'hidden', 'token', token);
      form.submit();
    }
  }
});
</script>

为什么？
angular2从模板中删除所有标记<script。
假设有了解决方法，就可以在ngAfterViewInit()方法的页面中注入一些脚本（就像我在第一步中所做的那样）

ngAfterViewInit(): void {
  let s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "https://cdn.worldpay.com/v1/worldpay.js";
  this.worldPayScriptElement.nativeElement.appendChild(s);
}

其中this.worldPayScriptElement是来自模板的div的viewChild:<div #worldPayScriptElement hidden></div>
但是，
根据他们的处理规则，WorldPay将用名为CreditCardToken的字段替换我表单中的敏感数据
来源：最后，在worldpay.formbuilder（）中，所有敏感卡数据都会从表单中移除，替换为令牌，然后表单才会提交回服务器。
资料来源：https://developer.worldpay.com/jsonapi/docs/own-form
如何继续整合…无法理解。
如果他们有一个基于GET/POST请求返回creditcardtoken的api，那将是完美的，但是从文档中我还没有找到合适的方法……
我将非常感谢任何建议。

最佳答案

我决定考虑另一种方法：）
我已经使用WorldPay API来获取令牌。
API URL:https://api.worldpay.com/v1/tokens
端点以以下形式等待POST请求：

'{
    "reusable": true/false,
    "paymentMethod": {
        "name": "name",
        "expiryMonth": 2,
        "expiryYear": 2015,
        "issueNumber": 1,
        "startMonth": 2,
        "startYear": 2013,
        "cardNumber": "4444 3333 2222 1111",
        "type": "Card",
        "cvc": "123"
    },
    "clientKey": "T_C_client_key"
}'

其中Header应包含以下选项："Content-type: application/json"
有了它，就不再需要在页面中包含worldpay.js。
此外，不再需要在付款表单中包含WorldPay的特定属性（如data-worldpay=""）
只需调用api，等待响应，响应的形式为：

{
    "token": "UUID of token",
    "reusable": true/false,
    "paymentMethod": {
        "type" : "ObfuscatedCard",
        "name": "name",
        "expiryMonth": 2,
        "expiryYear": 2015,
        "issueNumber": 1,
        "startMonth": 2,
        "startYear": 2013,
        "cardType": "VISA_CREDIT",
        "maskedCardNumber": "xxxx xxxx xxxx 1111",
        "cardSchemeType": "consumer",
        "cardSchemeName": "VISA CREDIT",
        "cardProductTypeDescNonContactless": "Visa Credit Personal",
        "cardProductTypeDescContactless": "CL Visa Credit Pers",
        "cardIssuer": "LLOYDS BANK PLC",
        "countryCode": "GBR",
        "cardClass": "credit",
        "prepaid": "false"
    }
}

从响应中，您可以使用response.token继续下一步：付款。
您应该确保将发送特定的WorldPay属性（CreditCardToken，已注册）
如何在Angular2中调用WorldPay API？

public getWorldpayToken(request: any): Observable<any>{
    let worldPayApiUrl = `https://api.worldpay.com/v1/tokens`;
    let body = JSON.stringify(request);
    let headers = new Headers({ 'Content-Type':'application/json;charset=UTF-8'});
    let options = new RequestOptions({ headers: headers });

    return this.http.post(worldPayApiUrl, body, options)
      .map(response => response.json())
      .catch(this.handleError);
}

文档：https://developer.worldpay.com/jsonapi/api#tokens
对于任何其他细节，请毫不犹豫地评论/询问：）