Versions Compared

Old Version 19

changes.mady.by.user Mohsin Shah

Saved on

compared with

New Version Current

changes.mady.by.user Mohsin Shah

Saved on

Key

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

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:

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

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.

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

Code Block
@csrf

Elements

These are the elements that were fetched from the Intents resource.

Code Block
{!! $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.

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

Submit

This is a standard submit button.

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