@test-glide/glide-payment

v0.0.6

Published

10 days ago

A highly flexible React SDK for adding card details. Supports both standalone form rendering and built-in modal overlays, and handles both individual and recipient (beneficiary) card flows.

0High
0Medium
0Low

abhi1711

vikrantjain

bivo-payments SDK

A highly flexible React SDK for adding card details. Supports both standalone form rendering and built-in modal overlays, and handles both individual and recipient (beneficiary) card flows.

Installation

npm install @test-glide/glide-payment

Import Methods

For React:

import { AddCard } from "@test-glide/glide-payment/react";

For Vanilla JavaScript:

import * as BivoPayments from "@test-glide/glide-payment";
// or CommonJS: const BivoPayments = require("@test-glide/glide-payment");

For CSS Styling:

import "@test-glide/glide-payment/style.css";

Usage

The SDK can be used in three ways:

React Component (with npm install)
Vanilla JavaScript API (with npm install or CDN)
CDN Only (no build required, single HTML file)

React Component

The AddCard React component supports Inline (default) or Modal rendering modes.

import { AddCard } from "@test-glide/glide-payment/react";
import "@test-glide/glide-payment/style.css";
import { useState } from "react";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleResult = (result) => {
    if (result.success) {
      console.log("Success! Data:", result.data);
      setIsOpen(false); // Close modal on success (for modal mode)
    } else {
      console.error("Error:", result.error);
    }
  };

  return (
    <>
      {/* Inline Mode: Form renders directly into the layout */}
      <AddCard
        token="your-session-token"
        endpoint="your-api-endpoint"
        onCallback={handleResult}
      />

      {/* Inline Mode with Beneficiary Card */}
      <AddCard
        token="your-session-token"
        endpoint="your-api-endpoint"
        onCallback={handleResult}
        beneficiaryCard
      />

      {/* Modal Mode: Form opens in a controlled modal */}
      <button onClick={() => setIsOpen(true)}>Add Card (Modal)</button>

      <AddCard
        isModal
        isOpen={isOpen}
        token="your-session-token"
        endpoint="your-api-endpoint"
        onCallback={handleResult}
        onClose={() => console.log("Modal closed")}
      />
    </>
  );
}

Key Points:

Inline Mode - Form renders directly into your layout. Default behavior.
Modal Mode - Pass isModal and control visibility with isOpen prop. Component renders null to the DOM; modal is managed by SDK internally.
Beneficiary Card - Add the beneficiaryCard prop in either mode to show recipient card flow.

Vanilla JavaScript API

For non-React applications, use the init() function from the main entry point:

With npm (ES Modules)

import * as BivoPayments from "@test-glide/glide-payment";
import "@test-glide/glide-payment/style.css";

// Initialize the SDK
const bivo = BivoPayments.init({
  token: "your-session-token",
  endpoint: "your-api-endpoint",
  beneficiaryCard: false,
  isModal: false,
  onCallback: (result) => {
    if (result.success) {
      console.log("Success! Data:", result.data);
    } else {
      console.error("Error:", result.error);
    }
  },
});

// Inline mode: mount to a DOM element
bivo.mount({ id: "my-form-container" });

// OR for modal mode
const bivoModal = BivoPayments.init({
  token: "your-session-token",
  endpoint: "your-api-endpoint",
  isModal: true,
  onCallback: handleCallback,
});

// Control modal visibility
document.querySelector("#openBtn").addEventListener("click", () => {
  bivoModal.open();
});

// Close modal and clean up
bivo.destroy();

With CDN (No Build Required)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bivo Payments</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@test-glide/glide-payment@latest/dist/style.css"
    />
  </head>
  <body>
    <div id="app"></div>
    <button id="open-modal">Open Modal</button>

    <script src="https://cdn.jsdelivr.net/npm/@test-glide/glide-payment@latest/dist/index.umd.js"></script>
    <script>
      const TOKEN = "your-session-token";
      const ENDPOINT = "your-api-endpoint";

      const handleCallback = (result) => {
        if (result.success) {
          console.log("Success! Data:", result.data);
        } else {
          console.error("Error:", result.error);
        }
      };

      // Modal mode
      const bivoModal = BivoPayments.init({
        token: TOKEN,
        endpoint: ENDPOINT,
        isModal: true,
        onCallback: handleCallback,
      });

      document.getElementById("open-modal").addEventListener("click", () => {
        bivoModal.open();
      });
    </script>
  </body>
</html>

The SDK is immediately available as BivoPayments on the global scope when loaded via CDN.

Selector Options for `mount()`

The mount() method accepts one of three selector formats:

By element ID: mount({ id: "container-id" })
By CSS class name: mount({ className: "form-container" })
By DOM element reference: mount({ element: document.querySelector("#form") })

React Component Props

The AddCard React component accepts the following props:

| Prop | Type | Required | Description | | ----------------- | ---------- | ----------- | ------------------------------------------------------------------------------- | | token | string | Yes | Session token for API authentication. | | endpoint | string | Yes | API endpoint URL for card submission. | | beneficiaryCard | boolean | No | If true, shows recipient card flow. Defaults to false (individual flow). | | onCallback | function | No | Callback function receiving { success: boolean, data?: any, error?: string }. | | onClose | function | No | Callback function triggered when modal is closed (modal mode only). | | isModal | boolean | No | If true, renders in modal mode. Defaults to false. | | isOpen | boolean | Conditional | Required if isModal is true. Controls modal visibility. |

Theming (CSS Variables)

The components in @test-glide/glide-payment can be easily themed by overriding the default CSS variables. Below is the list of available CSS variables with their default values and where they are used:

:root {
  --bivo-payments-font-family: inherit; /* Applied globally to AddCard and internal components */

  --bivo-payments-bg: #ffffff; /* Main background color for AddCard form, Modal, Inputs, and Alerts */
  --bivo-payments-bg-overlay: rgba(
    0,
    0,
    0,
    0.35
  ); /* Background color for the overlay behind modals and alerts */
  --bivo-payments-bg-secondary: #f9f9f9; /* Secondary background color, e.g., Modal actions footer */

  --bivo-payments-text: #000000; /* Primary text color used across headings, inputs, and form content */
  --bivo-payments-text-secondary: #666666; /* Secondary text color for close buttons, labels, and descriptions */
  --bivo-payments-placeholder: #999999; /* Placeholder text color in input fields */

  --bivo-payments-border: #e3e5e9; /* Standard border color for inputs and dividers */
  --bivo-payments-secondary: #eee; /* Divider line color (e.g., above modal footer) */

  --bivo-payments-primary: #000000; /* Primary button background, active input borders, and primary confirm actions */
  --bivo-payments-primary-text: #ffffff; /* Text color inside primary buttons */

  --bivo-payments-info: #4a90e2; /* Info state text/borders, loading skeleton, and links */
  --bivo-payments-success: #15803d; /* Success text color (e.g., success messages, valid checkmarks) */
  --bivo-payments-danger: #eb5757; /* Error/Danger text color, error borders */
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme