Skip to main content

Widget Integration

This guide provides step-by-step instructions for integrating the widget into your application. By following these steps, you can enable your customers to make cryptocurrency payments using their Globiance app wallet or other blockchain address methods.

Before you begin the integration process, ensure that you have the following prerequisites:

  1. Access to the source code of your application.
  2. An API key from Globiance to authenticate your widget requests.

Step 1: Add the Widget Container​

To start integrating the widget, you need to add a <div> element with the ID "widget" at the root level of your application. This container will serve as the placeholder for the widget.

Copy code
<div id="widget"></div>

Step 2: Include the Widget Script​

Next, you need to include the widget payment script in your application. Place the following <script> tag in the <head> section of your HTML code or before the closing </body> tag.

Copy code
<script src="https://cdn.globiance.com/widget/latest/widget.js"></script>

This script will load the necessary widget functionality into your application.

Step 3: Trigger the Widget on Button Click​

To initiate the widget and enable users to make payments, you need to add a button to your application. On the button's click event, trigger the window.Start(_payload) function and pass the required attributes as the payload to the widget.

The following attributes should be included in the payload:

  • apikey (required: true, default: null):
    • Your API key obtained from Globiance.
  • amount (required: true, default: null):
    • The amount to be paid by the customer.
  • currency (required: true, default: "USD"):
    • The currency in which the payment should be processed (e.g., "USD", "EUR").
  • note (required: false, default: null):
    • An optional note or description for the payment.
  • itemName (required: false, default: null):
    • The name of the Order against which the checkout is created.
  • clientId (required: false, default: null):
    • An identifier for the client initiating the payment from merchant system.
  • itemId (required: false, default: null):
    • An identifier for the Order from merchant system.
  • language (required: false, default: "en"):
    • The language to be used in the widget interface (e.g., "en", "de", "fr").
  • theme (required: false, default: "light"):
    • An optional parameter to customize the widget's appearance.
  • items (required: true, default: null):
    • Array of items which are included in Order.

Here's an example of how you can trigger the widget on button click:

Copy code
function handlePayment() {
  const payload = {
    apikey: 'YOUR_API_KEY',
    amount: 100.0,
    currency: 'USD',
    note: 'Payment for Widget Purchase',
    itemName: 'YOUR_ORDER_NAME',
    clientId: 'YOUR_CLIENT_ID',
    itemId: 'YOUR_ORDER_ID',
    language: 'en',
    theme: 'light',
    items: [
      {
          itemName: "Test Item",
          price: 50,
          qty: 5,
          taxRate: 1.5
        }
      ]
  };

  window.Start(payload);
}

// Attach the click event listener to your button
const paymentButton = document.getElementById('paymentButton');
paymentButton.addEventListener('click', handlePayment);

Make sure to replace 'YOUR_API_KEY', 'YOUR_CLIENT_ID', and 'YOUR_ORDER_ID' with the respective values provided by Globiance and items Array values respectively.

That's it! Once you've completed these steps, the widget will be triggered when the button is clicked, allowing your customers to make cryptocurrency payments.

Integration of Globiance Pay Button

The Globiance Pay widget provides developers with an easy and seamless integration for customers to make payments. To integrate the widget, simply place a div element with the id "globiance-pay" in your web page. This div will serve as the container where the Globiance Pay button will be displayed. The button itself has a submit type, enabling all payload data to be conveniently handled through the form's submit event. By incorporating the Globiance Pay widget into your website, you can offer your customers a hassle-free payment experience while effortlessly managing the transaction data.

Additional Customization Options​

The widget provides additional customization options to match your application's branding. Here are some parameters you can add to the payload for customization:

theme: Use either 'light' or 'dark' to set the widget's color theme.
language: An optional language to interact with users.