React

In your React project, install @zenkipay-pkg/react.

We run in a terminal in the root directory of our project:

npm i @zenkipay-pkg/react

You have at your disposal our component ZenkipayButton2 that inserts the payment button and our custom hooks that allows you to open the payment Zenkipay modal. This component and custom hooks will be described below:

ZenkipayButton2 component

This component has the following properties and events:

Custom hook useOpenModal2

To open the payment modal, you can use the following hook:

declare function useOpenModal2(): OpenModalFn2 | null;

When the dependencies are Zenkipay imported, it returns a function of type OpenModalFn2, you can use this to open the payment modal.

Custom hook useCloseModal

To close the payment modal, you can use the following hook:

declare function useCloseModal(): CloseModalFn | null;

When the dependencies are Zenkipay imported, it returns a function of type CloseModalFn, you can use this to close the payment modal.

Defining entities

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!: DoneMsg | null;
}

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

class DoneMsg {
  orderId!: string;
}

OpenModalFn2

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

CloseModalFn

type CloseModalFn = () => void;

Examples

Here's an example of how you can use our component and custom hooks:

Using the 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_ZENKI_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_ZENKI_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);
  }
}