How to Implement ConvesioPay with Checkout Champ on Custom Checkout Pages

When integrating ConvesioPay with Checkout Champ, merchants utilizing the native Checkout Champ hosted checkout pages benefit from an out-of-the-box setup. However, if you have opted to build a custom or non-hosted checkout experience, additional configuration is required. Specifically, you must pass essential browser data and the customer’s IP address to ensure transaction authorization rates are high and transactions are not blocked due to fraud.

This guide outlines the necessary steps to configure your custom checkout page for ConvesioPay.

Step 1: Add the Hidden Browser Data Input Field

To collect the required browser information during the checkout process, you must include a hidden input field within the same HTML <form> that contains your credit card input fields.

Add the following HTML code to your form:

<input type="hidden" name="browserData" value="" id="browserData">

Step 2: Add the Browser Data Collection Script

Next, you need to populate the hidden input field with the customer’s browser environment details. Add the following JavaScript snippet to your page, placing it just before the closing </body> tag to ensure the DOM has fully loaded.

<script type="text/javascript">
    const navigator = window.navigator;
    const browserData = {
        acceptHeader: 'application/json',
        userAgent: navigator.userAgent,
        language: navigator.language,
        timezone: (new Date()).getTimezoneOffset().toString(),
        colorDepth: screen.colorDepth,
        screen: {
            height: screen.height.toString(),
            width: screen.width.toString()
        },
        javaScriptEnabled: true,
        javaEnabled: navigator.javaEnabled()
    };
    document.getElementById('browserData').value = JSON.stringify(browserData);
</script>

This script automatically gathers data such as the user agent, timezone, and screen resolution, formatting it into a JSON string and assigning it to the browserData input field.

Step 3: Pass the Customer IP Address via API

In addition to the browser data, you must transmit the customer’s IP address when submitting the order. This is accomplished by passing the ipAddress parameter via the Konnektive CRM API.

When calling the relevant API endpoints (such as Import Lead or Import Order), ensure you include the ipAddress field in your request payload.

Parameter	Type	Description	Requirements
ipAddress	String	The customer’s IP address	Must be a valid IPv4 or IPv6 format

For comprehensive details on all available API parameters, please refer to the official Konnektive CRM API Documentation.

Need Help with ConvesioPay?

By following these three steps, your custom checkout page will be fully equipped to handle ConvesioPay transactions through Checkout Champ.

Looking to optimize your payment processing and increase your conversion rates? ConvesioPay offers a streamlined, high-performance payment gateway designed specifically for scaling eCommerce businesses. If you encounter any issues during implementation or want to learn more about our payment solutions, our expert support team is here to help.