Razorpay URL Generator

Introduction to Dynamic URL Building and Payment Prefilling

In the highly competitive world of digital commerce, reducing friction during the checkout phase is the key to maximizing sales conversions. Every additional field a customer must fill out, and every extra click they have to make, directly correlates with an increased rate of abandoned shopping carts. Payment gateway platforms like Razorpay provide robust solutions (such as Razorpay Payment Pages) that allow merchants to set up hosted payment forms in minutes. However, a common challenge emerges when a seller has a single, main payment page but wants to sell multiple different variations of a product or dynamically track which specific item led to a purchase. Creating dozens of individual payment pages manually is highly inefficient and creates an administrative burden. Fortunately, Razorpay supports query parameter pre-filling, specifically via the product_name parameter.

By injecting a customized value into the URL query string, merchants can automatically set the product name field on the hosted payment form when the customer lands on the page. This prefilled name remains locked or visible during payment, ensuring that the receipt shows the exact product the customer intended to purchase. Generating these prefilled payment links manually requires a solid understanding of URL query syntax, delimiter characters, and browser-safe character encoding. An automated client-side URL builder simplifies this process, generating clean, ready-to-share links instantly as the user types. Because the tool operates entirely locally in the browser using client-side JavaScript, the merchant's customer-facing links and product names remain completely private, ensuring safe operational security at all times.

Dynamic link pre-filling is particularly useful for email marketing campaigns, social media advertisements, and automated PDF invoice generation. For example, if a merchant sends out an email offering a special discount on a "Premium Leather Wallet", they can generate a direct payment link with product_name=Premium%20Leather%20Wallet. When the recipient clicks the button in the email, the payment page opens with the product details already populated. This seamless transition significantly improves buyer experience and reduces the likelihood of purchase drop-offs, making it a critical strategy for modern digital entrepreneurs.

The History and Evolution of Razorpay and Online Payments in India

To understand the context of Razorpay's data exports and page query features, it is helpful to look at the history of the payment gateway market. Founded in 2014 by Harshil Mathur and Shashank Kumar, Razorpay was established at a time when integrating online payments in India was a complex, multi-week process requiring extensive paperwork, physical server configurations, and unstable merchant APIs. By introducing a developer-centric platform with clean API documentations, easy onboarding, and instant sandbox environments, Razorpay transformed how startups and digital businesses collected money online.

Following the demonetization drive in 2016 and the explosive growth of the Unified Payments Interface (UPI) developed by the National Payments Corporation of India (NPCI), online transactions in India grew exponentially. To manage this massive transaction volume, payment processors evolved from single-payment forms to complex subscription models, payment links, and customizable checkout buttons. During these checkout processes, customers can add multiple separate items to a cart. Because classical relational databases require complex table associations to store multi-item checkouts, payment interfaces often pack the list of items into a single text metadata field. This legacy convenience is why developers today must deal with parsing comma-separated lists when downloading transaction logs, and why prefilled checkout links are highly sought after to streamline customer acquisition.

The Mechanics of URL Structure and Percent-Encoding Standards

To construct dynamic web links programmatically, developers must follow the standards set by the Internet Engineering Task Force (IETF) in Request for Comments (RFC) 3986. A Uniform Resource Identifier (URI) is structured into distinct segments, including the scheme (such as https), the authority or domain (such as pages.razorpay.com), the path (such as /pl_XXXXXX/view), and the query string. The query string begins with a question mark (?) and contains key-value pairs separated by the ampersand (&) symbol.

A key requirement of URI standards is that certain characters are classified as reserved because they serve as syntactic delimiters. These include characters like the forward slash (/), question mark (?), colon (:), and ampersand (&). If a key-value parameter contains these reserved characters—or other non-ASCII characters such as spaces, accented letters, or emojis—they must be converted into a browser-safe format. This process is known as URL encoding or percent-encoding. Under percent-encoding rules, a space is converted to %20, a colon becomes %3A, and a forward slash becomes %2F. By using percent-encoding, the browser guarantees that the query string does not break the standard parsing routines of web servers or intermediate routing nodes.

