Skip to main content

Button Integration Examples

HTML​


  <body>
    <div>
      <globiance-pay></globiance-pay>
    </div>
    ...
    <script 
      src="https://cdn.globiancepay.com/button/latest/button.js" 
      id="globiance-payment-btn" 
      button-id="6fffab80-8af2-11ef-8bce-7feaf8ea02ae"
      api-key="3e78e9af-9f8d-4b0a-b53b-e55c01347479"
    ></script>
  </body>

Next.js​

Modify Rootlayout by adding script tag where the source is our CDN link.


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <script
          src="https://cdn.globiancepay.com/button/latest/button.js"
          id="globiance-payment-btn"
          button-id="6fffab80-8af2-11ef-8bce-7feaf8ea02ae"
          api-key="3e78e9af-9f8d-4b0a-b53b-e55c01347479"
        ></script>
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Now, Globiance button can be added anywhere inside the page to enable payment.

<globiance-pay></globiance-pay>

Angular​

Import Globiance button by adding script tag to angular root html.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script
    src="https://cdn.globiancepay.com/button/latest/button.js"
    id="globiance-payment-btn"
    button-id="6fffab80-8af2-11ef-8bce-7feaf8ea02ae"
    api-key="3e78e9af-9f8d-4b0a-b53b-e55c01347479"
  ></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Add CUSTOM_ELEMENTS_SCHEMA flag to avoid conflict with angular.


import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
  title = 'angular-app';
}

Now, Globiance button can be added anywhere inside the page to enable payment.

<globiance-pay></globiance-pay>

Vue​

Import Globiance button to Vue root html document.


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script 
      src="https://cdn.globiancepay.com/button/latest/button.js" 
      id="globiance-payment-btn" 
      button-id="6fffab80-8af2-11ef-8bce-7feaf8ea02ae"
      api-key="3e78e9af-9f8d-4b0a-b53b-e55c01347479"
    ></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Now, Globiance button can be added anywhere inside the page to enable payment.

<globiance-pay></globiance-pay>

Svelte​

Modify Svelte root html file by adding script tag.


<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
		<script 
		      src="https://cdn.globiancepay.com/button/latest/button.js" 
		      id="globiance-payment-btn" 
		      button-id="6fffab80-8af2-11ef-8bce-7feaf8ea02ae"
		      api-key="3e78e9af-9f8d-4b0a-b53b-e55c01347479"
		></script>
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

Now, Globiance button can be added anywhere inside the page to enable payment.

<globiance-pay></globiance-pay>

Conclusion​

Integrating the button 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 button's appearance and configurations as needed, and ensure a smooth user experience during the payment process.

Happy integrating with the button!