@zenkipay-pkg/vue
TypeScript icon, indicating that this package has built-in type declarations

3.2.3 • Public • Published

Zenkipay for Vue 3


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>

Readme

Keywords

none

Package Sidebar

Install

npm i @zenkipay-pkg/vue

Weekly Downloads

0

Version

3.2.3

License

MIT

Unpacked Size

148 kB

Total Files

35

Last publish

Collaborators

  • chava23
  • ivan-zenki
  • zenkipay