Payment Page

To process Credit Card requests, three files must be included 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.

In a PHP implementation, your payment page may look like this:

<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>
  ...
</head>

<body>
    <form method="POST" action="process" id="payment">
        @csrf
        {!! $element !!}
        <input type="hidden" id="merchant_data" name="merchant_data" value="{\"order_id\": \"12345\"}" />
        <button type="submit">Submit</button>
    </form>
</body>

JQuery
Hostedfields.js
Custom JS

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\"}" />

Submit

This is a standard submit button.

<button type="submit">Submit</button>