Payment Token

Before calling the Credit Card Process request, a Blink API is automatically triggered to tokenize the hosted card fields and generate a payment token. This generated payment token is automatically inserted into the payment form, which is then submitted.

To enable this functionality, add the following three files in the header section of your payment page:

<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

<form method="POST" action="process" id="payment">
  ...
</form>

CSRF Token

@csrf

Elements

{!! $element !!}

Merchant Data Element

<input type="hidden" id="merchant_data" name="merchant_data" value="{\"order_id\": \"12345\"}" />