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 GlobiancePay.
  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 GlobiancePay.

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 />
        <NextScript />
        <Script src="https://cdn.globiancepay.com/widget/latest/widget.js" strategy='beforeInteractive'/>
      </body>
    </Html>
  )
}

Now use In component

import React from 'react';

function handlePayment() {
  <!-- Payload with items array -->

  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
      }
    ]
  };

  <!-- Payload with pages array -->

  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',
    pages: [
          {
            pageTitle: "Amount Details",
            fields: [
              {
                type: "fixed-amount",
                disabled: true,
                value: "44000",
                label: "Platinum Package",
                mandatory: false,
                fieldType: "amount",
              },
            ],
          },
          {
            pageTitle: "Customer Details",
            fields: [
              {
                type: "text",
                disabled: false,
                label: "Full Name",
                mandatory: true,
                defaultValue: "",
                fieldType: "input",
              },
              {
                type: "text",
                disabled: false,
                label: "Email",
                mandatory: true,
                defaultValue: "",
                fieldType: "input",
              },
              {
                type: "text",
                disabled: false,
                label: "Mobile Number",
                fieldKey: "mobile_number",
                mandatory: false,
                fieldType: "input",
              },
              {
                type: "text",
                disabled: false,
                label: "Company Name",
                mandatory: false,
                defaultValue: "",
                fieldType: "input",
              },
            ],
          },
        ];
  };

  window.Start(payload);
}

function MyPage() {
  return (
    <div>
      <button onClick={handlePayment}>Pay with GlobiancePay</button>
    </div>
  );
}

export default MyPage;

React​

import React from 'react';

function handlePayment() {
  <!-- Payload with items array -->

  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
      }
    ]
  };

  <!-- Payload with pages array -->

  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',
    pages: [
          {
            pageTitle: "Amount Details",
            fields: [
              {
                type: "fixed-amount",
                disabled: true,
                value: "44000",
                label: "Platinum Package",
                mandatory: false,
                fieldType: "amount",
              },
            ],
          },
          {
            pageTitle: "Customer Details",
            fields: [
              {
                type: "text",
                disabled: false,
                label: "Full Name",
                mandatory: true,
                defaultValue: "",
                fieldType: "input",
              },
              {
                type: "text",
                disabled: false,
                label: "Email",
                mandatory: true,
                defaultValue: "",
                fieldType: "input",
              },
              {
                type: "text",
                disabled: false,
                label: "Mobile Number",
                fieldKey: "mobile_number",
                mandatory: false,
                fieldType: "input",
              },
              {
                type: "text",
                disabled: false,
                label: "Company Name",
                mandatory: false,
                defaultValue: "",
                fieldType: "input",
              },
            ],
          },
        ];
  };

  window.Start(payload);
}

function MyComponent() {
  return (
    <div>
      <button onClick={handlePayment}>Pay with GlobiancePay</button>
    </div>
  );
}

export default MyComponent;

HTML​

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

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

Django​

<!-- template.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.globiancepay.com/widget/latest/widget.js"></script>
  </head>
  <body>
    <div>
      <button onclick="handlePayment()">Pay with GlobiancePay</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!