Lewati ke konten utama

Pemesanan Tiket

Dalam contoh ini, kami menunjukkan cara memesan tiket untuk sebuah acara menggunakan API OneEntry.

✅ Tujuan skenario:

  • Pengguna masuk dengan kredensial mereka
  • Memilih jenis tiket, tanggal, dan waktu dari jadwal
  • Membayar untuk pesanan dan menerima tiket melalui email

✅ Apa yang Anda butuhkan:

  • PROJECT_URL dan APP_TOKEN yang valid untuk otentikasi dengan API OneEntry.
  • Pengguna terdaftar untuk otentikasi
  • Formulir dengan penanda "tickets_form" dan bidang "schedule" dan "tickets"
  • Penyimpanan pesanan yang dikonfigurasi dengan penanda "tickets"

📌 Penting:

  • Contoh ini tidak mencakup penanganan kesalahan.
  • Anda dapat mengelola kesalahan menggunakan blok try-catch atau dengan menggunakan konstruksi seperti await Promise.catch((error) => error).

📚 Lihat di dokumentasi:

📦 Referensi SDK:

Coba secara langsung​

Jalankan metode ini secara interaktif di JS SDK sandbox — sambungkan Project URL dan App Token Anda pada kunjungan pertama, lalu buka:

  • Pemesanan Tiket — Dalam contoh ini, kami menunjukkan cara memesan tiket untuk sebuah acara menggunakan API OneEntry.

Skenario​

1. Impor defineOneEntry dari SDK dan definisikan PROJECT_URL dan APP_TOKEN​

Contoh:

import { defineOneEntry } from 'oneentry';

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

2. Membuat klien API dengan defineOneEntry()​

Contoh:

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

3. Otorisasi pengguna dengan AuthProvider.auth()​

Contoh:

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

4. Kami menerima data formulir dari Platform OneEntry dengan Forms.getFormByMarker() untuk menghasilkan formulir di frontend​

Contoh:

const formData = await Forms.getFormByMarker('tickets_form');
console.log(formData);
Hasil:
{
  "id": 9,
  "attributeSetId": 12,
  "type": "order",
  "localizeInfos": {
    "title": "Tickets",
    "titleForSite": "Tickets",
    "successMessage": "",
    "unsuccessMessage": "",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 6,
  "position": 1,
  "identifier": "tickets_form",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "timeInterval",
      "marker": "schedule",
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "initialValue": null,
      "localizeInfos": {
        "title": "Schedule",
        "intervals": [
          {
            "id": "ef9cf848-7373-4b81-98bd-7ad33aa951e2",
            "range": [
              "2025-04-26T21:00:00.000Z",
              "2025-04-26T21:00:00.000Z"
            ],
            "external": [],
            "intervals": [
              {
                "id": "f2042e47-c650-4fc6-ae1c-efdb109b450f",
                "end": {
                  "hours": 21,
                  "minutes": 30
                },
                "start": {
                  "hours": 16,
                  "minutes": 30
                },
                "period": 90
              }
            ],
            "inEveryWeek": true,
            "inEveryMonth": true
          }
        ]
      },
      "additionalFields": {}
    },
    {
      "type": "entity",
      "marker": "tickets",
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [
        {
          "title": "Tickets",
          "value": {
            "id": 8,
            "depth": 0,
            "isPinned": false,
            "parentId": null,
            "position": "0|hzzzz3:"
          }
        },
        {
          "title": "Bronze",
          "value": {
            "id": "p-8-10",
            "depth": 1,
            "isPinned": false,
            "parentId": 8,
            "position": 1,
            "selected": true
          }
        },
        {
          "title": "Silver",
          "value": {
            "id": "p-8-11",
            "depth": 1,
            "isPinned": false,
            "parentId": 8,
            "position": 2,
            "selected": true
          }
        },
        {
          "title": "Gold",
          "value": {
            "id": "p-8-12",
            "depth": 1,
            "isPinned": false,
            "parentId": 8,
            "position": 3,
            "selected": true
          }
        }
      ],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "initialValue": null,
      "localizeInfos": {
        "title": "Tickets"
      },
      "additionalFields": {}
    }
  ],
  "total": "1",
  "moduleFormConfigs": []
}

Atribut schedule membawa aturan pengulangan yang ringkas, bukan daftar slot. Ubah menjadi pasangan konkret [start, end] untuk tanggal yang Anda render dengan expandTimeIntervals - lihat Time Intervals:

import { expandTimeIntervals } from 'oneentry';

const field = formData.attributes.find((a) => a.marker === 'schedule');

const slots = (field?.localizeInfos.intervals ?? []).flatMap((schedule) =>
  expandTimeIntervals(schedule, { from: '2025-04-01', to: '2025-04-30' }),
);

