Zenkipay for React 16, 17, 18

• Zenkipay for React 16, 17, 18
  • Installation
  • Usage
    • ZenkipayButton2 component
    • Custom hooks
      • useOpenModal2
      • useCloseModal
  • Entity definitions
    • Styles
    • ZenkipayEvent
    • ZenkipayOptions
    • ZenkipayData
    • OpenModalFn2
    • CloseModalFn
  • Example
    • Using ZenkipayButton2 component
    • Using custom hooks

Installation

npm i @zenkipay-pkg/react

Usage

You can use the ZenkipayButton2 component directly, or the custom hooks to verify the discount percentage and the call to the payment modal.

ZenkipayButton2 component

The next table explains available props

| Prop | Type | Description | | :--------------- | :---------------- | :---------------------------------------------- | | orderId | string | Required, it will be get from your backend. | | paymentSignature | string | Required, it will be get from your backend. | | style | Style2 | Optional, it modifies the styles of the button. |

The next table explains available events:

| Event | Type | Description | | :----- | :------------------------------ | :---------------------------------- | | events | ZenkipayEvent | It emits each update of the payment |

Custom hooks

useOpenModal2

To open the payment modal, you will use the next hook:

function useOpenModal2(): OpenModalFn2 | null;

When zenkipay script is loaded, it returns OpenModalFn2, you will use it to open the payment modal.

useCloseModal

To close the payment modal, you will use the next hook:

function useCloseModal(): CloseModalFn | null;

When zenkipay script is loaded, it returns CloseModalFn, you will use it to close the payment modal.

Entity definitions

Styles

class Style2 {
  theme?: Theme2;
  size?: Size2;
  shape?: Shape2;
  expand?: Expand;
  type?: Type;
  colors?: Colors;
}

type Theme2 = 'default' | 'orange' | 'purple' | 'dark';

type Size2 = 'default' | 'sm';

type Shape2 = 'default' | 'pill';

type Expand = 'default' | 'block';

type Type = 'default' | 'cryptos';

class Colors {
  background?: string;
  border?: string;
  font?: string;
}

ZenkipayEvent

type ZenkipayEvent = (error: Error | null, data: ZenkipayData) => void;

ZenkipayOptions

class ZenkipayOptions {
  orderId!: string;
  paymentSignature!: string;
}

ZenkipayData

class ZenkipayData {
  postMsgType!: POST_MSG_TYPE;
  isCompleted!: boolean; // It's `true` when modal is closed
  data!: ConfirmingMsg | DoneMsg | null;
}

const enum POST_MSG_TYPE {
  CANCEL = 'cancel',
  DONE = 'done',
  CLOSE = 'close',
  ERROR = 'error',
  PROCESSING_PAYMENT = 'processing_payment',
  SHOPPER_PAYMENT_CONFIRMATION = 'shopper_payment_confirmation'
}

class ConfirmingMsg {
  transaction!: MsgTrxDetails;
}

class DoneMsg extends ConfirmingMsg {
  orderId!: string;
}

class MsgTrxDetails {
  transactionExplorerUrl!: string;
  transactionHash!: string;
}

OpenModalFn2

type OpenModalFn2 = (
  options: ZenkipayOptions,
  events: ZenkipayEvent
) => CloseModalFn;

CloseModalFn

type CloseModalFn = () => void;

Example

Using ZenkipayButton2 component

import React, { useState } from 'react';
import { Style2, ZenkipayData, ZenkipayButton2 } from '@zenkipay-pkg/react';

export function App(): JSX.Element {
  const [orderId] = useState<string>('SET_YOUR_ORDER_ID_HERE');
  const [paymentSignature] = useState<string>(
    'SET_YOUR_PAYMENT_SIGNATURE_HERE'
  );
  const [style] = useState<Style2>({ shape: 'pill' });

  return (
    <ZenkipayButton2
      style={style}
      orderId={orderId}
      paymentSignature={paymentSignature}
      events={handleZenkipayEvents}
    />
  );

  function handleZenkipayEvents(error: Error | null, data: ZenkipayData): void {
    if (error) return console.error(error);
    console.log(data);
  }
}

Using custom hooks

import React, { useState } from 'react';
import {
  OpenModalFn2,
  useOpenModal2,
  ZenkipayData,
  ZenkipayOptions
} from '@zenkipay-pkg/react';

export function App(): JSX.Element {
  const openModal: OpenModalFn2 = useOpenModal2();

  const [orderId] = useState<string>('SET_YOUR_ORDER_ID_HERE');
  const [paymentSignature] = useState<string>(
    'SET_YOUR_PAYMENT_SIGNATURE_HERE'
  );
  const [options] = useState<ZenkipayOptions>({ orderId, paymentSignature });

  return <button onClick={openPaymentModal}>Pay with Zenkipay</button>;

  function openPaymentModal(): void {
    if (openModal) openModal(options, handleZenkipayEvents);
  }

  function handleZenkipayEvents(error: Error | null, data: ZenkipayData): void {
    if (error) return console.error(error);
    console.log(data);
  }
}