Versions Compared

Old Version 16

changes.mady.by.user Mohsin Shah

Saved on

compared with

New Version 17

changes.mady.by.user Mohsin Shah

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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:

Code Block
<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

Anchor
jquery
jquery

JQuery

The hosted fields requires JQuery. The gateway supports versions 1.8 to 3.6. In this example version 3.6.3 is used:

Code Block
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

Anchor
hostedfields-js
hostedfields-js

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.

Code Block
<script src="https://gateway2.blinkpayment.co.uk/sdk/web/v1/js/hostedfields.min.js"></script>

Anchor
custom-js
custom-js

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.

Code Block
<script src="https://secure.blinkpayment.co.uk/assets/js/api/custom.js"></script>

Form Element

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

CSRF Token

Code Block
@csrf

Elements

Code Block
{!! $element !!}

Merchant Data Element

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