🛍️ Live Demo Store

Experience the complete ProBuy checkout flow with our interactive demo. This demo demonstrates the proper architecture using @probuy/backend-sdk on your server.

🏗️ Demo Architecture

Frontend (Static)

HTML/JS merchant store

Backend (Node.js)

Secure API with SDK

ProBuy API

Payment processing

🔒 Security Notice

Important: This demo requires a backend server. The API token must NEVER be exposed in frontend code.

  • ✅ API token stored on backend server only
  • ✅ Frontend calls your backend API
  • ✅ Backend uses @probuy/backend-sdk to call ProBuy
  • ❌ Never put API token in browser JavaScript
👁️ View Frontend Demo⚙️ Setup Instructions

🚀 Quick Setup Guide

1

Install Backend SDK

# Create a new backend server
mkdir probuy-demo-backend
cd probuy-demo-backend
npm init -y


# Install dependencies
npm install @probuy/backend-sdk express cors dotenv
2

Create Backend Server

Create server.js:

import express from 'express';
import cors from 'cors';
import { ProBuyBackendSDK } from '@probuy/backend-sdk';


const app = express();
app.use(cors());
app.use(express.json());


// Initialize SDK
const probuy = new ProBuyBackendSDK({
  apiToken: process.env.PROBUY_API_TOKEN,
  environment: 'sandbox'
});


// Create checkout endpoint
app.post('/api/checkout/create', async (req, res) => {
  try {
    const session = await probuy.createCheckoutWithRedirectUrl(req.body);
    res.json({
      success: true,
      checkout_id: session.checkout_id,
      redirect_url: session.redirect_url
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      error: error.message
    });
  }
});


app.listen(3001, () => {
  console.log('Backend server running on http://localhost:3001');
});
3

Add Environment Variables

Create .env file:

# Get your API token from https://supplier.probuy.dev
PROBUY_API_TOKEN=your-api-token-here
PROBUY_ENVIRONMENT=sandbox
4

Update Frontend Demo

The frontend demo should call your backend server instead of ProBuy directly:

// Frontend code (runs in browser)
async function createCheckout(orderData) {
  // Call YOUR backend, not ProBuy
  const response = await fetch('http://localhost:3001/api/checkout/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(orderData)
  });


  const result = await response.json();


  if (result.success) {
    // Redirect to ProBuy checkout
    window.location.href = result.redirect_url;
  }
}
5

Run Both Servers

# Terminal 1: Run backend server
cd probuy-demo-backend
node server.js


# Terminal 2: Run frontend (if using local server)
cd integration-docs
npm run dev


# Open http://localhost:3000/store/index.html
🛒

Static Frontend

Pure HTML/JS that can be deployed anywhere. Calls your backend API for checkout.

🔐

Secure Backend

Node.js server with @probuy/backend-sdk. API token never exposed to users.

✅

Production Ready

This architecture is secure and ready for production deployment.

📝 Order Data Example

Here's the complete order data structure your backend needs to send:

const orderData = {
  order_reference_id: 'ref-' + Date.now(),
  order_number: 'ORD-' + Date.now(),
  currency: 'SAR',
  total_amount: 1500,
  shipping_amount: 50,
  tax_amount: 225,


  item: {
    name: 'iPhone 15 Pro',
    description: '256GB Space Black',
    type: 'Physical',
    reference_id: 'iphone-15-pro-256',
    sku: 'IPH15P256SB',
    quantity: 1,
    unit_price: 1225,
    tax_amount: 225,
    discount_amount: 0,
    total_amount: 1500
  },


  consumer: {
    email: '[email protected]',
    first_name: 'Ahmed',
    last_name: 'Ali',
    phone_number: '+966501234567'
  },


  country_code: 'SA',


  merchant_url: {
    success: 'http://localhost:3000/store/success.html',
    failure: 'http://localhost:3000/store/failure.html',
    cancel: 'http://localhost:3000/store/cancel.html'
  },


  billing_address: {
    city: 'Riyadh',
    country_code: 'SA',
    first_name: 'Ahmed',
    last_name: 'Ali',
    line1: '123 King Fahd Road',
    phone_number: '+966501234567',
    region: 'Riyadh'
  },


  shipping_address: {
    // Same as billing or different
  }
};

Ready to Integrate?

After testing the demo, you're ready to integrate ProBuy into your own website. Check out our comprehensive documentation:

📦 Backend SDK Docs💻 Code Examples🧪 Testing Guide