Works with any HTML, React, Vue, Angular, or framework
The simplest way to add RxCompliant. Just add the script tag and mark prescription products with data-requires-rx.
<!DOCTYPE html>
<html>
<head>
<title>CPAP Machine - Your Store</title>
</head>
<body>
<h1>CPAP Machine</h1>
<p>ResMed AirSense 11 AutoSet CPAP</p>
<p class="price">$899.00</p>
<!-- RxCompliant: Mark this product as requiring a prescription -->
<div data-requires-rx
data-product-id="cpap-001"
data-product-title="ResMed AirSense 11 CPAP"
data-platform="custom">
</div>
<button type="submit" class="add-to-cart">Add to Cart</button>
<!-- Load the RxCompliant widget (place before </body>) -->
<script src="https://rxcompliant.com/widget/rxcompliant.js"
data-api-key="YOUR_API_KEY"
data-color="#DC2626">
</script>
</body>
</html>For single-page apps, load the script dynamically and call window.RxCompliant.init() after navigation.
// React / Next.js integration
import { useEffect } from 'react';
function ProductPage({ product }) {
useEffect(() => {
// Load the RxCompliant widget script
if (!document.getElementById('rxc-script')) {
const script = document.createElement('script');
script.id = 'rxc-script';
script.src = 'https://rxcompliant.com/widget/rxcompliant.js';
script.setAttribute('data-api-key', 'YOUR_API_KEY');
document.body.appendChild(script);
} else {
// Re-initialize for SPA navigation
window.RxCompliant?.init();
}
}, [product.id]);
return (
<div>
<h1>{product.title}</h1>
<p>{product.price}</p>
{product.requiresPrescription && (
<div
data-requires-rx
data-product-id={product.id}
data-product-title={product.title}
data-platform="custom"
/>
)}
<button className="add-to-cart">Add to Cart</button>
</div>
);
}<!-- Vue.js integration -->
<template>
<div>
<h1>{{ product.title }}</h1>
<p>{{ product.price }}</p>
<div v-if="product.requiresPrescription"
data-requires-rx
:data-product-id="product.id"
:data-product-title="product.title"
data-platform="custom">
</div>
<button @click="addToCart">Add to Cart</button>
</div>
</template>
<script>
export default {
mounted() {
if (!document.getElementById('rxc-script')) {
const script = document.createElement('script');
script.id = 'rxc-script';
script.src = 'https://rxcompliant.com/widget/rxcompliant.js';
script.setAttribute('data-api-key', 'YOUR_API_KEY');
document.body.appendChild(script);
} else {
window.RxCompliant?.init();
}
}
}
</script>For maximum security, verify the prescription token on your server before processing orders:
// Server-side verification (Node.js example)
// Before processing an order, verify the prescription token
const express = require('express');
const app = express();
app.post('/checkout', async (req, res) => {
const { rxc_token, product_id } = req.body;
// Verify the prescription with RxCompliant API
const response = await fetch(
`https://rxcompliant.com/api/verify/${rxc_token}`,
{
headers: {
'Authorization': 'Bearer YOUR_API_KEY'
}
}
);
const result = await response.json();
if (!result.success || result.status === 'REJECTED') {
return res.status(400).json({
error: 'Valid prescription required for this product.'
});
}
// Proceed with order...
processOrder(req.body);
});Listen for widget events to customize your integration:
// Listen for RxCompliant events
document.addEventListener('rxc:uploaded', function(e) {
console.log('Prescription uploaded:', e.detail);
// e.detail = { token, status, confidence, npiVerified, productId }
});
document.addEventListener('rxc:approved', function(e) {
console.log('Prescription approved:', e.detail);
// Enable your custom add-to-cart button
document.querySelector('.add-to-cart').disabled = false;
});
document.addEventListener('rxc:rejected', function(e) {
console.log('Prescription rejected:', e.detail);
});