Pular para o conteúdo principal

Gerar recibo em PDF após o pedido ser realizado

Neste exemplo, fazemos um pedido, lemos os dados de volta com todas as informações de preços e montamos um recibo imprimível que pode ser renderizado como um PDF no cliente.

✅ Objetivo do cenário:

  • Fazer um pedido e lê-lo de volta com Orders.getOrderByMarkerAndId()
  • Montar um recibo a partir dos produtos do pedido, totais e método de pagamento
  • Renderizar o recibo como um PDF para download no cliente

✅ O que você precisa:

  • Um PROJECT_URL e APP_TOKEN válidos para autenticação com a API OneEntry.
  • Usuário registrado
  • Armazenamento de pedidos configurado com o marcador "orders"

📌 Importante:

  • A renderização de PDF não faz parte do SDK OneEntry — use qualquer biblioteca do lado do cliente (jsPDF é mostrado aqui). O SDK apenas fornece os dados do pedido.
  • totalSum retorna como uma string e a moeda muitas vezes está vazia — formate com Number(totalSum).toFixed(2) e nunca codifique um símbolo de moeda.
  • Estes exemplos não incluem tratamento de erros.
  • Você pode gerenciar erros usando um bloco try-catch ou empregando uma construção como await Promise.catch((error) => error).

📚 Veja na documentação:

📦 Referência do SDK:

Experimente ao vivo​

Execute este método interativamente no sandbox do JS SDK — conecte seu Project URL e App Token na primeira visita, depois abra:

Cenário​

1. Importar defineOneEntry do SDK e definir PROJECT_URL e APP_TOKEN​

Exemplo:

import { defineOneEntry } from 'oneentry';

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

2. Criando um cliente API com defineOneEntry()​

Exemplo:

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

3. Autorização do usuário com AuthProvider.auth()​

Exemplo:

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

4. Fazer o pedido com Orders.createOrder()​

Dados:

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

Exemplo:

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);
}
Resultado:
{
  "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. Ler o pedido realizado de volta com Orders.getOrderByMarkerAndId()​

Exemplo:

// 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);
}
Resultado:
{
  "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. Montar o recibo a partir dos dados do pedido​

Exemplo:

// 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);
Resultado:
{
  "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. Renderizar o recibo como um PDF no cliente (por exemplo, com jsPDF)​

Exemplo:

/*
  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`);
*/

Exemplo 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`);
*/