Skip to content

CLAUDE.md

Latest commit

 

History

History
56 lines (42 loc) · 1.64 KB

CLAUDE.md

File metadata and controls

56 lines (42 loc) · 1.64 KB
Raw

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

XPayLabs e-commerce demo app, Vue 3 + Vue Router + Vite 4. Demonstrates full e-commerce flow: product browsing → cart → crypto checkout → QR code payment → status polling.

Commands

npm install
npm run dev       # Dev server (localhost:3000)
npm run build     # Production build
npm run preview   # Preview production build

Architecture

Page Structure

src/views/
├── Home.vue              # Home / product listing
├── Cart.vue              # Shopping cart
├── Checkout.vue          # Checkout page
├── PaymentDemo.vue       # Payment demo
├── PaymentSuccess.vue    # Payment success
└── Products.vue          # Product details

src/components/
├── PaymentQRCode.vue     # QR code payment display
├── WebhookHandler.vue    # Webhook verification demo
└── Toast.vue             # Toast notifications

src/services/
├── XPayService.js        # @xpaylabs/node-sdk wrapper
└── ToastService.js       # Toast service

Payment Flow

  1. User selects products → adds to cart → proceeds to checkout
  2. XPayService creates a collection order → displays QR code
  3. Polls order status every 3 seconds
  4. Payment confirmed → redirects to success page

Environment Variables

Configure XPayLabs API credentials in .env:

  • VITE_XPAY_API_KEY
  • VITE_XPAY_API_SECRET
  • VITE_XPAY_BASE_URL

Notes

  • Depends on vite-plugin-node-polyfills for Node.js browser polyfills
  • Uses @xpaylabs/node-sdk (local npm package or npm registry)