Next.js

ripperpay touches no browser global at module top level, so a server component may import it. Render <RipperCheckout/> from a client component:

'use client';
import { RipperCheckout } from 'ripperpay/react';

export default function Pay() {
  return <RipperCheckout publishableKey="rip_pk_EXAMPLE-KEY_00000000abcZ" amount={4200} currency="GBP" onSuccess={() => {}} onError={() => {}} />;
}

The runtime streams from https://js.ripper.dev — it is never in your bundle; the package contributes the loader and the wrapper only. Unused exports (formatAmount) are tree-shaken.

import { loadRipper } from 'ripperpay';
const ripper = await loadRipper({ key: 'rip_pk_EXAMPLE-KEY_00000000abcZ' });
const result = await ripper.collect({ amount: 4200, currency: 'GBP' });