- 08 Feb 2023
- OscuroLigero
React
- Actualizado en 08 Feb 2023
- OscuroLigero
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:
Propiedad | Tipo | Descripción |
---|---|---|
orderId | cadena de texto | Requerido, es el valod de zenkiOrderid y debe ser proporcionada por tu servidor. |
paymentSignature | cadena de texto | Requerido, debe ser proporcionada por tu servidor. |
style | Style2 | Opcional, éste modifica el estilo visual del botón. |
Evento | Tipo | Descripción |
---|---|---|
events | ZenkipayEvent | Emite 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);
}
}