Aller au contenu principal

Générer un reçu PDF après la commande

Dans cet exemple, nous passons une commande, la lisons avec toutes les données de tarification et assemblons un reçu imprimable qui peut être rendu en tant que PDF sur le client.

✅ Objectif du scénario :

  • Passer une commande et la lire avec Orders.getOrderByMarkerAndId()
  • Assembler un reçu à partir des produits de la commande, des totaux et du mode de paiement
  • Rendre le reçu en tant que PDF téléchargeable sur le client

✅ Ce dont vous avez besoin :

  • Un PROJECT_URL et un APP_TOKEN valides pour l'authentification avec l'API OneEntry.
  • Utilisateur enregistré
  • Stockage de commandes configuré avec le marqueur "orders"

📌 Important :

  • Le rendu PDF ne fait pas partie du SDK OneEntry — utilisez n'importe quelle bibliothèque côté client (jsPDF est montré ici). Le SDK fournit uniquement les données de commande.
  • totalSum revient sous forme de chaîne et la devise est souvent vide — formatez avec Number(totalSum).toFixed(2) et ne codez jamais en dur un symbole de devise.
  • Ces exemples n'incluent pas la gestion des erreurs.
  • Vous pouvez gérer les erreurs en utilisant un bloc try-catch ou en employant une construction comme await Promise.catch((error) => error).

📚 Voir dans la documentation :

📦 Référence SDK :

Essayez-le en direct​

Exécutez cette méthode de manière interactive dans le bac à sable JS SDK — connectez votre Project URL et App Token lors de votre première visite, puis ouvrez :

  • Générer un reçu PDF après la commande — Dans cet exemple, nous passons une commande, la lisons avec toutes les données de tarification et assemblons un reçu imprimable qui peut être rendu en tant que PDF sur le client.

Scénario​

1. Importer defineOneEntry depuis le SDK et définir PROJECT_URL et APP_TOKEN​

Exemple :

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Créer un client API avec defineOneEntry()​

Exemple :

const { AuthProvider, Orders } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Autorisation de l'utilisateur avec AuthProvider.auth()​

Exemple :

const authData = [
  { marker: 'email_reg', value: 'your-email' },
  { marker: 'password_reg', value: 'your-password' },
];
const user = await AuthProvider.auth('email', { authData });
console.log(user);
Résultat :
{
  "userIdentifier": "kvasssukr.net@gmail.com",
  "authProviderIdentifier": "email",
  "accessToken": "eyJhbGciOiJIUzI1NiIsInR...pZCI6MTYsImF1dGhQ"
  "refreshToken": "1745494429101-...-2834edf8"
}

4. Passer la commande avec Orders.createOrder()​

Données :

{
  "formIdentifier": "order",
  "paymentAccountIdentifier": "cash",
  "formData": {
    "en_US": [
      {
        "type": "string",
        "marker": "name",
        "value": "Christina Thomas"
      }
    ]
  },
  "products": [
    {
      "productId": 15,
      "quantity": 1
    }
  ]
}

Exemple :

const body = {
  formIdentifier: 'order',
  paymentAccountIdentifier: 'cash',
  formData: [{ type: 'string', marker: 'name', value: 'Christina Thomas' }],
  products: [{ productId: 15, quantity: 1 }],
};
const created = await Orders.createOrder('orders', body as any);

if ('statusCode' in created) {
  throw new Error(created.message);
}
Résultat :
{
  "id": 127,
  "formIdentifier": "order",
  "paymentAccountIdentifier": "cash",
  "formData": [
    {
      "type": "string",
      "marker": "name",
      "value": "Christina Thomas"
    }
  ],
  "products": [
    {
      "productId": 15,
      "quantity": 1
    }
  ],
  "currency": "USD",
  "totalSum": 400,
  "bonusApplied": 0,
  "totalDue": 400,
  "discountConfig": {
    "orderDiscounts": [],
    "productDiscounts": [],
    "coupon": null,
    "settings": {
      "allowStacking": false,
      "maxDiscountValue": null,
      "allowGiftStacking": false,
      "maxBonusPaymentPercent": null,
      "minBonusAmount": null,
      "minOrderAmountForBonus": null,
      "giftRefundPolicy": "KEEP_GIFT"
    },
    "additionalDiscountsMarkers": [],
    "totalRaw": 400,
    "totalSumWithDiscount": 400,
    "excludedGiftProductIds": [],
    "bonus": {
      "availableBalance": 0,
      "maxBonusDiscount": 0,
      "minBonusAmount": null,
      "minOrderAmountForBonus": null,
      "bonusApplied": 0
    },
    "bonusApplied": 0,
    "totalDue": 400
  },
  "statusIdentifier": "upcoming",
  "statusLocalizeInfos": {
    "title": "Upcoming"
  },
  "createdDate": "2026-06-06T12:04:52.459Z"
}

