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 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 @blaqpay/js-sdk

Or include via CDN:

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

Basic Usage

import BlaqPay from '@blaqpay/js-sdk';

// Initialize the SDK
const blaqpay = new BlaqPay('pk_test_YOUR_PUBLIC_KEY');

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

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

Embedded Checkout

Display the checkout directly on your page:

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

<script>
	const blaqpay = new BlaqPay('pk_test_YOUR_PUBLIC_KEY');

	blaqpay.checkout({
		containerId: 'blaqpay-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:

blaqpay.checkout({
	containerId: 'blaqpay-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.blaqpay.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.BLAQPAY_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.blaqpay.io/link/pyl_1234567890

Framework-Specific Examples

React

import { useState } from 'react';
import BlaqPay from '@blaqpay/js-sdk';

function CheckoutButton() {
	const [loading, setLoading] = useState(false);
	const blaqpay = new BlaqPay(process.env.REACT_APP_BLAQPAY_PUBLIC_KEY);

	const handleCheckout = async () => {
		setLoading(true);
		try {
			const order = await blaqpay.orders.create({
				amount: 99.99,
				currency: 'USD',
				crypto_currency: 'BTC'
			});
			blaqpay.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 BlaqPay from '@blaqpay/js-sdk';

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

SvelteKit

<script lang="ts">
	import BlaqPay from '@blaqpay/js-sdk';
	import { PUBLIC_BLAQPAY_KEY } from '$env/static/public';

	let loading = $state(false);
	const blaqpay = new BlaqPay(PUBLIC_BLAQPAY_KEY);

	async function handleCheckout() {
		loading = true;
		try {
			const order = await blaqpay.orders.create({
				amount: 99.99,
				currency: 'USD',
				crypto_currency: 'BTC'
			});
			blaqpay.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/blaqpay', (req, res) => {
	const event = req.body;

	// Verify webhook signature
	const signature = req.headers['x-blaqpay-signature'];
	if (!blaqpay.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?