CDEK Widget

A comprehensive React component for integrating CDEK delivery services into your Next.js application.

Features

🗺️ Interactive Map - Yandex Maps integration for pickup point selection
💰 Cost Calculation - Real-time delivery cost estimation
📦 Multiple Modes - Support for office pickup and door delivery
🎨 Customizable - Extensive configuration options
🔒 Type-Safe - Full TypeScript support

Installation

pnpm dlx shadcn@latest add https://malevichai.github.io/ui/r/cdek-po-widget

npx shadcn@latest add https://malevichai.github.io/ui/r/cdek-po-widget

This will install:

components/delivery/cdek/cdek-select-po.tsx - Main component
components/delivery/cdek/cdek.types.d.ts - Type definitions
app/api/cdek/route.ts - API route template

Dependencies

The component requires:

pnpm add @cdek-it/widget

npm install @cdek-it/widget

Environment Variables

Create a .env.local file with:

NEXT_PUBLIC_YANDEX_API_KEY=your-yandex-maps-api-key
CDEK_LOGIN=your-cdek-login
CDEK_PASSWORD=your-cdek-password

Get your Yandex Maps API key at: developer.tech.yandex.ru

Basic Usage

import CDEKWidgetComponent from '@/components/delivery/cdek/cdek-select-po';

export default function CheckoutPage() {
  return (
    <CDEKWidgetComponent
      from="Москва"
      apiKey={process.env.NEXT_PUBLIC_YANDEX_API_KEY!}
      onChoose={(mode, tariff, address) => {
        console.log('Selected:', { mode, tariff, address });
      }}
    />
  );
}

Advanced Configuration

<CDEKWidgetComponent
  from={{
    country_code: 'RU',
    city: 'Новосибирск',
    postal_code: 630009,
    code: 270,
    address: 'ул. Большевистская, д. 101',
  }}
  apiKey={process.env.NEXT_PUBLIC_YANDEX_API_KEY!}
  goods={[
    {
      width: 10,
      height: 10,
      length: 10,
      weight: 1000, // grams
    },
  ]}
  defaultLocation={[55.0415, 82.9346]}
  lang="rus"
  currency="RUB"
  tariffs={{
    office: [234, 136, 138],
    door: [233, 137, 139],
  }}
  onReady={() => console.log('Widget ready')}
  onCalculate={(tariffs, address) => {
    console.log('Calculated:', tariffs);
  }}
  onChoose={(mode, tariff, address) => {
    console.log('Chosen:', { mode, tariff, address });
  }}
/>

Props

Prop	Type	Required	Description
`from`	`string \| CDEKAddress`	Yes	Origin address
`apiKey`	`string`	Yes	Yandex Maps API key
`goods`	`CDEKParcel[]`	No	Parcel dimensions and weight
`defaultLocation`	`[number, number]`	No	Default map coordinates
`lang`	`'rus' \| 'eng' \| 'zho'`	No	Widget language
`currency`	`string`	No	Currency code
`tariffs`	`object`	No	Specific tariff codes
`onReady`	`function`	No	Called when widget loads
`onCalculate`	`function`	No	Called after cost calculation
`onChoose`	`function`	No	Called when user selects delivery

API Route

The component requires a backend API endpoint at /api/cdek. The installation includes a template that you should customize with your CDEK credentials.

Resources

Troubleshooting

Verify your Yandex Maps API key is valid
Check that CDEK credentials are configured correctly
Ensure the API route is accessible at /api/cdek

Types not working?

Make sure TypeScript is configured correctly
Import types from ./cdek.types

Network errors?

Yandex Maps requires network access to Russian CDN
Consider using a VPN if services are blocked in your region