@dingpay/react

DingPay for React. Ticketing and payments.

Installation

npm install @dingpay/react

Tickets: Add to Ding Wallet

A button that sends event tickets directly to users' Ding Wallets.

import { AddToDingWalletButton } from '@dingpay/react';

function TicketPage() {
  return (
    <AddToDingWalletButton
      company={{
        name: 'Afrobeats Fest',
        logo: 'https://example.com/logo.png',
      }}
      info={{
        image: 'https://example.com/event.png',
        date: '25/12/2026',
        time: '20:00',
        venue: 'Eko Hotel, Lagos',
        title: 'Afrobeats Festival 2026',
      }}
      tickets={[
        {
          user: { firstName: 'Josteve', lastName: 'Adekanbi', email: '[email protected]' },
          ticketType: 'VIP',
          qr: 'encrypted_qr_data',
        },
      ]}
      onSuccess={(data) => console.log('Added:', data.groupId)}
      onFailure={(message) => alert(message)}
    />
  );
}

Multiple tickets

Buy tickets for multiple people. Set primaryIndex to indicate the buyer (defaults to 0).

<AddToDingWalletButton
  company={{ name: 'Afrobeats Fest', logo: '...' }}
  info={{
    image: '...',
    date: '25/12/2026',
    time: '20:00',
    venue: 'Eko Hotel, Lagos',
    title: 'Afrobeats Festival 2026',
  }}
  primaryIndex={0}
  tickets={[
    {
      user: { firstName: 'Josteve', lastName: 'Adekanbi', email: '[email protected]' },
      ticketType: 'VIP',
      qr: 'qr_data_1',
    },
    {
      user: { firstName: 'John', lastName: 'Doe', email: '[email protected]' },
      ticketType: 'Regular',
      qr: 'qr_data_2',
    },
  ]}
  onSuccess={(data) => console.log(data)}
  onFailure={(msg) => alert(msg)}
/>

API

<AddToDingWalletButton />

| Prop | Type | Required | Description | |------|------|----------|-------------| | company | { name: string, logo: string } | Yes | Event company details | | info | EventInfo | Yes | Event details (image, date, time, venue, title) | | tickets | Ticket[] | Yes | Array of tickets with user info, type, and QR data | | primaryIndex | number | No | Index of the buyer in the tickets array (default: 0) | | onSuccess | (data: { groupId, ticketIds }) => void | No | Called on success | | onFailure | (message: string) => void | No | Called on failure | | onLoading | (loading: boolean) => void | No | Called when loading state changes | | className | string | No | Custom CSS class | | style | React.CSSProperties | No | Custom inline styles | | disabled | boolean | No | Disable the button | | children | React.ReactNode | No | Custom button text |

Custom styling

<AddToDingWalletButton
  style={{ backgroundColor: '#6C63FF', borderRadius: '10px' }}
  className="my-button"
  {...props}
>
  Send Tickets
</AddToDingWalletButton>

Works with

• React 16.8+
• Vite
• Next.js: Add transpilePackages: ['@dingpay/react'] to your next.config.js

License

MIT