ZEUSxPay

Web Application Integration

Integrate ZEUSXPAY into your web application

Web Application Integration

This guide shows you how to integrate ZEUSXPAY into your web application using our JavaScript SDK or REST API.

Installation Methods

Choose the method that best fits your stack:

  1. JavaScript SDK (recommended for most web apps)
  2. REST API (for custom implementations)
  3. Payment Links (no code required)

Method 1: JavaScript SDK

Installation

Install via npm:

npm install @zeusxpay/js-sdk

Or include via CDN:

<script src="https://cdn.zeusxpay.io/v1/zeusxpay.js"></script>

Basic Usage

import ZeusXPay from '@zeusxpay/js-sdk';

// Initialize the SDK
const zeusxpay = new ZeusXPay('pk_test_YOUR_PUBLIC_KEY');

// Create a payment
async function createPayment() {
	try {
		const order = await zeusxpay.orders.create({
			amount: 99.99,
			currency: 'USD',
			crypto_currency: 'BTC',
			description: 'Premium Subscription',
			customer_email: 'customer@example.com'
		});

		// Redirect to payment page
		zeusxpay.redirectToCheckout(order.id);
	} catch (error) {
		console.error('Payment failed:', error);
	}
}

Embedded Checkout

Display the checkout directly on your page:

<div id="zeusxpay-checkout"></div>

<script>
	const zeusxpay = new ZeusXPay('pk_test_YOUR_PUBLIC_KEY');

	zeusxpay.checkout({
		containerId: 'zeusxpay-checkout',
		amount: 99.99,
		currency: 'USD',
		onSuccess: (order) => {
			console.log('Payment successful:', order);
			window.location.href = '/success';
		},
		onCancel: () => {
			console.log('Payment cancelled');
		}
	});
</script>

Styling Options

Customize the checkout appearance:

zeusxpay.checkout({
	containerId: 'zeusxpay-checkout',
	amount: 99.99,
	currency: 'USD',
	theme: {
		primaryColor: '#6366f1',
		borderRadius: '8px',
		fontFamily: 'Inter, sans-serif'
	}
});

Method 2: REST API Integration

Create Order

Make a server-side request to create an order:

// Backend (Node.js/Express example)
const express = require('express');
const axios = require('axios');

const app = express();

app.post('/create-payment', async (req, res) => {
	try {
		const response = await axios.post(
			'https://api.zeusxpay.io/v1/orders',
			{
				amount: req.body.amount,
				currency: 'USD',
				crypto_currency: 'BTC',
				description: req.body.description,
				customer_email: req.body.email,
				return_url: 'https://yoursite.com/success',
				cancel_url: 'https://yoursite.com/cancel'
			},
			{
				headers: {
					Authorization: `Bearer ${process.env.ZEUSXPAY_SECRET_KEY}`,
					'Content-Type': 'application/json'
				}
			}
		);

		res.json({ paymentUrl: response.data.payment_url });
	} catch (error) {
		res.status(500).json({ error: error.message });
	}
});

Frontend

// Frontend
async function startPayment() {
	const response = await fetch('/create-payment', {
		method: 'POST',
		headers: { 'Content-Type': 'application/json' },
		body: JSON.stringify({
			amount: 99.99,
			description: 'Premium Subscription',
			email: 'customer@example.com'
		})
	});

	const { paymentUrl } = await response.json();
	window.location.href = paymentUrl;
}

Create payment links without writing code:

  1. Go to your Dashboard
  2. Click Payment Links → Create Link
  3. Enter amount, description, and options
  4. Copy the generated link
  5. Share with customers via email, social media, etc.

Example link:

https://pay.zeusxpay.io/link/pyl_1234567890

Framework-Specific Examples

React

import { useState } from 'react';
import ZeusXPay from '@zeusxpay/js-sdk';

function CheckoutButton() {
	const [loading, setLoading] = useState(false);
	const zeusxpay = new ZeusXPay(process.env.REACT_APP_ZEUSXPAY_PUBLIC_KEY);

	const handleCheckout = async () => {
		setLoading(true);
		try {
			const order = await zeusxpay.orders.create({
				amount: 99.99,
				currency: 'USD',
				crypto_currency: 'BTC'
			});
			zeusxpay.redirectToCheckout(order.id);
		} catch (error) {
			console.error(error);
			setLoading(false);
		}
	};

	return (
		<button onClick={handleCheckout} disabled={loading}>
			{loading ? 'Processing...' : 'Pay with Crypto'}
		</button>
	);
}

Vue.js

<template>
	<button @click="handleCheckout" :disabled="loading">
		{{ loading ? 'Processing...' : 'Pay with Crypto' }}
	</button>
</template>

<script>
import ZeusXPay from '@zeusxpay/js-sdk';

export default {
	data() {
		return {
			loading: false,
			zeusxpay: new ZeusXPay(process.env.VUE_APP_ZEUSXPAY_PUBLIC_KEY)
		};
	},
	methods: {
		async handleCheckout() {
			this.loading = true;
			try {
				const order = await this.zeusxpay.orders.create({
					amount: 99.99,
					currency: 'USD',
					crypto_currency: 'BTC'
				});
				this.zeusxpay.redirectToCheckout(order.id);
			} catch (error) {
				console.error(error);
				this.loading = false;
			}
		}
	}
};
</script>

SvelteKit

<script lang="ts">
	import ZeusXPay from '@zeusxpay/js-sdk';
	import { PUBLIC_ZEUSXPAY_KEY } from '$env/static/public';

	let loading = $state(false);
	const zeusxpay = new ZeusXPay(PUBLIC_ZEUSXPAY_KEY);

	async function handleCheckout() {
		loading = true;
		try {
			const order = await zeusxpay.orders.create({
				amount: 99.99,
				currency: 'USD',
				crypto_currency: 'BTC'
			});
			zeusxpay.redirectToCheckout(order.id);
		} catch (error) {
			console.error(error);
			loading = false;
		}
	}
</script>

<button onclick={handleCheckout} disabled={loading}>
	{loading ? 'Processing...' : 'Pay with Crypto'}
</button>

Handling Callbacks

Success Page

Create a success page to handle completed payments:

// /success page
const urlParams = new URLSearchParams(window.location.search);
const orderId = urlParams.get('order_id');

if (orderId) {
	// Verify the payment on your backend
	fetch(`/api/verify-payment?order_id=${orderId}`)
		.then((response) => response.json())
		.then((data) => {
			if (data.status === 'completed') {
				// Show success message
				console.log('Payment confirmed!');
			}
		});
}

Set up webhooks for server-side payment confirmation:

app.post('/webhooks/zeusxpay', (req, res) => {
	const event = req.body;

	// Verify webhook signature
	const signature = req.headers['x-zeusxpay-signature'];
	if (!zeusxpay.webhooks.verify(event, signature)) {
		return res.status(401).send('Invalid signature');
	}

	if (event.type === 'order.completed') {
		// Payment successful - fulfill order
		fulfillOrder(event.data.id);
	}

	res.status(200).send('OK');
});

Learn more about webhooks.

Testing

Use test mode to try your integration:

  1. Use test API keys (start with pk_test_ or sk_test_)
  2. Use test cryptocurrencies
  3. Payments auto-complete after 1 minute

See our Testing Guide for more details.

Security Best Practices

  • ✅ Always create orders on your backend
  • ✅ Use public keys on the frontend
  • ✅ Verify payments via webhooks
  • ✅ Never trust client-side data
  • ❌ Never expose secret keys in frontend code

Next Steps

Need Help?