@pabgw/vue

@pabgw/vue

Vue 3 component and composable for embedding PAB Gateway payment forms into your application.

Installation

npm install @pabgw/vue

Requirements

• Vue 3.0+

Quick Start

<template>
  <PabPayment
    :session="sessionToken"
    @success="onSuccess"
    @error="onError"
    @expired="onExpired"
  />
</template>

<script setup>
import { PabPayment } from '@pabgw/vue';

const props = defineProps({ sessionToken: String });

function onSuccess(data) {
  console.log('Payment successful', data.transactionId);
}

function onError(data) {
  console.error('Payment failed', data.message);
}

function onExpired() {
  console.warn('Session expired');
}
</script>

Usage Modes

The component supports two modes:

Payment Link (token)

Use a pre-generated payment link token:

<PabPayment token="pl_abc123" @success="onSuccess" />

Checkout API (session)

Create a Checkout Session from your backend and pass the resulting session identifier to the session prop.

<PabPayment :session="sessionSecret" @success="onSuccess" />

Use token OR session, not both.

Create a session (api/v2/sessions)

POST https://gateway.pabgw.com/api/v2/sessions
x-api-key: <partner-api-key>
x-merchant-key: <merchant-key>
Content-Type: application/json

{
  "mode": "payment",        // or "setup"
  "amount": 100.00,
  "reference": "INV-001",
  "payerEmail": "buyer@example.com"
}

Response (201 Created):

{
  "result": {
    "sessionId": "…",
    "sessionToken": "Xk3r…",
    "checkoutUrl": "https://quick2pay.pabgw.com/s/Xk3r…",
    "expiresAt": "…",
    "status": 0
  },
  "success": true,
  "statusCode": 201,
  "errors": []
}

The session lives under result; errors arrive as errors: [{ "code", "message" }]. status is numeric (0 = pending).

Pass result.sessionToken to the session prop:

<PabPayment :session="response.result.sessionToken" />

Setup mode (save a payment method without charging)

Omit amount and set mode: "setup". Supply payorCompanyId to attach the saved method to an existing customer.

{ "mode": "setup", "payorCompanyId": "<customer-guid>" }

Component Props

Events

Composable (Programmatic)

For more control, use the usePabPayment composable:

<template>
  <div ref="containerRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { usePabPayment } from '@pabgw/vue';

const containerRef = ref(null);
const { mount, destroy } = usePabPayment();

onMounted(async () => {
  const pab = await mount({
    session: 'YOUR_SESSION_TOKEN',
    container: containerRef.value,
  });

  pab.on('success', (data) => console.log('Paid!', data));
  pab.mount();
});
</script>

Content Security Policy (CSP)

If your site uses a Content Security Policy header, add the directives for whichever environment you use:

# production (default)
frame-src https://pay.pabgw.com; script-src https://cdn.pabgw.com;

# sandbox
frame-src https://pay.dev-pabgw.com; script-src https://cdn.dev-pabgw.com;

With environment="sandbox" the component loads from the sandbox hosts instead, so add them while testing:

frame-src https://pay.dev-pabgw.com; script-src https://cdn.dev-pabgw.com;

Changelog

1.1.0

• PabPayment is now part of the package (1.0.0 shipped without it, so importing the package failed).
• Loads the SDK from cdn.pabgw.com.
• New environment prop (production / sandbox).

License

MIT