Vue.js

In your Vue 3 project, install @zenkipay-pkg/vue.

Run in a terminal in the root directory of our project:

npm i @zenkipay-pkg/vue

You have at your disposal the component ZenkipayButton2 that inserts the payment button and the composables that allow you to open and close the payment Zenkipay modal. This component and composables will be described below:

ZenkipayButton2 component

This component has the following properties and events:

Composable useOpenModal2

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

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

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

Composable useCloseModal

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

import { Ref } from "vue";
declare function useCloseModal(): Ref<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;
}

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;

Examples

Below is an example of how you can use our component and our composables:

Using the ZenkipayButton2 component

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

Using the 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>