React
  • 08 Feb 2023
  • Oscuro
    Ligero

React

  • Oscuro
    Ligero

Article Summary

En tu proyecto React, instala @zenkipay-pkg/react.

Ejecutamos en una terminal en el directorio root de nuestro proyecto:

npm i @zenkipay-pkg/react

Tienes a tu disposición nuestro componente ZenkipayButton2 que inserta el botón de pago de Zenkipay y nuestros hooks personalizados que te permite abrir la modal de pago. Dicho componente y hooks personalizados serán descritos a continuación:

Componente ZenkipayButton2

Este componente cuenta con las siguientes propiedades y eventos:

PropiedadTipoDescripción
orderIdcadena de textoRequerido, es el valod de zenkiOrderid y debe ser proporcionada por tu servidor.
paymentSignaturecadena de textoRequerido, debe ser proporcionada por tu servidor.
styleStyle2Opcional, éste modifica el estilo visual del botón.
EventoTipoDescripción
eventsZenkipayEventEmite cada actualización de eventos de la modal de pago.

Hook personalizado useOpenModal2

Para abrir la modal de pago, puedes usar el siguiente hook:

declare function useOpenModal2(): OpenModalFn2 | null;

Cuando las dependencias de Zenkipay son importadas, éste returna una función de tipo OpenModalFn2, puedes usar ésta para abrir la modal de pago.

Hook personalizado useCloseModal

Para cerrar la modal de pago, puedes usar el siguiente hook:

declare function useCloseModal(): CloseModalFn | null;

Cuando las dependencias de Zenkipay son importadas, éste returna una función de tipo CloseModalFn, puedes usar ésta para cerrar la modal de pago.


Definición de entidades

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;

Ejemplos

A continuación se muestra un ejemplo de cómo puedes usar nuestro componente y nuestros hooks personalizados:

Usando el componente ZenkipayButton2

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);
  }
}

Usando hooks personalizados

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);
  }
}

¿Te ha sido útil este artículo?