我正在尝试将 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()
的页面中注入(inject)一些脚本。方法(就像我在第一步中所做的那样)
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() 中,所有敏感的卡数据都从表单中删除,替换为 token ,然后才将表单提交回您的服务器。 来源:https://developer.worldpay.com/jsonapi/docs/own-form
如何继续整合这个……看不懂。
如果他们有一个 API 返回基于 GET/POST
的 CreditCardToken请求它会是完美的,但从文档中我还没有找到正确的方法...
我将非常感谢任何类型的建议。
最佳答案
我已经决定考虑另一种方法 :)
我已经使用 Worldpay API 获取 token 。
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、Enrolled)
我如何在 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
有关任何其他详细信息,请随时评论/询问 :)
关于angular - 如何将 worldpay 与 angular2 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40506912/