Skip to main content

Widget Integration Examples

This guide provides examples of integrating the widget into various frameworks. The widget enables seamless cryptocurrency payments using the app wallet or other blockchain address methods. Follow the instructions below to integrate the widget into your chosen framework.

General​

To integrate the widget into your application, follow these general steps:

  1. Copy the respective code snippet for your framework.
  2. Modify the code to include your API key, item details, and any other necessary configurations provided by Globiance.
  3. Insert the code into the appropriate location within your application, considering the framework-specific conventions.
  4. Save the changes and run your application to verify the widget integration.
  5. Test the widget by initiating a payment and verifying the expected behavior.
  6. Remember to replace 'YOUR_API_KEY' with the your API key provided by Globiance.

Below are examples of integrating the widget into different frameworks. Choose the framework you are using and follow the provided code snippets to implement the integration.

Next.js​

In _document.js file add div and script using Next Script:

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <div id="widget"></div>
        <NextScript />
        <Script src="https://cdn.globiance.com/widget/latest/widget.js" strategy='beforeInteractive'/>
      </body>
    </Html>
  )
}

Now use In component

import React, { useEffect } from 'react';

function handlePayment() {
  const payload = {
    apikey: 'YOUR_API_KEY',
    amount: 100.0,
    currency: 'USD',
    note: 'Payment for Widget Purchase',
    itemName: 'Order-xyz',
    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);
}

function MyPage() {
  return (
    <div>
      <div id="widget"></div>
      <button onClick={handlePayment}>Pay with Globiance</button>
    </div>
  );
}

export default MyPage;

React​

import React from 'react';

function handlePayment() {
  const payload = {
   apikey: 'YOUR_API_KEY',
    amount: 100.0,
    currency: 'USD',
    note: 'Payment for Widget Purchase',
    itemName: 'Order-xyz',
    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);
}

function MyComponent() {
  return (
    <div>
      <div id="widget"></div>
      <button onClick={handlePayment}>Pay with Globiance</button>
    </div>
  );
}

export default MyComponent;

HTML​

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.globiance.com/widget/latest/widget.js"></script>
  </head>
  <body>
    <div>
      <div id="widget"></div>
      <button onclick="handlePayment()">Pay with Globiance</button>
    </div>

    <script>
      function handlePayment() {
        // Payload and integration code here...
      }
    </script>
  </body>
</html>

Django​

<!-- template.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.globiance.com/widget/latest/widget.js"></script>
  </head>
  <body>
    <div>
      <div id="widget"></div>
      <button onclick="handlePayment()">Pay with Globiance</button>
    </div>

    <script>
      function handlePayment() {
        // Payload and integration code here...
      }
    </script>
  </body>
</html>

Conclusion​

Integrating the widget into your application allows for seamless cryptocurrency payments. By following the examples provided for different frameworks, you can easily implement the integration and provide a convenient payment solution for your users. Customize the widget's appearance and configurations as needed, and ensure a smooth user experience during the payment process.

Happy integrating with the widget!