5. Lire la commande passée avec Orders.getOrderByMarkerAndId()​

Exemple :

// This returns the full order: products with titles/prices, totalSum, currency,
// payment method and status — everything the receipt needs.
const order = await Orders.getOrderByMarkerAndId('orders', created.id);

if ('statusCode' in order) {
  throw new Error(order.message);
}
Résultat :
{
  "id": 127,
  "storageId": 1,
  "createdDate": "2026-06-06T12:04:52.459Z",
  "statusIdentifier": "upcoming",
  "statusLocalizeInfos": {
    "title": "Upcoming"
  },
  "formIdentifier": "order",
  "formData": [
    {
      "type": "string",
      "marker": "name",
      "value": "Christina Thomas"
    }
  ],
  "attributeSetIdentifier": "order",
  "paymentStrategy": "once",
  "totalSum": "400",
  "totalSumRaw": "400",
  "currency": "USD",
  "paymentAccountIdentifier": "cash",
  "paymentAccountLocalizeInfos": {
    "title": "Cash"
  },
  "products": [
    {
      "id": 15,
      "title": "Orange ball",
      "sku": null,
      "previewImage": "[]",
      "price": 400,
      "quantity": 1,
      "isGift": false
    }
  ],
  "paymentUrl": null,
  "discountConfig": {
    "orderDiscounts": [],
    "productDiscounts": [],
    "coupon": null,
    "settings": {
      "allowStacking": false,
      "maxDiscountValue": null,
      "allowGiftStacking": false,
      "maxBonusPaymentPercent": null,
      "minBonusAmount": null,
      "minOrderAmountForBonus": null,
      "giftRefundPolicy": "KEEP_GIFT"
    },
    "additionalDiscountsMarkers": [],
    "totalRaw": 400,
    "totalSumWithDiscount": 400,
    "excludedGiftProductIds": [],
    "bonus": {
      "availableBalance": 0,
      "maxBonusDiscount": 0,
      "minBonusAmount": null,
      "minOrderAmountForBonus": null,
      "bonusApplied": 0
    },
    "bonusApplied": 0,
    "totalDue": 400
  },
  "isPartial": false,
  "isCompleted": null,
  "split": {
    "completed": false,
    "partial": false,
    "stages": [
      {
        "marker": "default",
        "sessionId": null,
        "productId": 15,
        "title": "Default",
        "value": 400,
        "status": "planned"
      }
    ]
  }
}

6. Assembler le reçu à partir des données de la commande​

Exemple :

// currency is frequently an empty string — fall back to '' instead of hardcoding '$'.
const currency = order.currency || '';
// Order status is only a marker; its title is project-specific. Prefer the
// localized title from the API, then a client map, then the raw marker.
const STATUS_LABELS: Record<string, string> = {
  inProgress: 'In progress',
  completed: 'Completed',
};
const receipt = {
  orderId: order.id,
  // createdDate is an ISO string returned by the API.
  date: new Date(order.createdDate).toLocaleString(),
  status:
    order.statusLocalizeInfos?.title ??
    STATUS_LABELS[order.statusIdentifier ?? ''] ??
    order.statusIdentifier,
  // paymentAccountLocalizeInfos.title is the human label; fall back to the marker.
  payment: order.paymentAccountLocalizeInfos?.title || order.paymentAccountIdentifier,
  items: order.products.map((p) => ({
    title: p.title,
    quantity: p.quantity,
    price: `${currency}${p.price.toFixed(2)}`,
    lineTotal: `${currency}${(p.price * p.quantity).toFixed(2)}`,
  })),
  // totalSum is a string ("300.00") — convert before formatting.
  total: `${currency}${Number(order.totalSum).toFixed(2)}`,
};
console.log(receipt);
Résultat :
{
  "orderId": 127,
  "date": "06.06.2026, 15:04:52",
  "status": "Upcoming",
  "payment": "Cash",
  "items": [
    {
      "title": "Orange ball",
      "quantity": 1,
      "price": "USD400.00",
      "lineTotal": "USD400.00"
    }
  ],
  "total": "USD400.00"
}

