saferoute-widgets-react
v1.0.4
Published
Интеграция виджетов SafeRoute в React-приложение.
Downloads
148
Maintainers
Readme
Пакет для интеграции виджетов SafeRoute в React-приложение.
Включает в себя все 3 виджета: корзинный, карточный и трекинг-виджет.
Информация о виджетах с демонстрацией.
- Установка
- Константы
- Подключение корзинного виджета
- Подключение карточного виджета
- Подключение трекинг-виджета
Установка
NPM
npm i saferoute-widgets-react
Yarn
yarn add saferoute-widgets-react
В случае использования на сервере nodejs, можете воспользоваться нашим пакетом saferoute-api, включающим в себя функции для работы с API виджетов.
Константы
Общие константы
Язык интерфейса:
LANGUAGES.RU
- русскийLANGUAGES.EN
- английский
Валюта:
CURRENCIES.RUB
- рубльCURRENCIES.USD
- американский долларCURRENCIES.EURO
- евро
Тип доставки:
DELIVERY_TYPES.PICKUP
- самовывозDELIVERY_TYPES.COURIER
- курьерская доставкаDELIVERY_TYPES.POST
- почта
Константы корзинного виджета
События виджета:
CART_WIDGET_EVENTS.START
CART_WIDGET_EVENTS.CHANGE
CART_WIDGET_EVENTS.SELECT
CART_WIDGET_EVENTS.STEP_CHANGE
CART_WIDGET_EVENTS.RESTART
CART_WIDGET_EVENTS.DONE
CART_WIDGET_EVENTS.ERROR
Выбранный тип оплаты:
CART_WIDGET_PAY_TYPES.COD
- оплата при полученииCART_WIDGET_PAY_TYPES.ACQUIRING
- оплата он-лайн через виджетCART_WIDGET_PAY_TYPES.OTHER
- оплата другим способом оплаты
Тип кнопки подтверждения на последнем шаге:
CART_WIDGET_DONE_BUTTONS.CONFIRM
- "Подтвердить"CART_WIDGET_DONE_BUTTONS.NEXT
- "Далее"
Шаг:
CART_WIDGET_STEPS.DELIVERY_SELECT
- выбор доставкиCART_WIDGET_STEPS.FORM
- форма ввода контактовCART_WIDGET_STEPS.CONFIRMATION
- подтверждение данныхCART_WIDGET_STEPS.PAY
- оплата
Константы трекинг-виджета
По чему производить немедленный трекинг:
TRACKING_WIDGET_TRACK_BY.ID
- ID заказа в SafeRouteTRACKING_WIDGET_TRACK_BY.CMS_ID
- ID заказа в CMS интернет-магазинаTRACKING_WIDGET_TRACK_BY.TRACK_NUMBER
- трек-номер в службе доставки
Подключение корзинного виджета
import React, { useCallback, useState } from 'react';
import {
CartWidget,
CartWidgetParams,
CartWidgetSelectEventData,
CartWidgetChangeEventData,
CartWidgetDoneEventData,
CART_WIDGET_STEPS,
} from 'saferoute-widgets-react';
const CartWidgetTest: React.FC = () => {
const [params, setParams] = useState<CartWidgetParams>({
apiScript: 'http://localhost:8081/widget-api',
products: [{ count: 1, price: 100 }],
});
const onStart = useCallback(() => {
// Обработчик события 'start'
}, []);
const onRestart = useCallback(() => {
// Обработчик события 'restart'
}, []);
const onSelect = useCallback((data: CartWidgetSelectEventData) => {
// Обработчик события 'select'
}, []);
const onChange = useCallback((data: CartWidgetChangeEventData) => {
// Обработчик события 'change'
}, []);
const onStepChange = useCallback((step: CART_WIDGET_STEPS) => {
// Обработчик события 'stepChange'
}, []);
const onError = useCallback((errors: string[]) => {
// Обработчик события 'error'
}, []);
const onDone = useCallback((data: CartWidgetDoneEventData) => {
// Обработчик события 'done'
}, []);
return (
<CartWidget
params={params}
onStart={onStart}
onRestart={onRestart}
onSelect={onSelect}
onChange={onChange}
onStepChange={onStepChange}
onDone={onDone}
onError={onError}
/>
);
};
export default React.memo(CartWidgetTest);
Подключение карточного виджета
import React, { useRef } from 'react';
import { CardWidget, CardWidgetParams } from 'saferoute-widgets-react';
const CardWidgetTest: React.FC = () => {
const params = useRef<CardWidgetParams>({
apiScript: 'http://localhost:8081/widget-api',
});
return <CardWidget params={params.current} />;
};
export default React.memo(CardWidgetTest);
Подключение трекинг-виджета
import React, { useRef } from 'react';
import { TrackingWidget, TrackingWidgetParams } from 'saferoute-widgets-react';
const TrackingWidgetTest: React.FC = () => {
const params = useRef<TrackingWidgetParams>({
apiScript: 'http://localhost:8081/widget-api',
});
return <TrackingWidget params={params.current} />;
};
export default React.memo(TrackingWidgetTest);