Skip to content

Checkout Integration

Embed Nivatio Checkout in your application for seamless payment experience.

Overview

Nivatio Checkout is a hosted payment page that handles: - Wallet connection (MetaMask, WalletConnect, etc.) - Token approval and payment execution - Transaction confirmation and status updates - Responsive design for mobile and desktop

Option 1: Redirect to Checkout

The simplest integration - redirect customers to Nivatio's hosted checkout.

Step 1: Create an Order

const response = await fetch('https://api.nivat.io/v1/orders', {
  method: 'POST',
  headers: {
    'x-api-key': 'nv_sk_live_...',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: 100000, // 100.000 NUSD (6 decimals)
    currency: 'NUSD',
    description: 'Premium Subscription',
    successUrl: 'https://yourapp.com/success',
    cancelUrl: 'https://yourapp.com/cancel'
  })
});

const order = await response.json();

Step 2: Redirect Customer

// Redirect to checkout
window.location.href = order.checkoutUrl;

// Or open in new tab
window.open(order.checkoutUrl, '_blank');

Checkout URL format: https://checkout.nivat.io/{orderId}

Step2: Redirect Customer

// Redirect to checkout
window.location.href = order.checkoutUrl;

// Or open in new tab
window.open(order.checkoutUrl, '_blank');

Step3: Handle Return

After payment, customer is redirected to successUrl or cancelUrl:

// success.html
const urlParams = new URLSearchParams(window.location.search);
const orderId = urlParams.get('orderId');

if (orderId) {
  // Verify payment status with your backend
  fetch(`/api/verify-payment?orderId=${orderId}`)
    .then(res => res.json())
    .then(data => {
      if (data.status === 'PAID') {
        showSuccessMessage();
      }
    });
}

Option 2: Embedded Checkout (JavaScript SDK)

Embed the checkout directly in your page using our JavaScript SDK.

Include the SDK

<script src="https://checkout.nivat.io/nivatio-checkout.js"></script>

Create Checkout Button

<button id="pay-button">Pay Now - $100.00</button>

<script>
document.getElementById('pay-button').addEventListener('click', async () => {
  // First, create order on your backend
  const response = await fetch('/api/create-order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      amount: 100000,
      currency: 'NUSD'
    })
  });

  const order = await response.json();

  // Open embedded checkout
  NivatioCheckout.open({
    orderId: order.id,
    checkoutUrl: order.checkoutUrl,
    onSuccess: (data) => {
      console.log('Payment successful!', data);
      window.location.href = '/success?orderId=' + order.id;
    },
    onCancel: () => {
      console.log('Payment cancelled');
      window.location.href = '/cancel';
    },
    onError: (error) => {
      console.error('Payment error:', error);
    }
  });
});
</script>

Option 3: React Component

Use our React component for seamless integration.

Installation

npm install @nivatio/checkout-react

Usage

import { NivatioProvider, CheckoutButton } from '@nivatio/checkout-react';

function App() {
  const handlePayment = async () => {
    // Create order via your backend
    const response = await fetch('/api/create-order', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        amount: 100000,
        currency: 'NUSD'
      })
    });

    return await response.json();
  };

  return (
    <NivatioProvider
      environment="production" // or "sandbox"
      theme="dark" // or "light", "auto"
    >
      <CheckoutButton
        onCreateOrder={handlePayment}
        onSuccess={(data) => console.log('Success!', data)}
        onCancel={() => console.log('Cancelled')}
        onError={(error) => console.error('Error', error)}
      >
        Pay Now
      </CheckoutButton>
    </NivatioProvider>
  );
}

Customization

Checkout Themes

Theme Description
light Light background, dark text
dark Dark background, light text
auto Follows system preference

Custom CSS (Advanced)

You can inject custom CSS to match your brand:

NivatioCheckout.open({
  orderId: order.id,
  customCSS: `
    .nivatio-checkout-header {
      background-color: #your-brand-color;
    }
  `,
  // ...
});

Testing

Sandbox Testing

  1. Use sandbox API key (nv_sk_test_)
  2. Test wallet: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
  3. Mint test NUSD from dashboard
  4. Simulate payments with internal key

Test Card Numbers

Since this is crypto payment, there are no card numbers. Instead: - Use the Anvil local node for testing - Mint NUSD tokens via dashboard faucet - Test with small amounts first

Mobile Considerations

The checkout is fully responsive and works on: - iOS Safari - Android Chrome - Mobile wallets (WalletConnect)

Mobile Optimization

  • Use Option 2 (Embedded) for better mobile UX
  • Test on actual devices
  • Ensure your success/cancel URLs work on mobile

Next Steps