7. Rendre le reçu en tant que PDF sur le client (par exemple avec jsPDF)​

Exemple :

/*
  import { jsPDF } from 'jspdf';

  const doc = new jsPDF();

  doc.setFontSize(16);
  doc.text(`Receipt #${receipt.orderId}`, 14, 20);

  doc.setFontSize(11);
  doc.text(`Date: ${receipt.date}`, 14, 30);
  doc.text(`Status: ${receipt.status}`, 14, 37);
  doc.text(`Payment: ${receipt.payment}`, 14, 44);

  let y = 58;
  receipt.items.forEach((item) => {
    doc.text(`${item.quantity} × ${item.title}`, 14, y);
    doc.text(item.lineTotal, 196, y, { align: 'right' });
    y += 7;
  });

  doc.setFontSize(13);
  doc.text(`Total: ${receipt.total}`, 196, y + 8, { align: 'right' });

  doc.save(`receipt-${receipt.orderId}.pdf`);
*/

Exemple final​

// 1. Import defineOneEntry from SDK and define PROJECT_URL and APP_TOKEN
import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Creating an API client with [defineOneEntry()](/docs/index/#Installation)
const { AuthProvider, Orders } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. User authorization with [AuthProvider.auth()](/docs/auth-provider/auth)
const authData = [
  { marker: 'email_reg', value: 'your-email' },
  { marker: 'password_reg', value: 'your-password' },
];
const user = await AuthProvider.auth('email', { authData });
console.log(user);

// 4. Place the order with [Orders.createOrder()](/docs/orders/createOrder)
const body = {
  formIdentifier: 'order',
  paymentAccountIdentifier: 'cash',
  formData: [{ type: 'string', marker: 'name', value: 'Christina Thomas' }],
  products: [{ productId: 15, quantity: 1 }],
};
const created = await Orders.createOrder('orders', body as any);

if ('statusCode' in created) {
  throw new Error(created.message);
}

// 5. Read the placed order back with [Orders.getOrderByMarkerAndId()](/docs/orders/getOrderByMarkerAndId)
// This returns the full order: products with titles/prices, totalSum, currency,
// payment method and status — everything the receipt needs.
const order = await Orders.getOrderByMarkerAndId('orders', created.id);

if ('statusCode' in order) {
  throw new Error(order.message);
}

// 6. Assemble the receipt from the order data
// currency is frequently an empty string — fall back to '' instead of hardcoding '$'.
const currency = order.currency || '';
// Order status is only a marker; its title is project-specific. Prefer the
// localized title from the API, then a client map, then the raw marker.
const STATUS_LABELS: Record<string, string> = {
  inProgress: 'In progress',
  completed: 'Completed',
};
const receipt = {
  orderId: order.id,
  // createdDate is an ISO string returned by the API.
  date: new Date(order.createdDate).toLocaleString(),
  status:
    order.statusLocalizeInfos?.title ??
    STATUS_LABELS[order.statusIdentifier ?? ''] ??
    order.statusIdentifier,
  // paymentAccountLocalizeInfos.title is the human label; fall back to the marker.
  payment: order.paymentAccountLocalizeInfos?.title || order.paymentAccountIdentifier,
  items: order.products.map((p) => ({
    title: p.title,
    quantity: p.quantity,
    price: `${currency}${p.price.toFixed(2)}`,
    lineTotal: `${currency}${(p.price * p.quantity).toFixed(2)}`,
  })),
  // totalSum is a string ("300.00") — convert before formatting.
  total: `${currency}${Number(order.totalSum).toFixed(2)}`,
};
console.log(receipt);

// 7. Render the receipt as a PDF on the client (e.g. with jsPDF)
/*
  import { jsPDF } from 'jspdf';

  const doc = new jsPDF();

  doc.setFontSize(16);
  doc.text(`Receipt #${receipt.orderId}`, 14, 20);

  doc.setFontSize(11);
  doc.text(`Date: ${receipt.date}`, 14, 30);
  doc.text(`Status: ${receipt.status}`, 14, 37);
  doc.text(`Payment: ${receipt.payment}`, 14, 44);

  let y = 58;
  receipt.items.forEach((item) => {
    doc.text(`${item.quantity} × ${item.title}`, 14, y);
    doc.text(item.lineTotal, 196, y, { align: 'right' });
    y += 7;
  });

  doc.setFontSize(13);
  doc.text(`Total: ${receipt.total}`, 196, y + 8, { align: 'right' });

  doc.save(`receipt-${receipt.orderId}.pdf`);
*/