Skip to main content

Frontend SDK

aruvi-arc lets any website accept USDC payments on Arc - vanilla JS or React.

npm install aruvi-arc

Vanilla JavaScript​

<script src="https://cdn.jsdelivr.net/npm/aruvi-arc@latest/dist/aruvi-arc.min.js"></script>
<script>
  Aruvi.init({
    merchantAddress: '0xYourWallet',
    environment: 'testnet',            // Arc Testnet
    gatewayAddress: '0xGateway',       // your deployed gateway
  });

  Aruvi.button('#pay-button', {
    amount: '25.00',
    description: 'Premium Plan',
    reference: 'order-1042',
    onSuccess: (result) => console.log('Paid!', result.paymentId),
    onError: (error) => console.error(error.message),
    onCancel: () => console.log('Customer closed checkout'),
  });
</script>

React​

import { AruviProvider, AruviButton } from 'aruvi-arc/react';
import 'aruvi-arc/styles.css';

function App() {
  return (
    <AruviProvider
      config={{
        merchantAddress: '0xYourWallet',
        environment: 'testnet',
      }}
    >
      <AruviButton
        payment={{
          amount: '25.00',
          description: 'Premium Plan',
        }}
        onSuccess={(result) => {
          console.log('Payment ID:', result.paymentId);
        }}
      />
    </AruviProvider>
  );
}

Checkout modes​

  • modal (default) - checkout opens in an iframe overlay on your page; results arrive via callbacks
  • redirect - browser navigates to the hosted checkout; on success it returns to your successUrl with paymentId, txHash, and status=success appended
aruvi.checkout({
  amount: '99.00',
  mode: 'redirect',
  successUrl: 'https://yourshop.com/thanks',
  cancelUrl: 'https://yourshop.com/cart',
});
const url = aruvi.createPaymentLink({ amount: '10.00', description: 'Coffee ☕' });
// → https://aruvi-on-arc.vercel.app/checkout?merchant=0x…&amount=10.00&desc=Coffee+%E2%98%95

Theming​

Aruvi.init({
  merchantAddress: '0x…',
  theme: {
    primaryColor: '#0070BA',
    borderRadius: 12,
    fontFamily: 'Inter, sans-serif',
  },
});

Never trust the browser callback alone for order fulfilment - verify server-side: Integration guide.