# Payment & Transactions / Fee Waived Fee waiver confirmation for eligible applicants showing original fee breakdown with waiver applied. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-payment-transactions-fee-waived--full-screen ## Pattern variants - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-payment-transactions-fee-waived--full-screen - Fee Waived: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-payment-transactions-fee-waived--fee-waived ## When to use this pattern Use Payment & Transactions / Fee Waived when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Payment & Transactions / Fee Waived. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Fee Waived — Fee Waived HTML: ```html

Personal info
Documents
Review
Payment

Fee Waived

You are eligible for fee waiver as an SC/ST applicant. No payment required.

Application fee	Rs 30.00
Processing charge	Rs 5.00
GST (18%)	Rs 6.30
Waiver applied	- Rs 41.30
Total payable	Rs 0.00

``` React: ```jsx import React from 'react'; const PaymentTransactionsFeeWaivedExample1Demo = () => ( <>

Personal info
Documents
Review
Payment

Fee Waived

You are eligible for fee waiver as an SC/ST applicant. No payment required.

Application fee	Rs 30.00
Processing charge	Rs 5.00
GST (18%)	Rs 6.30
Waiver applied	- Rs 41.30
Total payable	Rs 0.00

); export default PaymentTransactionsFeeWaivedExample1Demo; ``` Angular: ```html

Personal info
Documents
Review
Payment

Fee Waived

You are eligible for fee waiver as an SC/ST applicant. No payment required.

Application fee	Rs 30.00
Processing charge	Rs 5.00
GST (18%)	Rs 6.30
Waiver applied	- Rs 41.30
Total payable	Rs 0.00

``` ### 2. Full Screen — Fee Waived HTML: ```html

Personal info
Documents
Review
Payment

Fee Waived

You are eligible for fee waiver as an SC/ST applicant. No payment required.

Application fee	Rs 30.00
Processing charge	Rs 5.00
GST (18%)	Rs 6.30
Waiver applied	- Rs 41.30
Total payable	Rs 0.00

``` React: ```jsx import React from 'react'; const PaymentTransactionsFeeWaivedExample2Demo = () => ( <>

Personal info
Documents
Review
Payment

Fee Waived

You are eligible for fee waiver as an SC/ST applicant. No payment required.

Application fee	Rs 30.00
Processing charge	Rs 5.00
GST (18%)	Rs 6.30
Waiver applied	- Rs 41.30
Total payable	Rs 0.00

); export default PaymentTransactionsFeeWaivedExample2Demo; ``` Angular: ```html

Personal info
Documents
Review
Payment

Fee Waived

You are eligible for fee waiver as an SC/ST applicant. No payment required.

Application fee	Rs 30.00
Processing charge	Rs 5.00
GST (18%)	Rs 6.30
Waiver applied	- Rs 41.30
Total payable	Rs 0.00

```