Versions Compared

Old Version 15

changes.mady.by.user Sainita Mukherjee

Saved on

compared with

New Version 16

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, an a Blink API is called on the Blink Platform to tokenise the card details fetched from the automatically triggered to tokenize the hosted card fields and generate a payment Token value. This value will be auto added in token. This generated payment token is automatically inserted into the payment form, which is then submitted.

To achieve enable this , follow the below steps.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>

JQuery
Hostedfields.js
Custom JS

Anchor
jquery
jquery

JQuery

Hosted Fields The hosted fields requires JQuery. The Gateway 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>

Anchor
custom-js
custom-js

Custom JS

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

Please note that 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 submissionon your payment page by the custom.js and hostedfields.js.

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
}<script src="https://secure.blinkpayment.co.uk/assets/js/api/custom.js"></script>