---
id: guides/nextjs
title: Next.js
summary: A server component may import ripperpay; the checkout renders in a client component.
faces: ["public", "agent"]
personalises: ["publishable_key"]
section: front-end
group: Accept a payment
slug: nextjs
order: 23
---
# Next.js

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

```tsx
'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.

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