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>
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>
CSRF Token
Cross-site request forgeries token, used in PHP to prevent execution on behalf of an authenticated user.
@csrf
Elements
These are the elements that were fetched from the Intents resource.
{!! $element !!}
Merchant Data Element
This is an optional element, which is hidden. It can be used to send important order or customer details that should be linked to the transaction. The value should be json string with double quotes delimited by backslashes.
<input type="hidden" id="merchant_data" name="merchant_data" value="{\"order_id\": \"12345\"}" />