View Categories

Javascript Widget

4 min read

Table of Contents

PayBiz provides the facility to Javascript widget, making it both secure and simple-to-integrate. There are just three simple steps required

How it works

1

Prepare the Checkout

Send the request parameters server-to-server to prepare the payment form. Create the Payment Form Display the payment form on your checkout page and the shopper submits the payment information.
Get the Payment status: Find out if the payment was successful.

Request URL: https://staging.logibiztech.com:8777/transaction/request-payment-url?isWidget=true

Sample Request

Copy Code 


private String request() throws IOException {
  URL url = new URL
  ("https://staging.logibiztech.com:8777/transaction/request-payment-url?isWidget=true");
        HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
        conn.setRequestMethod("POST");
        conn.setRequestProperty("Authorization",
        "Bearer OGE4Mjk0MTc0YjdlY2IyODAxNGI5Njk5MjIwMDE1Y2N8c3k2S0pzVDg=");
        conn.setDoInput(true);
        conn.setDoOutput(true);
        String data = “{
        "actionCode": "1",
        "amount": 60,
        "browserColorDepth": 24,
        "browserJavaEnabled": true,
        "browserJavaScriptEnabled": true,
        "browserLanguage": "en-US",
        "browserScreenHeight": 625,
        "browserScreenWidth": 1366,
        "browserTimeZone": -300,
        "currency": "840",
        "errorUrl": http: //localhost:36315/checkout ,
        "javaScriptEnabled": true,
        "langId": "EN",
        "password": "P@ssw0rd@123",
        "successUrl": "http://localhost:36315/checkout",
        "trackId": 4489,
        "tranPortalId": "t2",
        "udf": [
            "",
            null
        ]
    }”
        DataOutputStream wr = new DataOutputStream(conn.getOutputStream());
        wr.writeBytes(data);
        wr.flush();
        wr.close();
        int responseCode = conn.getResponseCode();
        InputStream is;
        if (responseCode >= 400) is = conn.getErrorStream();
        else is = conn.getInputStream();
        return IOUtils.toString(is);
}
Copy Code 


{
    "actionCode": "1",
    "amount": 60,
    "browserColorDepth": 24,
    "browserJavaEnabled": true,
    "browserJavaScriptEnabled": true,
    "browserLanguage": "en-US",
    "browserScreenHeight": 625,
    "browserScreenWidth": 1366,
    "browserTimeZone": -300,
    "currency": "840",
    "errorUrl": "http://localhost:36315/checkout",
    "javaScriptEnabled": true,
    "langId": "EN",
    "password": "P@ssw0rd@123",
    "successUrl": "http://localhost:36315/checkout",
    "trackId": 4489,
    "tranPortalId": "t2",
    "udf": [
        "",
        null
    ]
}

Sample Response

Paybiz internally validates the request and return the response with Payment id, Payment url and Status, if failure then error code and description will be provided.

Success scenario
Copy code 
{
    "paymentUrl": "https://staging.logibiztech.com:8777/transaction/widget",
    "paymentId": "823286405370001",
    "status": "1"
}
Failure scenario
Copy code 
{
    "errorCode": "LOG-8",
    "errorDesc": "Invalid Currency ID",
    "message": "INVALID_CURRENCY"
}
2

Create Payment Form

To create the payment form you just need to combine the above obtained response and add the HTML/JavaScript to your page and populating the following variables:

  • paymentUrl
  • tranPortalId
  • paymentId
Copy code 
{
const username = ''; 
const password = ''; 
const creds = btoa(`${username}:${password}`);
const data = { 
    actionCode: '1', 
    amount: 60, 
    browserJavaScriptEnabled: true, 
    browserJavaEnabled: true,
    browserLanguage: "en-US", 
    browserScreenWidth: 1366, 
    browserTimeZone: -300, 
    currency: '847', 
    errorUrl: 'http: //localhost:36315/checkout', 
    javaScriptEnabled: true, 
    langId: 'EN', 
    password: 'P@ssw0rd@123', 
    browserColorDepth: 24, 
    browserScreenHeight: 625,
    successUrl: 'http: //localhost:36315/checkout',
    trackId: val, 
    tranPortalId: 't2', 
    udf: ['', newVal
        ]
    }
var requestOptions = { 
method: 'POST',
 headers: { 
        'Content-Type': 'application/json',
         'Accept': 'application/json',
         'Access-Control-Allow-Origin': 'http: //localhost:36315', 
         'Access-Control-Allow-Headers': "*",
          'Access-Control-Allow-Credentials': true,
          'Authorization': `Basic ${creds
            }`
        },
 body: JSON.stringify(data)
, redirect: 'follow'
    };
 fetch(`https://staging.logibiztech.com:8777/transaction/requestpayment-url?isWidget=true`,
  requestOptions
  }
.then(response => response.json())
 .then(async (result) => {
    if (result.status == '1') {
         const payId = result.paymentId;
         const URI = result.paymentUrl + '/' + data.tranPortalId + '/' + payId;
          fetch(URI) 
            .then(response => response.text())
             .then(jsCode => {
                    function executeScript() { 
                          try { eval(jsCode); // Execute the fetched script
                    } 
                            catch (error) { 
                                   console.error('Error executing script:', error);
                    }
                }
                // Execute the script within a specific div
           executeScript();
            })
              .catch(error => {})
        } else {}
    }) .catch(error => {})

Sample Response

You can use this response data to populate and display information on your response page as required by your application

Success scenario
Copy Text 
{
    "responseMessage": "Payment Successful",
    "status": "SUCCESS",
    "merchantRefId": "6566666666",
    "token": "",
    "paymentId": "823203499820001",
    "txnTime": "2023-07-2201: 53: 02PM",
    "amount": "200.0",
    "authCode": "000000",
    "responseCode": "00",
    "rrn": "139022961549"
}