Vue.js

En tu proyecto Vue 3, instala @zenkipay-pkg/vue.

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

npm i @zenkipay-pkg/vue

Tienes a tu disposición el componente ZenkipayButton2 que inserta el botón de pago de Zenkipay y los composables que te permiten abrir y cerrar la modal de pago. Dicho componente y composables serán descritos a continuación:

Componente ZenkipayButton2

Este componente cuenta con las siguientes propiedades y eventos:

Composable useOpenModal2

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

import { Ref } from "vue";
declare function useOpenModa2l(): Ref<OpenModalFn2 | null>;

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

Composable useCloseModal

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

import { Ref } from "vue";
declare function useCloseModal(): Ref<CloseModalFn | null>;

Cuando las dependencias de Zenkipay son importadas, éste retorna 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;
}

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

ZenkipayEvent

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

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 composables:

Usando el componente ZenkipayButton2

<script setup lang="ts">
import { ZenkipayButton2, ZenkipayData } from '@zenkipay-pkg/vue';

const orderId = 'SET_YOUR_ZENKI_ORDER_ID_HERE';
const paymentSignature = 'SET_YOUR_PAYMENT_SIGNATURE_HERE';

function handleZenkipayEvents(data: ZenkipayData): void {
  console.log(data);
}

function handleError(error: Error): void {
  console.error(error);
}
</script>

<template>
  <ZenkipayButton2
    v-bind:order-id="orderId"
    v-bind:payment-signature="paymentSignature"
    @events="handleZenkipayEvents"
    @error="handleError"
  />
</template>

Usando los composables

<script setup lang="ts">
import { Ref } from 'vue';
import {
  OpenModalFn2,
  useOpenModal2,
  ZenkipayData,
  ZenkipayOptions,
} from '@zenkipay-pkg/vue';

const orderId = 'SET_YOUR_ZENKI_ORDER_ID_HERE';
const paymentSignature = 'SET_YOUR_PAYMENT_SIGNATURE_HERE';
const options: ZenkipayOptions = { orderId, paymentSignature };

const openModalRef: Ref<OpenModalFn2 | null> = useOpenModal2();

function openZenkipayModal(): void {
  if (openModalRef.value) {
    openModalRef.value(options, handleZenkipayEvents);
  }
}

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

<template>
  <button v-if="openModalRef" @click="openZenkipayModal">
    Pay with Zenkipay
  </button>
</template>