Question

我正在尝试将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，那将是完美的，但是从文档中我还没有找到正确的方法......

我真的很感激任何建议。

Answer 1

我已经解决了考虑另一种方法:)

我使用了Worldpay API来获取令牌 API网址：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

如有任何其他细节，请随时评论/询问:)

Answer 2

如果您可以使用API，则接受的答案很好，但如果您不符合PCI-DSS，则不应使用该API。

要在Angular 2+中使用模板表单或您自己的表单，我使用的步骤如下：

以某种方式包括Worldpay.js：
- 本地副本作为.angular-cli.json
- 通过组件导入的本地副本，例如import '../../libs/worldpay';
- 在主index.html中加入一个脚本标记，从cdn加载它：
  <script src="https://cdn.worldpay.com/v1/worldpay.js"></script>
满足您的组件中可用的打字稿：
```
declare var Worldpay: any;   
```
使用ViewChild获取对表单的引用：
```
@ViewChild('paymentForm') form;
```
并在html中：
```
<form #paymentForm>
```

实施回调，例如：

worldpayCallback(status, response) {        
  if (response.error) {
    this.handleError(response.error.object);
  } else {
    this.token = response.token;
  }
}

在适当的钩子中初始化Worldpay，如：

ngOnInit(): void {
  Worldpay.useTemplateForm({
    'clientKey': this.worldpayKey,
    'form': this.form.nativeElement,
    'callback': (status, response) => this.worldpayCallback(status, response)
  });
}

在提交表单后，您现在应该可以使用该令牌。

请注意，如果您使用自己的表格，则需要符合PCI SAQ A-EP标准，这涉及自我评估过程（冗长的文书工作）。

Answer 3

这是Angular 4/5中的一个工作示例。请将您的客户端API密钥添加到Worldpay.component.ts

https://plnkr.co/edit/vz6YX68ykyBuHGiwGBVx

模板：

<form #paymentForm *ngIf="!token">
    <div id="paymentSection"></div>
</form>
<h2 *ngIf="token">Token from WorldPay {{ token }}</h2>

组件：

import { Component, OnInit, ViewChild } from '@angular/core';
declare var Worldpay: any;

@Component({
  selector: 'app-worldpay',
  templateUrl: './worldpay.component.html'
})

export class WorldpayComponent implements OnInit {

  @ViewChild('paymentForm') form;
  readonly worldpayClientKey = 'ADD_YOUR_KEY_HERE';
  token: string = null;

  constructor() { }

  ngOnInit() {
    this.loadScript('https://cdn.worldpay.com/v1/worldpay.js', this.init);
  }

  init = (): void => {
    Worldpay.useTemplateForm({
      'clientKey': this.worldpayClientKey,
      'form': this.form.nativeElement,
      'paymentSection': 'paymentSection',
      'display': 'inline',
      'type': 'card',
      'callback': this.worldpayCallback
    });
  }

  worldpayCallback = (status): void => {
    this.token = status.token;
  }

  private loadScript(url: string, callbackFunction: (any) = undefined) {
    const node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    node.onload = callbackFunction;
    document.getElementsByTagName('body')[0].appendChild(node);
  }
}

如何将worldpay与angular2集成

3 个答案: