> ## Documentation Index
> Fetch the complete documentation index at: https://docs.i-pay.money/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript SDK

> Open a hosted payment page from the web.

The iMoney Encaissement JavaScript SDK lets you add a payment button to your web application without building a full front-end integration.

## Prerequisites

Before you start, make sure you have:

* an active iMoney Encaissement merchant account;
* your merchant public key;
* a unique transaction reference for each payment;
* a redirect URL for after the payment;
* a callback URL to receive the payment status.

## Installing the SDK

Add the SDK script just before the closing `</body>` tag of your page.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<script src="https://i-pay.money/checkout.js"></script>
```

## Adding the payment button

Place the payment button where you want it on your page, then fill in the attributes with your transaction values.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<button
  type="button"
  class="ipaymoney-button"
  data-amount="100"
  data-environement="live"
  data-key="YOUR_PUBLIC_KEY"
  data-transaction-id="REF-TRANSACTION-001"
  data-redirect-url="https://your-site.com/payment/success?source=ipaymoney"
  data-callback-url="https://your-site.com/api/callback"
>
  Pay now
</button>
```

## Available attributes

| Attribute | Type | Required | Description |
| - | - | - | - |
| `data-amount` | string | Yes | Amount to pay. Example: `100`. |
| `data-environement` | string | Yes | Environment of the merchant account. Example: `live`. |
| `data-key` | string | Yes | iMoney Encaissement merchant public key. |
| `data-transaction-id` | string | Yes | Unique transaction reference. |
| `data-redirect-url` | URL | Yes | URL the browser is redirected to after a success. Use a URL that already contains a first query parameter. |
| `data-callback-url` | URL | Yes | URL called with `POST` by the browser while the page stays open. This callback is not a server webhook. |

> **Warning:** use the `data-environement` attribute exactly as spelled above.

> **Warning:** the user must stay on the payment page until the operation is complete so that the callback can be processed correctly.

> **Warning:** never validate an order based only on the redirection or on `data-callback-url`. Check the reference on the server side with the API or an authenticated webhook — see [Webhooks](https://docs.i-pay.money/en/guides/webhooks.md).

The `<button>` block and the `<script>` block above can be combined as is in an existing page: the button where you want it to appear, the script before the closing `</body>` tag.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.