Skip to content

Commit

Permalink
docs: edit package name
Browse files Browse the repository at this point in the history
  • Loading branch information
absolemDev committed Nov 29, 2023
1 parent 759c5c0 commit 6b3cc3d
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 16 deletions.
34 changes: 19 additions & 15 deletions packages/payment-widget/README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# @atls/react-payment-widget
# @atls/tinkoff-payment-widget

[//]: # 'VERSIONS'
[//]: # "VERSIONS"

## [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Fbutton&message=0.0.12&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/button/v/0.0.12) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Fcondition&message=0.0.4&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/condition/v/0.0.4) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Fhidden-input&message=0.0.6&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/hidden-input/v/0.0.6) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Finput&message=0.0.13&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/input/v/0.0.13) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Flayout&message=0.0.7&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Ftext&message=0.0.11&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=react-intl&message=6.4.4&labelColor=ECEEF5&color=D7DCEB">](https://www.npmjs.com/package/react-intl/v/6.4.4) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=react-laag&message=2.0.5&labelColor=ECEEF5&color=D7DCEB">](https://www.npmjs.com/package/react-laag) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=styled-tools&message=1.7.2&labelColor=ECEEF5&color=D7DCEB">](https://www.npmjs.com/package/styled-tools)

**@atls/react-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`.
**@atls/tinkoff-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`.

## Использование со стандартной темой

Для корректной работы **@atls/react-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`:
Для корректной работы **@atls/tinkoff-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`:

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

Основные атрибуты для компонента `Widget`:
Expand All @@ -26,21 +26,25 @@ export const Form = () => <Widget settings={{ storeId: 'STORE_ID' }} />

## Использование с кастомной темой

**@atls/react-payment-widget** предусматривает возможность использования стилизованных полей ввода и кнопки из Вашего проекта. Для этого предоставляются компоненты обёртки `InputWrapper` и `ButtonWrapper`.
**@atls/tinkoff-payment-widget** предусматривает возможность использования стилизованных полей ввода и кнопки из Вашего проекта. Для этого предоставляются компоненты обёртки `InputWrapper` и `ButtonWrapper`.

`InputWrapper` принимает обязательный атрибут `name`.

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

> [!WARNING]
Expand Down
2 changes: 1 addition & 1 deletion packages/payment-widget/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@atls/react-payment-widget",
"name": "@atls/tinkoff-payment-widget",
"version": "0.0.1",
"license": "BSD-3-Clause",
"main": "src/index.ts",
Expand Down

0 comments on commit 6b3cc3d

Please sign in to comment.