Payment QR (Send)

| The Payment QR component is a function that send the coin though ZIGAP App.

PaymentQR Props

Props	Required	Type	Description
network	true	string	The name of the network to use (e.g., "xphere").
dapp	true	string	The name of the DApp initiating the payment request.
address	true	string	The recipient's address for the payment.
amount	true	string	The amount to be paid.
description	false	string	A brief description of the payment.
info	false	object	Additional information related to the payment.
validSeconds	true	number	The duration (in seconds) for which the QR code is valid.
isShowLogo	false	boolean	Whether to display your DApp’s logo in the QR code.
logoSize	false	number	The size of the logo displayed in the QR code (in pixels).
size	true	number	The size of the generated QR code (in pixels).
onReveive	true	(res : { status: string }) => void	Callback function that handles payment status updates.
processingMark	false	type: DEFAULT or CUSTOM or NONE	Configures the appearance of the QR code while processing.

Payment Statuses

The onReceive callback provides the following statuses:

• SUCCESS : Payment was successful.

• REQUEST : Payment has been requested and is in progress.

• ACCOUNT : Account selection or preparation is in progress.

• ERROR : An error occurred during payment.

Processing Mark Options

• DEFAULT : Displays a default "processing..." message during payment.

• CUSTOM : Allows you to pass a custom React component to display during processing.

• NONE : No visual indicator is shown during processing.

Example

import { PaymentQR } from 'zigap-utils';

const App = () => {
  const [result1, setResult1] = useState<undefined | string>(undefined);

  ...

  return (
    <div>
      <PaymentQR
        network={'network name'}
        dapp='your dapp name'
        address='address'
        amount='100'
        validSeconds={10000}
        onReceive={({ status }) => {
          if (status === 'SUCCESS') {
            setResult1('succeed');
          } else if (status === 'REQUEST' || status === 'ACCOUNT') {
            setResult1(`processing - ${status}`);
          } else {
            setResult1('failed');
          }
        }}
        size={200}
        processingMark={{
          type: 'NONE',
        }}
      />

      <div>
        {result1 === undefined ? <span>before start</span> : <span>{result1}</span>}
      </div>
    </div>
  )
}

Example Usage of processingMark

To use a custom component:

 <PaymentQR
   ...
   processingMark={{
     type: 'CUSTOM',
     component: <div>Loading your payment...</div>,
   }}
 />