BLAQPay

Web Application Integration

Integrate BLAQPAY into your web application

Web Application Integration

This guide shows you how to integrate BLAQPAY into your web application using our REST API.

Installation Methods

Choose the method that best fits your needs:

  1. REST API (server-side integration)
  2. Payment Links (no code required)

Method 1: REST API Integration

Server-Side Integration

Create transactions on your backend for security:

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

app.post('/create-payment', async (req, res) => {
	try {
		const response = await fetch('https://blaqpay.io/api/transactions/create', {
			method: 'POST',
			headers: {
				'Authorization': `Bearer ${process.env.BLAQPAY_API_KEY}`,
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({
				amount: req.body.amount,
				customer_email: req.body.email,
				order_description: req.body.description,
				success_url: 'https://yoursite.com/success',
				cancel_url: 'https://yoursite.com/cancel',
				metadata: {
					user_id: req.user.id
				}
			})
		});

		const data = await response.json();
		res.json({ paymentUrl: 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. Navigate to Invoices or Transactions
  3. Create a new invoice or transaction
  4. Copy the generated payment link
  5. Share with customers via email, social media, etc.

Example link:

https://blaqpay.io/pay/550e8400-e29b-41d4-a716-446655440000

Framework-Specific Examples

React

import { useState } from 'react';

function CheckoutButton() {
	const [loading, setLoading] = useState(false);

	const handleCheckout = async () => {
		setLoading(true);
		try {
			const response = await fetch('/api/create-payment', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					amount: 99.99,
					email: 'customer@example.com'
				})
			});

			const { paymentUrl } = await response.json();
			window.location.href = paymentUrl;
		} 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>
export default {
	data() {
		return {
			loading: false
		};
	},
	methods: {
		async handleCheckout() {
			this.loading = true;
			try {
				const response = await fetch('/api/create-payment', {
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({
						amount: 99.99,
						email: 'customer@example.com'
					})
				});

				const { paymentUrl } = await response.json();
				window.location.href = paymentUrl;
			} catch (error) {
				console.error(error);
				this.loading = false;
			}
		}
	}
};
</script>

SvelteKit

<script lang="ts">
	let loading = $state(false);

	async function handleCheckout() {
		loading = true;
		try {
			const response = await fetch('/api/create-payment', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					amount: 99.99,
					email: 'customer@example.com'
				})
			});

			const { paymentUrl } = await response.json();
			window.location.href = paymentUrl;
		} catch (error) {
			console.error(error);
			loading = false;
		}
	}
</script>

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

Next.js

// app/api/create-payment/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
	const body = await request.json();

	const response = await fetch('https://blaqpay.io/api/transactions/create', {
		method: 'POST',
		headers: {
			'Authorization': `Bearer ${process.env.BLAQPAY_API_KEY}`,
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({
			amount: body.amount,
			customer_email: body.email,
			order_description: body.description,
			success_url: `${process.env.NEXT_PUBLIC_APP_URL}/success`,
			cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/cancel`
		})
	});

	const data = await response.json();
	return NextResponse.json(data);
}

Handling Callbacks

Success Page

Create a success page to handle completed payments:

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

if (transactionId) {
	// Payment completed!
	// Webhook will notify your backend
	// Show success message to user
	console.log('Payment initiated!');
	// You can poll transaction status or wait for webhook
}

Set up webhooks for server-side payment confirmation:

const crypto = require('crypto');

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

	// Verify webhook signature
	const signature = req.headers['x-blaqpay-signature'];
	const expectedSignature = crypto
		.createHmac('sha256', process.env.WEBHOOK_SECRET)
		.update(JSON.stringify(event))
		.digest('hex');

	if (signature !== expectedSignature) {
		return res.status(401).send('Invalid signature');
	}

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

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

Learn more about webhooks.

Testing

Use test mode to try your integration:

  1. Use test API keys (start with sk_test_)
  2. Transactions will be marked as testing_mode: true
  3. Use testnet tokens (Sepolia, Mumbai, BSC Testnet)

See our Testing Guide for more details.

Security Best Practices

  • ✅ Always create transactions on your backend
  • ✅ Never expose secret API keys in frontend code
  • ✅ Verify payments via webhooks
  • ✅ Validate webhook signatures
  • ✅ Use HTTPS for all requests
  • ❌ Never trust client-side data
  • ❌ Never expose your API key in client-side code

Next Steps

Need Help?