For instance, if you try to pass the raw string "Premium Coffee & Mug" without encoding, the ampersand (&) will be interpreted as a query parameter separator, causing the parser to think that product_name=Premium Coffee and that there is a new, separate parameter named Mug with no value. This leads to complete truncation of your product title on the checkout form, demonstrating why percent-encoding is mathematically mandatory.

A JavaScript Code Block to Generate Prefilled Payment Links

For software developers building automated billing engines, inventory portals, or custom CRM workflows, generating prefilled URLs programmatically is a frequent task. The following JavaScript code demonstrates a robust function that validates a base payment page URL, handles query string delimiter rules (checking if a question mark already exists in the base link), percent-encodes the product name, and returns the optimized shareable URL:

function buildRazorpayPrefilledUrl(basePaymentUrl, productName) {
  // 1. Validate the base URL format
  let sanitizedUrl = basePaymentUrl.trim();
  if (!sanitizedUrl.startsWith("http://") && !sanitizedUrl.startsWith("https://")) {
    throw new Error("Invalid URL: Must start with http:// or https://");
  }
  
  // 2. Validate and sanitize the product name
  const cleanProduct = productName.trim();
  if (!cleanProduct) {
    throw new Error("Product name cannot be empty.");
  }
  
  // 3. Percent-encode the product name for URI safety
  const encodedProduct = encodeURIComponent(cleanProduct);
  
  // 4. Determine appropriate query parameter delimiter (? or &)
  const hasQuerySymbol = sanitizedUrl.includes("?");
  const separator = hasQuerySymbol ? "&" : "?";
  
  // 5. Construct and return the final prefilled URL
  return `${sanitizedUrl}${separator}product_name=${encodedProduct}`;
}

// Example evaluation
try {
  const baseLink1 = "https://pages.razorpay.com/pl_OJxmdxxlQ/view";
  const productA = "Gourmet Coffee Blend";
  const finalLink1 = buildRazorpayPrefilledUrl(baseLink1, productA);
  console.log("Prefilled Link 1:", finalLink1);
  
  // Case with pre-existing query parameter
  const baseLink2 = "https://pages.razorpay.com/pl_OJxmdxxlQ/view?referrer=email";
  const productB = "Special Edition Mug & Spoon";
  const finalLink2 = buildRazorpayPrefilledUrl(baseLink2, productB);
  console.log("Prefilled Link 2:", finalLink2);
  
  // Output:
  // Prefilled Link 1: https://pages.razorpay.com/pl_OJxmdxxlQ/view?product_name=Gourmet%20Coffee%20Blend
  // Prefilled Link 2: https://pages.razorpay.com/pl_OJxmdxxlQ/view?referrer=email&product_name=Special%20Edition%20Mug%20%26%20Spoon
} catch (error) {
  console.error("URL Generation Failed:", error.message);
}

In this programming code, the built-in JavaScript method encodeURIComponent() is utilized to handle the conversion of the product name. Unlike encodeURI(), which leaves characters like the ampersand (&) unchanged because they are valid URL characters, encodeURIComponent() encodes all delimiters. This is crucial for parameters, as an unencoded ampersand inside a product name (such as "Mug & Spoon") would otherwise be interpreted by the payment gateway as the start of a new, separate parameter field, breaking the input payload.

Furthermore, developers should pay attention to link length limits. While modern browsers can handle URLs containing up to 2,000 characters, legacy systems or social media chat interfaces can occasionally truncate very long query strings. Keeping product names concise ensures that your links remain compatible across all digital messaging platforms.

Strategic Comparison of URL Building Methodologies

To help choose the right link generation strategy for your business operations, the table below compares the differences between manual editing, dedicated builder tools, and automated backend scripts:

As indicated in the table, using a dedicated clientside web tool provides the ideal balance of speed and safety for marketing and non-technical staff. By automating the validation and character escaping, the risk of breaking links is eliminated. In contrast, manual typing is prone to errors that can lead to broken checkout buttons and lost sales, while backend scripts require programming overhead and deployment schedules.