@zenobia/ui-solid

Overview

The @zenobia/ui-solid package provides Solid.js UI components and builds targets into vanilla javascript. This public npm package includes the "Pay with Zenobia" button component and other UI elements needed for seamless payment integration.

Installation

npm install @zenobia/ui-solid

or

yarn add @zenobia/ui-solid

Peer Dependencies

This package requires Solid.js as a peer dependency:

npm install solid-js

To avoid the peer dependency, use the precompiled source hosted on our CDNs:

• https://zenobiapay.com/zenobia-pay.js
• https://zenobiapay.com/zenobia-pay-modal.js

Basic Usage

Import and Use Components

import { ZenobiaPayButton } from "@zenobia/ui-solid";

function CheckoutPage() {
  const handleSuccess = (payment) => {
    console.log("Payment successful:", payment);
  };

  const handleError = (error) => {
    console.error("Payment failed:", error);
  };

  return (
    <ZenobiaPayButton
      amount={99.99}
      orderId="order-123"
      merchantId="your-merchant-id"
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}

Script Tag Usage

<!-- Include the standalone script -->
<script src="https://zenobiapay.com/embed/latest/zenobia-pay.js"></script>

<!-- Initialize the button -->
<div id="zenobia-button"></div>
<script>
  ZenobiaPay.mount("#zenobia-button", {
    amount: 99.99,
    orderId: "order-123",
    merchantId: "your-merchant-id",
  });
</script>

Components

ZenobiaPayButton

The main payment button component.

<ZenobiaPayButton
  amount={100.0}
  orderId="order-123"
  merchantId="merchant-id"
  description="Purchase from Store"
  metadata={{ customField: "value" }}
  environment="production"
  theme="light"
  size="large"
  onSuccess={(payment) => {}}
  onError={(error) => {}}
  onCancel={() => {}}
/>

Props:

• amount (number, required): Payment amount
• orderId (string, required): Your order ID
• merchantId (string, required): Zenobia merchant ID
• description (string): Payment description
• metadata (object): Additional metadata
• environment (string): 'production' or 'sandbox'
• theme (string): 'light' or 'dark'
• size (string): 'small', 'medium', or 'large'
• onSuccess (function): Success callback
• onError (function): Error callback
• onCancel (function): Cancel callback

ZenobiaPayModal

Modal component for embedded checkout.

import { ZenobiaPayModal } from "@zenobia/ui-solid";

<ZenobiaPayModal
  isOpen={showModal()}
  amount={100.0}
  orderId="order-123"
  merchantId="merchant-id"
  onClose={() => setShowModal(false)}
  onSuccess={handleSuccess}
/>;

Props:

• isOpen (boolean): Modal visibility
• amount (number): Payment amount
• orderId (string): Order ID
• merchantId (string): Merchant ID
• onClose (function): Close callback
• onSuccess (function): Success callback

ZenobiaQRCode

QR code display component.

import { ZenobiaQRCode } from "@zenobia/ui-solid";

<ZenobiaQRCode
  paymentId="payment-123"
  size={256}
  showAmount={true}
  amount={100.0}
/>;

Props:

• paymentId (string): Payment ID for QR code
• size (number): QR code size in pixels
• showAmount (boolean): Display amount below QR
• amount (number): Payment amount

Build Outputs

The package provides multiple build outputs:

Main Package (NPM)

npm run build

• dist/index.js - Main entry point
• dist/index.d.ts - TypeScript definitions

Standalone Scripts

npm run build:zenobia

• dist/zenobia/zenobia-pay.js - Standalone script for web embedding

npm run build:modal

• dist/zenobia/zenobia-pay-modal.js - Modal-specific build

npm run build:zenobia-bigcommerce

• dist/zenobia/zenobia-pay-bigcommerce.js - BigCommerce integration build

Development

Building

# Build all formats
npm run build

# Build specific format
npm run build:zenobia
npm run build:modal
npm run build:zenobia-bigcommerce

Testing

npm test

Publishing

To publish a new version:

npx changeset
npm run release

The release script will:

1. Run changeset version to update versions
2. Commit and push changes with tags
3. Build all formats
4. Run changeset publish to publish to npm
5. Deploy standalone scripts to CDN

Deployment

CDN Deployment

After building, deploy the standalone scripts to the CDN:

1. Build the standalone version:

npm run release

2. What this does is copies dist/zenobia/zenobia-pay.js to the landing page public folder (assuming this is a in the big monorepo)

(yea probably not the ideal deployment pipeline but screw you)

There are a few build targets here, for different uses:

• standard build, which exports a button component to be used
• zenobia-pay-modal.js. rather than export a button that the consumer renders, this bundle inializes itself on load and . it is for serverside creation of transfer requests, which then want to send clients to a page where they just see a transfer QR without

License

MIT License - see LICENSE for details.