Skip to content

Commit

Permalink
docs: add README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
absolemDev committed Nov 28, 2023
1 parent 78bbb3d commit 4272da8
Showing 1 changed file with 68 additions and 0 deletions.
68 changes: 68 additions & 0 deletions packages/payment-widget/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
# Применение

## С темой виджета

Для корректной работы Виджета достаточно атрибуту `settings` назначить объект с ключом `storeID`:

```tsx
import { Widget } from "@atls/react-payment-widget";
export const Form = () => <Widget settings={{ storeId: "STORE_ID" }} />;
```

Для добавления дополнительных полей используйте атрибут `additionalFields` который принимает в себя массив объектов с обязательным ключом `name`.

Атрибут `amount` принимает сумму платежа. Без заданного значения Виджет генерирует обязательное поле для ввода суммы.

```tsx
import { Widget, AdditionalFieldsType } from "@atls/react-payment-widget";
export const Form = () => (
<Widget
amount={10000}
settings={{ storeId: "STORE_ID" }}
additionalFields={[{ name: AdditionalFieldsType.Email }]}
/>
);
```

## С темой проекта

Если Вы хотите использовать кастомные поля и кнопку, то используйте предоставляемые Виджетом обёртки `InputWrapper` и `ButtonWrapper`. `InputWrapper` принимает обязательный атрибут `name`.

```tsx
import {
Widget,
AdditionalFieldsType,
InputWrapper,
ButtonWrapper,
} from "@atls/react-payment-widget";
export const Form = () => (
<Widget
amount={amount}
settings={{ storeId: "1698844342541DEMO" }}
disabled={!privacyPolicy}
>
<InputWrapper name={AdditionalFieldsType.Email}>
{(props) => <Input {...props} placeholder={fieldToLabelMap.email} />}
</InputWrapper>
<ButtonWrapper>
{(props) => <Button {...props}>Оплатить</Button>}
</ButtonWrapper>
</Widget>
);
```

> [!WARNING]
> Не используйте атрибут `additionalFields` совместно с `InputWrapper`, это приведет к исключению.
> Так же, при использовании `InputWrapper` Виджет не генерирует дополнительные поля.
## Экспортируемые компоненты

**Widget** - главный компонент Виджета.

**InputWrapper** - компонент обёртка для полей ввода.

**ButtonWrapper** - компонент обёртка для кнопки.

**AdditionalFieldsType** - интерфейс дополнительных полей.

**RequiredFieldsType** - интерфейс обязательных полей.

0 comments on commit 4272da8

Please sign in to comment.