Versions Compared

Old Version 13

changes.mady.by.user Sainita Mukherjee

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.

Before calling the To process Credit Card Process API, an external API is called on the Blink Platform to tokenise the card details fetched from the 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 value. This value will be auto added in the payment form. To achieve this, follow the below steps.

Anchorpayment-tokenpayment-tokenPayment Token Hosted Fields requires JQuery. The Gateway

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. We use In this example version 3.6.3 hereis 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 a Hosted Fields 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>

In addition to that , include this JavaScript to automatically setup the Hosted Form integration.

Please note that

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 this the form element to initiate the Hosted Fields js.

This script will automatically append the paymentToken value to the payment form on form submission.

Code Block$(function() { var formID = $('form').attr('id'); var $form = $('#'+formID); var auto = { autoSetup: true, autoSubmit: true, }; try { var hf = $form.hostedForm(auto); } catch(e) { //Add your exception handling code here }

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>