Skip to main content

Complete Implementation Example

<!DOCTYPE html>
<html>
<head>
    <script 
        src="https://test.hosted.revuppayments.com/payments-widget/sdk/1/0/loader.js"
        crossorigin="anonymous">
    </script>
    <style>
        #revup-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <div id="revup-container"></div>
    <script>
    window.addEventListener('onRevupSDKLoaded', async () => {
        try {
            // Create order (call your backend)
            const orderId = await createOrder();
            // Configure Revup
            const revup = new Revup({
                apiKey: 'your-sandbox-api-key',
                merchantDomain: window.location.origin,
                orderId: orderId
            });
            // Set up event handler
            revup.onRevupMessage((event) => {
                const { type, source, context, error } = event.detail;
                switch(type) {
                    case 'payment.authorized':
                        alert(`Payment successful! Transaction: ${context.transactionId}`);
                        window.location.href = `/success?transaction=${context.transactionId}`;
                        break;
                    case 'payment.failed':
                        alert(`Payment failed: ${error?.message}`);
                        break;
                    case 'payment.cancelled':
                        console.log('User cancelled payment');
                        break;
                }
            });
            // Initialize the SDK
            await revup.init({
                containerId: 'revup-container',
                form: {
                    collapsed: false,
                    showZipCode: true
                },
                apms: {
                    enabled: ['apple_pay', 'google_pay', 'paypal', 'stripe_link']
                },
                language: 'en_EN'
            });
        } catch (error) {
            console.error('Initialization error:', error);
        }
    });
    async function createOrder() {
        const response = await fetch('/api/create-order', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                amount: 99.99,
                currency: 'EUR'
            })
        });
        const data = await response.json();
        return data.orderId;
    }
    </script>
</body>
</html>