Payment Button

Documentation Index

Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

• Visual preview
• Code snippet

HTML

<form>
  <a href="https://payments.cashfree.com/forms/gsdjkljlk" target="_parent">
    <div class="button-container" style="background: #000000">
      <div>
        <img src="https://cashfreelogo.cashfree.com/cashfreepayments/logosvgs/Group_4355.svg" alt="logo" class="logo-container">
      </div>
      <div class="text-container">
        <div style="font-family: Arial; color: #fff; margin-bottom: 5px; font-size: 14px;">Pay Now</div>
        <div style="font-family: Arial; color: #fff; font-size: 10px;">
            <span>Powered By Cashfree</span>
            <img src="https://cashfreelogo.cashfree.com/cashfreepayments/logosvgs/Group_4355.svg" alt="logo" class="seconday-logo-container">
        </div>
      </div>
    </div>
  </a>
 <style>
  .button-container{ border: 1px solid black; border-radius: 15px; display: flex; padding: 10px; width: fit-content; cursor: pointer; }
  .text-container{ display: flex; flex-direction: column; align-items: center; margin: 0 10px; justify-content: center; }
  .logo-container{ width: 40px; height: 40px; }
  .seconday-logo-container{ width: 16px; height: 16px; vertical-align: middle; }
  a{ text-decoration:none; }
</style>
</form>

​

Key benefits

• Fast setup: Accept payments in a matter of minutes by simply embedding a code snippet.
• Custom information collection: Collect information based on your case, such as donations, events, selling physical or digital products, etc.
• Automated redirects: Redirect back to your website by using the Return URL feature after a transaction.
• Instant invoicing: Send invoices after successful payment to your customers automatically.

​

Use cases

• E-commerce: Sell physical or digital products on any custom website or blog.
• Donations: Collect funds for social causes or NGOs with a simple Donate Now button.
• Events: Manage registrations and payments for workshops, webinars, or local events.
• Service bookings: Allow customers to pay for appointments or reservations using custom CTA text such as Book Now or Reserve Now.

​

Creating a payment button

1. Log in to the Merchant Dashboard.
2. Go to Payment Gateway Dashboard > Payment Button > click Create Payment Button.
3. Enter the Button Text (Call to Action) and specify with examples such as Pay Now, Donate Now, Book Now, or Reserve Now.
4. Customise the Button Text Colour, Background Colour, Select Font Style, and Select Form Code according to your website or blog. You can view the preview directly in the editor.
5. You need a Payment form to create a payment button. These forms let you collect customer information such as name, address, and other details specific to your use case.
6. Create your form in the Payment Form Dashboard and link it to your payment button using the Form Code. We recommend using a readable form code in the personalised URL section during creation; you can find this code listed against each form in the dashboard.
7. After you click Create, copy the generated HTML snippet and paste it into your website.

​

Platform integration guides