---
updatedAt: 2026-06-30T10:09:31.000Z
agentTools:
projectIndex: https://developers.paygreen.fr/llms.txt
---
# Introduction
**PaygreenJS** is a JavaScript library powered by **Paygreen**, designed to integrate Paygreen's payment solutions into your web application โ securely and with minimal setup.
This guide walks you through installing, configuring and using PaygreenJS.
### **PCI Compliance**
PaygreenJS must be loaded directly from `pgjs.paygreen.fr`. The script and stylesheet cannot be bundled with your application.
***
## Core concepts
| Concept | What it is |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| ๐ณ **Payment Order** | A payment intent created from your backend. Contains amount, currency, customer data, current state and an object secret. |
| ๐ **Object Secret** | A **single-use** token generated server-side, returned once at Payment Order creation. Authorizes PaygreenJS to act on that specific Payment Order. |
| ๐ข **Public Key** | Public identifier of your merchant account. Safe to expose in frontend code. |
| ๐ **Secret Key** | Private key used by your backend to call the Paygreen API. **Never expose it in frontend code.** |
| ๐งพ **Payment Method** | The type of payment the buyer will use: `bank_card`, `amex`, `swile`, `conecs`, etc. [Full list โ](https://developers.paygreen.fr/docs/paygreenjs-payment-methods) |
| ๐ **Payment Flow** | The live state of a single payment attempt (`pending`, `success`, `failed`). Subscribe via `PAYMENT_FLOW_ONCHANGE`. [Events โ](https://developers.paygreen.fr/docs/paygreenjs-events) |
***
## Payment flow at a glance
***
## Two operating modes
| Mode | Use it for |
| ------------ | ----------------------------------------------------------------------------------------- |
| `payment` | Drive an existing Payment Order to authorization. Most common. |
| `instrument` | Save a card or wallet as a reusable instrument, with or without an initial authorization. |
[Full mode reference โ](https://developers.paygreen.fr/docs/paygreenjs-modes)
***
## Quickstart
### **Before you start, make sure you have:**
- A validated account at [app.paygreen.fr](https://app.paygreen.fr/).
- At least one enabled payment configuration.
- Your **public key** ([Keys Page](https://app.paygreen.fr/account/api-keys)).
- Create a PaymentOrder ([instructions here](https://developers.paygreen.fr/reference/post_create_payment_order)) to retrieve a **payment order ID** and an **object\_secret**
Copy-paste this single block into your page, then replace `publicKey`, `id` and `objectSecret` with the values from your paymentOrder.
```html index.html
MyShop - Payment