@reevit/vue

@reevit/vue

Vue 3 SDK for integrating Reevit unified payments into your application.

Installation

npm install @reevit/vue

Compatibility

@reevit/core is a regular dependencies entry of this package — npm installs it for you. Do not add it to your own package.json unless you import it directly.

On a 0.x package a caret range pins the minor, not the major: ^0.9.0 resolves to >=0.9.0 <0.10.0. A future @reevit/core 0.10.0 is therefore not picked up automatically — the React, Vue and Svelte manifests have to be bumped together in the same release.

Quick Start

The simplest way to integrate Reevit is using the ReevitCheckout component.

<script setup lang="ts">
import { ReevitCheckout } from '@reevit/vue';
import '@reevit/vue/styles.css';

const handleSuccess = (result: any) => {
  console.log('Payment success!', result);
};

const handleError = (error: any) => {
  console.error('Payment failed:', error);
};
</script>

<template>
  <ReevitCheckout
    publicKey="pfk_test_xxx"
    :amount="10000"
    currency="GHS"
    email="customer@example.com"
    idempotencyKey="order_12345"
    @success="handleSuccess"
    @error="handleError"
  >
    <template #default="{ open, isLoading }">
      <button 
        class="my-pay-button" 
        :disabled="isLoading" 
        @click="open"
      >
        {{ isLoading ? 'Loading...' : 'Pay GHS 100.00' }}
      </button>
    </template>
  </ReevitCheckout>
</template>

Server-created Checkout Sessions

For production checkouts, create the payment session on your backend with a server SDK, then pass the returned session_secret to Vue. The browser never creates the payment intent directly, so amount and currency are not needed — they come from the session.

<ReevitCheckout
  :sessionSecret="checkoutSession.session_secret"
  :paymentMethods="['card', 'mobile_money']"
  @success="handleSuccess"
  @error="handleError"
/>

Keep the session secret in the browser, but never expose your private Reevit API key.

Idempotency

Provide an idempotencyKey tied to your order/cart to avoid duplicate intent creation and enable safe retries.

<ReevitCheckout
  publicKey="pfk_test_xxx"
  :amount="10000"
  currency="GHS"
  idempotencyKey="order_12345"
/>

Controlled Modal

You can control the open state yourself.

<script setup>
const open = ref(false);
</script>

<template>
  <ReevitCheckout
    publicKey="pfk_test_your_key"
    :amount="10000"
    currency="GHS"
    :isOpen="open"
    @close="open = false"
  />
</template>

Success Screen Delay

By default, the checkout shows a success screen for 5 seconds before calling @success and closing. Override with successDelayMs (set to 0 for immediate close).

<ReevitCheckout :successDelayMs="0" />

Custom Theme

<ReevitCheckout
  :theme="{
    primaryColor: '#00D1B2',
    backgroundColor: '#FFFFFF',
    darkMode: false,
    borderRadius: '4px'
  }"
  publicKey="pfk_test_xxx"
  :amount="5000"
  currency="GHS"
>
  <button>Pay Now</button>
</ReevitCheckout>

Advanced Usage: useReevit Composable

For full control over the payment flow, use the useReevit composable.

<script setup lang="ts">
import { useReevit } from '@reevit/vue';

const { 
  status, 
  initialize, 
  selectMethod, 
  isLoading 
} = useReevit({
  config: {
    publicKey: 'pfk_test_xxx',
    amount: 5000,
    currency: 'GHS',
  },
  onSuccess: (res) => console.log('Payment done!', res),
});
</script>

<template>
  <button @click="initialize">Start Payment</button>
  <div v-if="status === 'ready'">
    <button @click="selectMethod('card')">Card</button>
    <button @click="selectMethod('mobile_money')">Mobile Money</button>
  </div>
</template>

Props Reference

Theme Reference

Events

PSP Bridge Functions

For advanced use cases, you can use PSP bridge functions directly to open payment modals.

Stripe

import { createStripeInstance, confirmStripePayment } from '@reevit/vue';

// Create Stripe instance
const stripe = await createStripeInstance('pk_test_xxx');
const elements = stripe.elements({ clientSecret: 'pi_xxx_secret_xxx' });
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

// Later, confirm the payment
await confirmStripePayment({
  publishableKey: 'pk_test_xxx',
  clientSecret: 'pi_xxx_secret_xxx',
  elements,
  onSuccess: (result) => console.log('Paid:', result.paymentIntentId),
  onError: (err) => console.error(err.message),
});

Monnify (Nigeria)

import { openMonnifyModal } from '@reevit/vue';

await openMonnifyModal({
  apiKey: 'MK_TEST_xxx',
  contractCode: '1234567890',
  amount: 5000,
  currency: 'NGN',
  reference: 'TXN_12345',
  customerName: 'John Doe',
  customerEmail: 'john@example.com',
  onSuccess: (result) => console.log('Paid:', result.transactionReference),
  onClose: () => console.log('Closed'),
});

M-Pesa (Kenya/Tanzania)

M-Pesa uses STK Push: the customer approves a prompt on their phone. ReevitCheckout asks for the number, creates the payment with it (that is what sends the prompt), then waits. It checks the payment every 4 seconds and finishes only when the payment has succeeded or has failed, or after 2 minutes with no approval.

If you build your own screen, render MPesaBridge for a payment that already exists. It does not send the prompt, it only waits for the result.

<MPesaBridge
  :payment-id="intent.id"
  :client-secret="intent.clientSecret"
  phone-number="254712345678"
  can-retry
  @success="(result) => console.log('Paid', result.pspReference)"
  @error="(err) => console.error(err.code, err.message)"
  @retry="createAnotherPayment"
/>

Provider says paid, backend still pending

Popup providers can report success before Reevit's own confirmation lands. The checkout then shows "Confirming your payment" (no Try again, closing is allowed and does not cancel the payment) and keeps checking for up to 2 minutes. success is emitted only on succeeded. If it is still pending after 2 minutes the checkout shows "We're still confirming this payment" with Done, emits neither success nor error, and stateChange reports confirming then pending.

Supported PSPs

Release Notes

v0.9.0

• Updated @reevit/core dependency to v0.9.0
• Version alignment across all Reevit SDKs

License

MIT © Reevit