@bank78/vue

Drop-in payment checkout for Vue 3 — card, bank transfer, and Pay with Bank78 — with end-to-end encrypted payloads, built-in 3DS/redirect handling, and a themeable UI.

Thin Vue wrappers around the same battle-tested checkout that powers @bank78/checkout.

npm install @bank78/vue vue

Quick start

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

function onSuccess(result: unknown) {
  console.log('paid', result);
}
</script>

<template>
  <PaymentLinkCheckout
    api-base-url="https://checkout.bank78.co"
    :api-key="apiKey"
    :linkref="linkref"
    @success="onSuccess"
    @cancel="() => console.log('cancelled')"
    @error="(e) => console.error(e)"
  />
</template>

That's the whole payment-link flow — card / bank-transfer / Pay-with-Bank78, 3DS redirects and app hand-offs included.

Hosted checkout session

When your backend pre-creates a session, render it by reference:

<HostedSessionCheckout
  api-base-url="https://checkout.bank78.co"
  :api-key="apiKey"
  session-reference="chk-..."
  @success="onSuccess"
/>

Create the session on your server — never expose secret keys in the browser.

Props

Both components share:

| Prop | Type | Description | | --- | --- | --- | | apiBaseUrl | string (required) | Checkout API base URL | | apiKey | string? | Your API key — sent as X-Api-Key | | publicKey | string? | Optional publishable key (pk_…) | | inline | boolean (default true) | Render inline vs. full-screen |

Plus one identifier each:

| Component | Prop | | --- | --- | | PaymentLinkCheckout | linkref | | HostedSessionCheckout | sessionReference |

Events

| Event | Payload | | --- | --- | | success | the charge result | | cancel | — | | error | the error |

Notes

• Vue >= 3 is a peer dependency.
• The checkout UI itself is React-based and fully bundled inside this package — your Vue app doesn't need React installed or configured.
• Publishable keys only in client code — never a secret key.

License

MIT