Connect an existing website to the Ondes PRO store

Browser or server: which store API should you use?

Display the catalogue and take payments from your site, step by step

This flavour works with any stack, since everything happens in the browser. Set your subdomain at the top of the page to adapt the addresses.

1. 1

   Declare your site’s origin

   In API & Developers → Allowed origins (or, under Configuration, the section on letting a website query this workspace), add your site’s exact address (https://www.atelier-lumen.com, no path). Without it the browser blocks your workspace’s responses and nothing renders — that is CORS doing its job, not an API outage. Only the workspace superuser can change this setting.

2. 2

   Connect your Stripe account

   Still in Configuration, click “Connect my Stripe account”. Payments land directly in your account through Stripe Connect. A subsidiary without its own account collects through the parent company’s.

3. 3

   Load the catalogue

   An anonymous call returns published products grouped by category. The response is cached on the Ondes PRO side, so calling it on every page view is fine.

   javascriptCopy

   const response = await fetch('https://your-workspace.ondes.pro/shop/api/products/');
   const catalogue = await response.json();
   // Render each product's name, price and image in your own templates.

4. 4

   Create the cart and add items

   A first GET /shop/api/cart/ with no parameter creates a cart and returns its cart_token: keep it in localStorage. Every add or quantity change goes through POST /shop/api/cart/update/?cart_token=….

   javascriptCopy

   await fetch('https://your-workspace.ondes.pro/shop/api/cart/update/?cart_token=' + cartToken, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ action: 'set', product_id: 12, quantity: 2 }),
   });

5. 5

   Prepare the payment

   POST /shop/api/payment-intent/ with the cart_token and customer details returns a client_secret. Ondes PRO recomputes the amount from the cart, so a price edited in the browser changes nothing. A cart mixing two companies’ products is rejected (400): one charge cannot be split across two accounts.

6. 6

   Confirm with Stripe.js

   Load Stripe.js with <script src="https://js.stripe.com/v3/"> and confirm the payment with the client_secret. Your account’s publishable key is read once server-side (see below); it is public by design and can sit in the page.

7. 7

   Receive the confirmation by webhook

   Register your server’s address in API & Developers, Test mode tab, webhooks section: the commande.payee event arrives there, signed with the Ondes-Signature header. Test and production endpoints are separate and each is switched on independently.

The browser-side checkout, end to end

A minimal example with Stripe’s Payment Element. The publishable key (pk_…) belongs to your connected account.

const stripe = Stripe('pk_live_…');

const response = await fetch('https://your-workspace.ondes.pro/shop/api/payment-intent/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    cart_token: cartToken,
    email: 'hello@maison-verdier.com',
    first_name: 'Claire',
    last_name: 'Verdier',
  }),
});
const { client_secret } = await response.json();

const elements = stripe.elements({ clientSecret: client_secret });
elements.create('payment').mount('#payment');

document.querySelector('#pay').addEventListener('click', async () => {
  await stripe.confirmPayment({
    elements,
    confirmParams: { return_url: 'https://www.atelier-lumen.com/thanks' },
  });
});

The amount never travels through the browser: Ondes PRO computes it from the cart.

Server-side flavour: create the order through the REST API

Create a test order from your server

curl -X POST https://your-workspace.ondes.pro/api/v1/test/shop/commandes/ \
  -H "Authorization: ApiKey opk_…" \
  -H "Idempotency-Key: cart-7f3c2a91" \
  -H "Content-Type: application/json" \
  -d '{
    "items": [{"product": 12, "quantity": 2}],
    "email": "hello@maison-verdier.com",
    "first_name": "Claire",
    "last_name": "Verdier",
    "return_url": "/thanks"
  }'

Drop /test for production. GET /api/v1/shop/commandes/configuration-paiement/ tells you which Stripe account applies and returns its publishable_key.

“Connect my site”: an agent that does the integration in your GitHub repository

With your coding assistant connected over MCP

If you write the integration yourself, connect your assistant to the workspace’s MCP server: it reads the exact resource sheet instead of guessing field names.

Going further

• StripeTake store payments into your own Stripe account, company by company.Read
• GitHubPublish a static site from a GitHub repository, or have the store built into your existing site.Read
• Online storeOrders, catalogue, promo codes and shipments handled by your assistant, in test mode by default.Read
• REST API v1Around 135 REST resources, scoped keys, an OpenAPI schema and signed webhooks.Read

Frequently asked questions

Read next

• Build an integrationScoped keys, signed webhooks, idempotency and test mode for a back office that never creates duplicates.Read
• Migrate to Ondes PROBring over catalogue, customers and billing records in verified batches, with AI doing the column mapping.Read
• Automate with AIReminders, reports and automations described in one sentence, always reviewed before anything runs.Read