---
id: guides/vanilla
title: Vanilla JavaScript
summary: The script tag, the queue, and the members of ripper.
faces: ["public", "agent"]
personalises: ["publishable_key"]
section: front-end
group: Accept a payment
slug: script-tag
order: 21
---
# Vanilla JavaScript

The tag installs `window.ripper` synchronously. `collect` and `track` return Promises; `init` and
`setEmail` return nothing; `getTraceId` and `getDeviceId` answer synchronously from the first line,
before the runtime has loaded.

```html run id=vanilla-tag
<script src="https://js.ripper.dev/r.js" data-key="rip_pk_EXAMPLE-KEY_00000000abcZ" data-integration="default"></script>
<div data-ripper-checkout></div>
<script>
  ripper.collect({ amount: 4200, currency: 'GBP' }).then(function (result) { console.log(result.status); });
</script>
```

```js run id=vanilla-track
await ripper.track('page', { type: 'checkout' }); // recorded locally; does nothing else yet
const result = await ripper.collect({ amount: 4200, currency: 'GBP' });
```

```js run id=vanilla-ids
const traceId = ripper.getTraceId();     // 'rip_sess_…' per page load
const deviceId = ripper.getDeviceId();   // null until the integration enables signals capture
const result = await ripper.collect({ amount: 4200, currency: 'GBP' });
```

Formatting an amount the way the checkout does:

```js run id=vanilla-format
import { formatAmount } from 'ripperpay';
console.log(formatAmount(4200, 'GBP')); // '£42.00'
```