فارسی
رسید پرداخت
صفحهٔ نتیجهٔ پرداخت با وضعیت، مبلغ به حروف، کد پیگیری قابل کپی و کارت پوشانده.
import { PaymentReceipt } from "@kashi-ui/react";
نمونه
پرداخت موفق
۱٬۲۵۰٬۰۰۰تومانیک میلیون و دویست و پنجاه هزار تومان
- پذیرنده
- فروشگاه کاشی
- کد پیگیری
- ۴۸۲۹۱۳
- شمارهٔ مرجع
- ۱۴۰۵۰۸۲۷۰۱۲۳
- کارت
- ۶۱۰۴-۳۳**-****-۵۶۷۸
- تاریخ
- ۵ آبان ۱۴۰۵، ساعت ۱۴:۰۵
<PaymentReceipt status="success" amount={1250000} merchant="فروشگاه کاشی"
trackingCode="482913" referenceId="140508270123"
cardNumber="6104337712345678" date={paidAt}>
<Button variant="primary">بازگشت به فروشگاه</Button>
</PaymentReceipt>صفحهای که کاربر پس از بازگشت از درگاه بانکی میبیند. سه وضعیت دارد: success، pending (بانک هنوز تأیید نکرده) و failed. برای پرداخت ناموفق، در description توضیح دهید که مبلغ کسرشده کی برمیگردد. کارت خودکار پوشانده میشود و تاریخ شمسی است. ردیفهای دیگر را با rows اضافه کنید.
| نام | نوع | پیشفرض | توضیح |
|---|---|---|---|
status | "success" | "pending" | "failed" | — | |
amount | number | — | |
unit | "toman" | "rial" | "toman" | |
title / description | ReactNode | — | پیشفرض بر اساس وضعیت |
merchant | ReactNode | — | پذیرنده |
trackingCode | string | — | با دکمهٔ کپی |
referenceId | string | — | |
cardNumber | string | — | پوشانده با لوگوی بانک |
date | Date | — | |
rows | [ReactNode, ReactNode][] | — | ردیفهای دیگر |
children | ReactNode | — | دکمهها |
دسترسپذیری
رسید یک section است که عنوانش نام آن است. وضعیت با آیکون، رنگ و متن عنوان بیان میشود، نه فقط با رنگ. دکمهٔ کپی کد پیگیری پس از کپی «کپی شد» را اعلام میکند.