5. Pembuatan pesanan di penyimpanan pesanan dengan Orders.createOrder()​

Data:

{
  "formIdentifier": "tickets_form",
  "paymentAccountIdentifier": "cash",
  "formData": {
    "en_US": [
      {
        "type": "entity",
        "marker": "tickets",
        "value": [
          "p-8-10"
        ]
      }
    ]
  },
  "products": [
    {
      "productId": 10,
      "quantity": 1
    }
  ]
}

Contoh:

const body = {
  formIdentifier: 'tickets_form',
  paymentAccountIdentifier: 'cash',
  formData: [{ type: 'entity', marker: 'tickets', value: ['p-8-10'] }],
  products: [{ productId: 10, quantity: 1 }],
};
const order = await Orders.createOrder('tickets', body);

if ('statusCode' in order) {
  throw new Error(order.message);
}
Hasil:
{
  "id": 123,
  "formIdentifier": "tickets_form",
  "paymentAccountIdentifier": "cash",
  "formData": [
    {
      "type": "entity",
      "marker": "tickets",
      "value": [
        "p-8-10"
      ]
    }
  ],
  "products": [
    {
      "productId": 10,
      "quantity": 1
    }
  ],
  "currency": "USD",
  "totalSum": 100,
  "bonusApplied": 0,
  "totalDue": 100,
  "discountConfig": {
    "orderDiscounts": [],
    "productDiscounts": [],
    "coupon": null,
    "settings": {
      "allowStacking": false,
      "maxDiscountValue": null,
      "allowGiftStacking": false,
      "maxBonusPaymentPercent": null,
      "minBonusAmount": null,
      "minOrderAmountForBonus": null,
      "giftRefundPolicy": "KEEP_GIFT"
    },
    "additionalDiscountsMarkers": [],
    "totalRaw": 100,
    "totalSumWithDiscount": 100,
    "excludedGiftProductIds": [],
    "bonus": {
      "availableBalance": 0,
      "maxBonusDiscount": 0,
      "minBonusAmount": null,
      "minOrderAmountForBonus": null,
      "bonusApplied": 0
    },
    "bonusApplied": 0,
    "totalDue": 100
  },
  "statusIdentifier": "new",
  "statusLocalizeInfos": {
    "title": "new"
  },
  "createdDate": "2026-06-06T11:54:31.545Z"
}

6. Pembuatan sesi pembayaran dengan Payments.createSession()​

Contoh:

const paymentSession = await Payments.createSession(order.id, 'session', false);
console.log(paymentSession);
Hasil:
{
  "id": 71,
  "createdDate": "2026-06-06T11:54:31.857Z",
  "updatedDate": "2026-06-06T11:54:31.857Z",
  "type": "session",
  "status": "waiting",
  "paymentAccountId": 1,
  "orderId": 123,
  "amount": null,
  "paymentUrl": null
}

7. Dapatkan satu objek sesi pembayaran berdasarkan pengidentifikasi pesanan dengan Payments.getSessionByOrderId()​

Contoh:

const sessionByOrderId = await Payments.getSessionByOrderId(order.id);
console.log(sessionByOrderId);
Hasil:
[
  {
    "id": 71,
    "createdDate": "2026-06-06T11:54:31.857Z",
    "updatedDate": "2026-06-06T11:54:31.857Z",
    "type": "session",
    "status": "waiting",
    "paymentAccountId": 1,
    "orderId": 123,
    "amount": null,
    "paymentUrl": null
  }
]

Contoh akhir​

// 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, Forms, Orders, Payments } = 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 authResponse = await AuthProvider.auth('email', { authData });
console.log(authResponse);

// 4. We receive form data from OneEntry Platform with Forms.getFormByMarker() to generate a form on the frontend
const formData = await Forms.getFormByMarker('tickets_form');
console.log(formData);

// 5. Creation of an order in the order storage with [Orders.createOrder()](/docs/orders/createOrder)
const body = {
  formIdentifier: 'tickets_form',
  paymentAccountIdentifier: 'cash',
  formData: [{ type: 'entity', marker: 'tickets', value: ['p-8-10'] }],
  products: [{ productId: 10, quantity: 1 }],
};
const order = await Orders.createOrder('tickets', body);

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

// 6. Creation of payment session with [Payments.createSession()](/docs/payments/createSession)
const paymentSession = await Payments.createSession(order.id, 'session', false);
console.log(paymentSession);

// 7. Get one payment session object by order identifier with [Payments.getSessionByOrderId()](/docs/payments/getSessionByOrderId)
const sessionByOrderId = await Payments.getSessionByOrderId(order.id);
console.log(sessionByOrderId);