How to securely process card payments in your frontend with HostedFields.js
Introduction
When processing card payments, to handle them securely you need utilise our HostedFields.js library to collect the card details securely within and iframe and tokenise the inputs. To do this you are required to implement three files in the header section of your payment page. When the submit button is clicked, the three script files automatically trigger a Blink API to tokenize the hosted card fields and generate a payment token. This generated payment token is automatically inserted into the payment form, then the whole form with the payment token is submitted. To render the Apple Pay or Google Pay buttons, please see this guide.
Note
If you want to process the request via ajax instead of a native form submission you can omit the custom JS. But you will need to fetch the remote IP address, set the users device details and invoke the HostedFields setup yourself. There is an example of this approach inside the Next.js Storefront Demo repo.
Card payments steps:
Generate payment intent on your server: On your server, create a payment intent process. Once done, you'll receive a card element as part of the payment intent response which you will embed inside of your payment page.
Include JS files in your header: In your frontend payment page, ensure the inclusion of Hostedfields.js, Custom.js, and JQuery. These scripts are fundamental to the subsequent tokenization process.
Tokenization: When a user submits the payment form, the aforementioned scripts collaborate to securely create a payment token. This token is then automatically added to the form, prepping it for final submission.
Code example with PHP
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://gateway2.blinkpayment.co.uk/sdk/web/v1/js/hostedfields.min.js"></script>
<script src="https://secure.blinkpayment.co.uk/assets/js/api/custom.js"></script>
<link rel="stylesheet" href="https://secure.blinkpayment.co.uk/assets/css/api.css">
</head>
<body>
<form method="POST" action="process" id="payment">
<?php
echo $intentResponse["element"]["ccElement"];
// for MOTO transactions: echo $intentResponse["element"]["ccMotoElement"];
?>
<input type="hidden" id="merchant_data" name="merchant_data" value="{\"order_id\": \"12345\"}" />
<button type="submit">Pay</button>
</form>
</body>Payment page elements
JQuery
The hosted fields requires JQuery. The gateway supports versions 1.8 to 3.6. In this example version 3.6.3 is used:
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>Hostedfields.js
To initialise hosted fields instance, include this JavaScript in your payment page. This script file should always be loaded directly from the Blink Gateway.
<script src="https://gateway2.blinkpayment.co.uk/sdk/web/v1/js/hostedfields.min.js"></script>Custom JS
The custom.js script is required to automatically setup the hosted form, by automatically appending the paymentToken value to the payment form on form submission.
Note: an id value is required in the form element on your payment page by the custom.js and hostedfields.js.
<script src="https://secure.blinkpayment.co.uk/assets/js/api/custom.js"></script>Credit Card Element
This is either the ccElement or ccMotoElement from the intent response. The element will be prefilled with details need to submit the payment (e.g. payment_intent) as well as any customer details (customer_name, customer_email, customer_address and customer_postcode) that may have been submitted in the intent.
Form Element
This is a simple form element. The action attribute points to the location of the code on your server that will execute when then form is submitted.
The id value is required in the form.
<form method="POST" action="process" id="payment">
...
</form>Style Sheet
Blink styled CSS that has styling for the classes used in the intent response card elements.
<link rel="stylesheet" href="https://secure.blinkpayment.co.uk/assets/css/api.css">