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>