I am in the process of incorporating Worldpay into my angular2 application.
Utilizing the own form (own-form) approach, it is essential to include their script on the page:
<script src="https://cdn.worldpay.com/v1/worldpay.js"></script>data-worldpay and connecting the Worldpay.js logic to the form...
I have successfully completed the following steps:
1. Adding Worldpay.js to the page
2. Creating a payment form with the necessary attributes
How do I proceed with the next steps... I am currently facing this issue:
5. Link Worldpay.js to your form:
<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>
Why?
angular2 removes all <script tags from templates.
It might be possible to inject scripts into the page using a workaround in the ngAfterViewInit() method (similar to what was done for the first step)
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);
}
where this.worldPayScriptElement is a ViewChild of the div from the template:
<div #worldPayScriptElement hidden></div>However, Due to their processing rules, Worldpay will replace sensitive data from my form with a field called CreditCardToken
As explained in the source: Ultimately, in Worldpay.formBuilder(), all sensitive card data is eliminated from the form, replaced with the token, and only then is the form submitted back to your server. source:
How do I proceed with integrating this further... It's quite challenging.
If they had an API that returns the CreditCardToken based on a GET/POST request, it would simplify the process, but I haven't found the appropriate method in the documentation yet...
I would greatly appreciate any suggestions.