Chai

<bh-chai> | BharatChai

The Chai component provides a delightful way to accept donations or tips through UPI payments. It displays a “Buy me a tea” / “Buy me a Chai” button that, when clicked, generates a QR code for UPI payment.

Open in

Basic Usage

Preview

Open in

HTML

<bh-chai
  upi="username@oksbi"
  name="Your Name">
</bh-chai>

React

import React from 'react';
import { BharatChai } from 'bharat-ui/react/components/chai';
function App() {
return (
      <BharatChai upi="username@oksbi"
      name="Your Name"/>
);
}
export default App;

Supported Banks

The component currently supports the following UPI bank codes:

• okhdfcbank - HDFC Bank
• oksbi - State Bank of India
• okicici - ICICI Bank
• okaxis - Axis Bank
• okyesbank - Yes Bank

For more information, refer UPI docs here

Tip

Make sure to use a valid UPI ID in the format username@bankcode with one of the supported bank codes.

Examples

With Image Variants

Preview

Open in

HTML

  <bh-chai upi="user@okhdfcbank" name="Saumya" image-index="1"></bh-chai>
  <bh-chai upi="user@okhdfcbank" name="Saumya" image-index="2"></bh-chai>
  <bh-chai upi="user@okhdfcbank" name="Saumya" image-index="3"></bh-chai>
  <bh-chai upi="user@okhdfcbank" name="Saumya" image-index="4"></bh-chai>

React

import React from 'react';
import { BharatChai } from 'bharat-ui/react/components/chai';
function App() {
return (
  <>
    <BharatChai upi="user@okhdfcbank" name="Saumya" image-index="1"></BharatChai>
    <BharatChai upi="user@okhdfcbank" name="Saumya" image-index="2"></BharatChai>
    <BharatChai upi="user@okhdfcbank" name="Saumya" image-index="3"></BharatChai>
    <BharatChai upi="user@okhdfcbank" name="Saumya" image-index="4"></BharatChai>
  </>

);
}
export default App;

With Invalid UPI ID Validation

Preview

Open in

HTML

<bh-chai upi="user123@test" name="Test"></bh-chai>

React

import React from 'react';
import { BharatChai } from 'bharat-ui/react/components/chai';
function App() {
return (

  <BharatChai upi="user123@test" name="Test"></BharatChai>

);
}
export default App;

Properties

Property	Type	Description
name	string	Name of the recipient as registered in their bank account
qrUrl	string	URL of the generated QR code
showQR	boolean	Controls visibility of the QR code modal
upi	string	UPI ID in the format username@bankcode
image-index	number	Set button variant using image-index keys eg- image-index="1" . Supported keys till “4”