Payment Button

• Visual preview
• Code snippet

HTML

Copy

Ask AI

<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. A Payment form is required to create a payment button. These forms allow you to 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 creating the button by clicking the Create button when complete, you get a snippet of HTML code to copy and paste into your website.

​

Platform integration guides