@qredex/vue

@qredex/vue

Thin Vue bindings for @qredex/agent.

Install

npm install @qredex/vue

Attribution Flow

Call useQredexAgent(), then forward merchant cart state with agent.handleCartChange(...), read the PIT with agent.getPurchaseIntentToken(), and clear attribution with agent.handleCartEmpty(). Only call agent.handlePaymentSuccess() if your platform has no cart-empty step after checkout.

Merchant Integration Checklist

• Register the plugin once in the browser app
• Report every real merchant cart transition with agent.handleCartChange(...)
• Read PIT during checkout or order assembly
• Send order + PIT to your backend or direct ingestion path
• Clear attribution with agent.handleCartEmpty() or agent.handlePaymentSuccess()

Recommended Integration

Register the plugin once, then use useQredexAgent() inside the cart surface you already control. The merchant still owns cart APIs, totals, checkout, and order submission. Qredex only needs the cart transition so the core runtime can lock IIT to PIT. After lock, the merchant reads that PIT and carries it with the normal order payload to the merchant backend or direct Qredex ingestion path.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createQredexPlugin } from '@qredex/vue';

const app = createApp(App);
app.use(createQredexPlugin());
app.mount('#app');

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useQredexAgent } from '@qredex/vue';

const { agent, state } = useQredexAgent();
const itemCount = ref(0);
const previousCount = ref(0);

watch(itemCount, (nextCount) => {
  // [Qredex] Report the cart transition after your merchant cart changes.
  agent.handleCartChange({
    itemCount: nextCount,
    previousCount: previousCount.value,
  });

  // [Merchant] Keep your local snapshot ready for the next transition.
  previousCount.value = nextCount;
}, { immediate: true });

async function clearCart() {
  // [Merchant] Clear the real cart in your own backend/storefront first.
  await fetch('/api/cart/clear', {
    method: 'POST',
  });

  // [Qredex] Clear attribution because the merchant cart is now empty.
  agent.handleCartEmpty();
}

async function submitOrder() {
  // [Qredex] Read PIT from wrapper state, with the core runtime as fallback.
  const pit = state.value.pit ?? agent.getPurchaseIntentToken();

  // [Merchant] Send the PIT as part of your normal order payload so the
  // backend can carry order + PIT into attribution ingestion.
  await fetch('/api/orders', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      orderId: 'order-123',
      qredex_pit: pit,
    }),
  });

  // [Merchant + Qredex] Reuse the same clear path after checkout succeeds.
  await clearCart();
}
</script>

<template>
  <div>
    <span>Qredex status: {{ state.locked ? 'locked' : 'waiting' }}</span>
    <button @click="clearCart">Clear cart</button>
    <button :disabled="!state.hasPIT" @click="submitOrder">
      Send PIT to backend
    </button>
  </div>
</template>

What To Call When

API Surface