Skip to main content

​
Complete your first integration

This guide walks you through creating a payment session and redirecting customers to complete their payment.
What you’ll build: A simple payment integration using redirect mode.Time required: 10 minutes

​
Step 1: Set up your HTML

Create a basic HTML page with a payment button:
index.html
<!DOCTYPE html>
<html>
<head>
  <title>Payviox Payment</title>
</head>
<body>
  <h1>Complete your purchase</h1>
  <p>Total: $10.00</p>
  <button onclick="initiatePayment()">Pay Now</button>

  <script src="https://cdn.payviox.com/sdk/payviox.js"></script>
  <script src="payment.js"></script>
</body>
</html>

​
Step 2: Initialize the SDK

Create a payment.js file and initialize the Payviox SDK:
payment.js
// Initialize the SDK with your API token
const payviox = new Payviox('your_api_token');

async function initiatePayment() {
  try {
    // Payment session configuration
    const sessionId = await payviox.createSession({
      amount: 1000, // Amount in cents (10.00 USD)
      currency: 'USD',
      customer: 'customer_123456',
      description: 'Order #12345',
      paymentMethodId: 'pm_card',
      order_id: 'order_12345',
      items: [
        {
          name: 'Premium Subscription',
          quantity: 1,
          price: 1000
        }
      ]
    }, {
      redirect: true // Automatic redirect to payment page
    });
    
    console.log('Payment session created:', sessionId);
  } catch (error) {
    console.error('Payment error:', error);
    alert('Payment initialization failed. Please try again.');
  }
}
When you click the “Pay Now” button, you’ll be redirected to the secure Payviox payment page.

​
Step 3: Handle payment completion

After the customer completes payment, they’ll be redirected back to your site. Set up a success page:
success.js
// Extract session ID from URL
const urlParams = new URLSearchParams(window.location.search);
const sessionId = urlParams.get('session_id');

if (sessionId) {
  console.log('Payment completed for session:', sessionId);
  
  // Send confirmation to your server
  fetch('/api/payment-confirmation', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ sessionId })
  });
}

​
Complete example

Here’s the full working example:
payment.js
const payviox = new Payviox('your_api_token');

async function initiatePayment() {
  try {
    await payviox.createSession({
      amount: 1000,
      currency: 'USD',
      customer: 'customer_' + Date.now(),
      description: 'Premium Subscription',
      paymentMethodId: 'pm_card',
      order_id: 'order_' + Date.now(),
      items: [
        {
          name: 'Premium Subscription',
          quantity: 1,
          price: 1000
        }
      ]
    }, {
      redirect: true
    });
  } catch (error) {
    console.error('Payment error:', error);
    alert('Payment failed: ' + error.message);
  }
}

​
Testing your integration

1

Use test credentials

Use your test API token to avoid real charges:
const payviox = new Payviox('pk_test_xxxxxxxxxxxxx');
2

Test card numbers

Use these test card numbers in the payment form:
Card NumberResult
4242 4242 4242 4242Success
4000 0000 0000 0002Card declined
4000 0000 0000 0341Insufficient funds
3

Monitor in dashboard

View test transactions in your Payviox dashboard.

​
Common issues

Cause: Invalid or missing API token.Solution: Verify your API token in the dashboard and ensure it’s correctly copied.
// Verify that the token is correct
const payviox = new Payviox('your_actual_token');
Cause: Browser blocking the redirect or popup blockers.Solution: Ensure the payment is triggered by a user action (button click) and disable popup blockers.
Cause: Domain not whitelisted in Payviox settings.Solution: Add your domain to the allowed origins in your dashboard settings.

​
Next steps

Iframe integration

Embed payments directly in your page

Payment methods

Discover and filter payment options

Error handling

Handle errors gracefully

API reference

Explore all available methods