App SDK
The @bazex/app-sdk package provides TypeScript types, constants, signature verification, hook handlers, and iframe communication helpers.
Installation
npm install @bazex/app-sdkSignature verification
Verify webhook and hook signatures using constant-time comparison:
verifySignaturetypescript
import { verifySignature, isTimestampFresh } from '@bazex/app-sdk';
// signature: "sha256=<hex>" from X-Webhook-Signature header
// timestamp: unix seconds from X-Webhook-Timestamp header
// body: raw JSON body string
// secret: your webhook secret (whsec_...) or access token (fbat_...)
const valid = verifySignature(signature, timestamp, body, secret);
const fresh = isTimestampFresh(timestamp); // default: 5 min window
const freshCustom = isTimestampFresh(timestamp, 600); // 10 min windowHook handler
The createHookHandler utility handles signature verification, timestamp checks, and routing to the correct handler:
Express exampletypescript
import { createHookHandler, HookPoints } from '@bazex/app-sdk';
const handleHook = createHookHandler({
secret: process.env.BAZEX_ACCESS_TOKEN!,
handlers: {
[HookPoints.CHECKOUT_PAYMENT_METHODS]: async (data, ctx) => {
return {
methods: [
{ id: 'card', name: 'Credit Card', description: 'Visa/Mastercard' },
{ id: 'cash', name: 'Cash on Delivery' },
],
};
},
[HookPoints.CHECKOUT_SHIPPING_RATES]: async (data) => {
const { subtotal, locality } = data;
return { fee: subtotal > 2000 ? 0 : 300 };
},
[HookPoints.ORDER_VALIDATE]: async (data) => {
if (data.subtotal < 500) {
return { valid: false, reason: 'Minimum order is 500₽' };
}
return { valid: true };
},
},
});
// In your Express/Fastify route:
app.post('/hooks', async (req, res) => {
const result = await handleHook({
headers: req.headers as Record<string, string>,
body: JSON.stringify(req.body),
});
res.status(result.status).json(result.body);
});ℹ
Handler context
Each handler receives
(data, ctx) where ctx includeshookPoint, businessId, and timestamp.Block client (iframe)
Use BazexBlock inside your block's iframe to communicate with the site builder:
Inside your block iframetypescript
import { BazexBlock } from '@bazex/app-sdk';
// Wait for initialization from the site builder
const { settings, blockId } = await BazexBlock.ready();
// Render your block UI with the settings
renderUI(settings);
// Listen for real-time settings updates (user changes in sidebar)
BazexBlock.onSettingsUpdate((newSettings) => {
renderUI(newSettings);
});
// Request iframe resize (max height: 400px)
BazexBlock.resize(250);The communication uses postMessage with the following protocol:
| Message | Direction | Purpose |
|---|---|---|
| BAZEX_BLOCK_READY | iframe → parent | Block loaded and ready |
| BAZEX_BLOCK_INIT | parent → iframe | Initial settings + blockId |
| BAZEX_BLOCK_UPDATE | parent → iframe | Settings changed by user |
| BAZEX_BLOCK_RESIZE | iframe → parent | Request new height/width |
Constants
The SDK exports useful constants you can reference in your code:
import {
HookPoints, // { CHECKOUT_PAYMENT_METHODS, CHECKOUT_CREATE_PAYMENT, ... }
EventTypes, // { ORDER_CREATED, ORDER_STATUS_CHANGED, ... }
AppScopes, // { READ_PRODUCTS, WRITE_PRODUCTS, ... }
VALID_SCOPES, // string[] of all valid scope values
VALID_EVENT_TYPES,// string[] of all event type values
VALID_HOOK_POINTS,// string[] of all hook point values
SCOPE_DESCRIPTIONS, // Record<scope, description>
SCOPE_EVENT_MAP, // Record<scope, eventType[]>
} from '@bazex/app-sdk';Type exports
Full TypeScript types for app manifests, hook payloads, and webhook events:
import type {
// Manifest
AppManifest,
AppBlockDef,
AppEmbedDef,
AppHookDef,
// Hook payloads & responses
HookRequest,
PaymentMethodsPayload,
PaymentMethodsResponse,
CreatePaymentPayload,
CreatePaymentResponse,
ShippingRatesPayload,
ShippingRatesResponse,
OrderValidatePayload,
OrderValidateResponse,
CalculateDiscountsPayload,
CalculateDiscountsResponse,
// Webhook event data
WebhookDelivery,
OrderCreatedData,
OrderStatusChangedData,
OrderDeliveredData,
OrderCancelledData,
PaymentCompletedData,
PaymentExpiredData,
ReviewCreatedData,
ReviewDeletedData,
ProductCreatedData,
ProductUpdatedData,
ProductDeletedData,
ProductOutOfStockData,
ProductLowStockData,
ProductBackInStockData,
} from '@bazex/app-sdk';