> ## 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.

# WordPress

> Use the Cashfree WordPress plugin to embed a payment button on any WordPress page and accept cards, netbanking, UPI, and wallet payments without coding.

Cashfree's WordPress plugin allows you to easily accept payments from customers on your WordPress page by easily integrating the payment button. You can accept payments via debit card, credit card, net banking, UPI, or through any of our supported wallets.

To accept payments using Cashfree's Quick Button:

* Add a few custom variables and some markup to a page.
* Specify the amount, title, description and other custom details as page metadata.
* Write `[CFPB]` where you want the Pay With Cashfree button to be displayed. The plugin takes over and completes the payment after customers click the payment button.

## Configuration

1. Download Cashfree's [Quick Button plugin](https://github.com/cashfree/cashfree-quick-button).
2. Go to your WordPress site > Plugins > Add New.
3. Upload the plugin.

<img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_1.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=cdafd36b4e8f0b3cfe74aaf7944f3972" data-path="static/payments/plugins/wordpress/wordpress_1.png" />

4. Select **Activate Plugin**.

<img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_2.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=532ecef3f9d8f215cad6c54bc6e2f763" data-path="static/payments/plugins/wordpress/wordpress_2.png" />

5. Select **Settings**.

   <img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_3.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=04e5eff1475f10c6a6e7dd7996619c37" data-path="static/payments/plugins/wordpress/wordpress_3.png" />

6. In the **Edit Settings** screen, enter the **Title, App ID, Secret Key, Payment Mode** (Test/Prod) and the **Success Message**. Click Save Changes.
   <img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_4.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=a68a84a64b6f4890949b9df8689d9557" data-path="static/payments/plugins/wordpress/wordpress_4.png" />

## Add custom fields

1. In your WordPress site, open the page where you want the payment button to be displayed.

2. Click the more icon and select **Preferences**.

3. In the **Preferences** screen, enable the option **Custom fields**. You will now have the option to add custom fields to your WordPress page.

   <img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_5.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=c33c503d9d203fb452198b1fd37c3f63" data-path="static/payments/plugins/wordpress/wordpress_5.png" />

4. Scroll down the page till you see the Custom fields section, and add the following three custom fields as metadata:

* **description**: include product description
* **orderAmount**: specify the order amount in INR
* **title**: specify the product name

<img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_6.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=0d7ad42d9c6589ddbf2bac7f44d71dd3" data-path="static/payments/plugins/wordpress/wordpress_6.png" />

5. Write `[CFPB]` in the content section where you want to display the `Pay With Cashfree` button.

<img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_7.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=64641e282003be6d4a118b6bc6337dee" data-path="static/payments/plugins/wordpress/wordpress_7.png" />

6. Publish the page to see the **Pay with Cashfree** button. Customers can complete the payment by clicking the button on the page.

<img height="200" src="https://mintcdn.com/cashfreepayments-d00050e9/Z2hkDQBwGJ-3Zpw-/static/payments/plugins/wordpress/wordpress_8.png?fit=max&auto=format&n=Z2hkDQBwGJ-3Zpw-&q=85&s=23aa68835c4fb6a209f8755e6d08c9a3" data-path="static/payments/plugins/wordpress/wordpress_8.png" />

<Note>
  Read about [whitelisting your store url](/payments/online/go-live/whitelist)
  before you can accept payments on your store.
</Note>

<div class="hidden" data-table-of-contents="bottom">
  <p class="mt-4 font-medium flex items-center gap-2 related-docs-heading">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="w-4 h-4">
      <path d="M3 4h7a2 2 0 0 1 2 2v13a2 2 0 0 0-2-2H3z" />

      <path d="M21 4h-7a2 2 0 0 0-2 2v13a2 2 0 0 1 2-2h7z" />
    </svg>

    <span>Related topics</span>
  </p>

  <ul>
    <li><a href="https://github.com/cashfree/cashfree-quick-button" target="_blank">WordPress Quick Button Plugin</a></li>
    <li><a href="/docs/payments/online/go-live/whitelist">Whitelist Store URL</a></li>
    <li><a href="/docs/payments/online/go-live/checklist">Go Live Checklist</a></li>
  </ul>
</div>
