How to Add a Direct Mobile UPI Payment Button on WordPress (No Plugins)
Step-by-step tutorial and tested code snippets to implement direct UPI payment buttons (Google Pay, PhonePe, Paytm) on WordPress without third-party plugins.
Mobile UPI payment interface on smartphone
For Indian freelancers, service professionals, and small businesses running on WordPress, setting up a full payment gateway for simple invoices or consultation fees often introduces unnecessary gateway fees (2% to 3% plus GST) and checkout friction. By adding a direct UPI intent payment button, mobile visitors can tap once to launch their installed payment app (Google Pay, PhonePe, Paytm, or BHIM) and transfer funds directly to your bank account.
1. How UPI Deep-Linking Works on Mobile
UPI intent buttons use the standardized `upi://pay` URI protocol established by the National Payments Corporation of India (NPCI). When a visitor on an Android or iOS smartphone taps a link formatted with this protocol, the mobile operating system opens the native UPI app chooser. When the user selects an app, the payee VPA, amount, and note are pre-populated automatically.
2. Understanding Key UPI URL Parameters
The NPCI `upi://pay` standard requires specific query parameters: • `pa` (Payee Address): Your registered UPI ID (e.g. `yourname@okaxis` or `merchant@upi`). • `pn` (Payee Name): The business or individual name displayed in the banking app. • `am` (Amount): The payment amount in INR (e.g., `499` or `1500.00`). • `cu` (Currency): Must always be set to `INR`. • `tn` (Transaction Note): Short reference note (e.g., `Consultation Fee` or `Invoice 104`).
3. Copy-Paste HTML & CSS Snippet for WordPress
You can place this clean, responsive button into any WordPress page, sidebar, or Elementor layout using a Custom HTML block:
<!-- Direct UPI Payment Button -->
<div class="upi-payment-box">
<a
href="upi://pay?pa=yourvpa@upi&pn=Govind&am=499&cu=INR&tn=Consultation%20Fee"
class="upi-btn"
rel="nofollow"
>
<span class="upi-icon">âš¡</span>
Pay ₹499 via UPI (GPay / PhonePe / Paytm)
</a>
<p class="upi-note">Tap to launch your installed UPI app on mobile</p>
</div>
<style>
.upi-payment-box {
text-align: center;
margin: 1.5rem 0;
}
.upi-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #5f259f;
color: #ffffff !important;
font-size: 1rem;
font-weight: 600;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
.upi-btn:hover {
opacity: 0.9;
}
.upi-note {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.5rem;
}
</style>4. Creating a Dynamic Shortcode in functions.php
If you want to reuse the button across multiple pages with different amounts or descriptions, add this shortcode helper to your child theme's `functions.php` file:
/**
* Register [upi_button] shortcode
* Usage: [upi_button vpa="name@upi" name="Govind" amount="999" note="SEO Audit"]
*/
function custom_upi_button_shortcode( $atts ) {
$args = shortcode_atts( array(
'vpa' => 'yourvpa@upi',
'name' => 'Govind',
'amount' => '499',
'note' => 'Service Payment',
), $atts, 'upi_button' );
$vpa = sanitize_text_field( $args['vpa'] );
$name = rawurlencode( sanitize_text_field( $args['name'] ) );
$amount = sanitize_text_field( $args['amount'] );
$note = rawurlencode( sanitize_text_field( $args['note'] ) );
$upi_url = "upi://pay?pa={$vpa}&pn={$name}&am={$amount}&cu=INR&tn={$note}";
return sprintf(
'<div class="upi-wrap"><a href="%s" class="upi-btn">Pay ₹%s via UPI</a></div>',
esc_url( $upi_url, array( 'upi' ) ),
esc_html( $amount )
);
}
add_shortcode( 'upi_button', 'custom_upi_button_shortcode' );5. Mobile Behavior, Desktop Fallbacks, and Limitations
Important technical considerations to keep in mind: • **Desktop Limitation:** Desktop web browsers do not support the `upi://` protocol natively. On desktop screens, consider displaying a static QR code or direct bank transfer details alongside the button. • **No Automatic Webhook:** Unlike full payment gateways (Razorpay, Cashfree), direct UPI intent links do not send automated server callbacks to update order statuses in WooCommerce. For automated order fulfillment, use a gateway API. • **App Variations:** Certain banking apps on iOS may restrict transaction notes or require user confirmation.
- Use the standardized upi://pay protocol with pa, pn, am, cu, and tn parameters.
- Keep code lightweight using custom HTML or a simple WordPress shortcode.
- Test the payment link on both Android Chrome and iOS Safari devices.
- For high-volume automated e-commerce, pair with our Next.js payment gateway tutorials.
Digital marketer and web developer working across web development, technical SEO, performance marketing, website security and analytics.
