Zenkipay for Vue 3

• Zenkipay for Vue 3
  • Installation
  • Usage
    • ZenkipayButton2 component
    • Composables
  • Entity definitions
    • Styles
    • ZenkipayOptions
    • ZenkipayData
    • ZenkipayEvent
    • OpenModalFn2
    • CloseModalFn
  • Example
    • Using ZenkipayButton2 component
    • Using composables

Installation

npm i @zenkipay-pkg/vue@3

Usage

You can use the ZenkipayButton2 component directly, or the composables to verify the discount percentage and the call to the payment modal.

ZenkipayButton2 component

The next table explains available props

| Prop | Type | Description | | :--------------- | :---------------- | :---------------------------------------------- | | orderId | string | Required, it will be get from your backend. | | paymentSignature | string | Required, it will be get from your backend. | | style | Style2 | Optional, it modifies the styles of the button. |

The next table explains available events:

| Event | Type | Description | | :----- | :---------------------------- | :---------------------------------- | | events | ZenkipayData | It emits each update of the payment | | error | Error | It emits when there are an error |

Composables

To open the payment modal, you will use the next hook:

import { Ref } from 'vue';
function useOpenModal2(): Ref<OpenModalFn2 | null>;

When zenkipay script is loaded, it returns OpenModalFn2, you will use it to open the payment modal.

To close the payment modal, you will use the next hook:

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

When zenkipay script is loaded, it returns CloseModalFn, you will use it to close the payment modal.

Entity definitions

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

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

class ConfirmingMsg {
  transaction!: MsgTrxDetails;
}

class DoneMsg extends ConfirmingMsg {
  orderId!: string;
}

class MsgTrxDetails {
  transactionExplorerUrl!: string;
  transactionHash!: string;
}

ZenkipayEvent

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

OpenModalFn2

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

CloseModalFn

type CloseModalFn = () => void;

Example

Using ZenkipayButton2 component

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

const lang = 'es-419';
const orderId = 'SET_YOUR_ORDER_ID_HERE';
const paymentSignature = 'SET_YOUR_PAYMENT_SIGNATURE_HERE';
const style: Style2 = {
  theme: 'orange',
  size: 'sm',
  shape: 'pill',
  expand: 'block',
  type: 'cryptos',
};

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

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

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

Using composables

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

const orderId = 'SET_YOUR_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>