Implement Thematic Changes in Payment Links Checkout Section

You can modify the top bar theme element of the Checkout UI on the payment request page to restrict customers from navigating to the initial screen of Checkout and selecting a different payment method.

Original vs Customized Checkout🔗

Given below is a comparison of Checkout before and after Checkout UI theme changes.

Normal Checkout	Customized Checkout

Sample Code🔗

Here is a sample request and response using this parameter.

 Request Response
Copycurl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X POST https://api.razorpay.com/v1/invoices/ \
-H 'Content-type: application/json' \
-d '{
  "type":"link",
  "amount":6899,
  "receipt":"#9869",
  "description":"Cloud Computing",
  "expire_by": 1579257270,
  "partial_payment":1,
  "customer":{
    "name":"Gaurav Kumar",
    "contact":"9999999998",
    "email":"gaurav.kumar@example.com"
  },
  #customization parameters start below#
  "options":{
    "checkout":{
      "theme":{
        "hide_topbar": true
      }
    }
  }
}'
Copy{
  "id":"inv_DkUZ3qvjS6Nt4S",
  "entity":"invoice",
  "receipt":"#9869",
  "invoice_number":"#9869",
  "customer_id":"cust_DjLt84my82blgz",
  "customer_details":{
    "id":"cust_DjLt84my82blgz",
    "name":"Gaurav Kumar",
    "email":"gaurav.kumar@example.com",
    "contact":"9999999998",
    "gstin":null,
    "billing_address":null,
    "shipping_address":null,
    "customer_name":"Gaurav Kumar",
    "customer_email":"gaurav.kumar@example.com",
    "customer_contact":"9999999998"
  },
  "order_id":"order_DjLt86lTzUOAx4",
  "line_items":[],
  "payment_id":null,
  "status":"issued",
  "expire_by":1579257270,
  "issued_at":1574418915,
  "paid_at":null,
  "cancelled_at":null,
  "expired_at":null,
  "sms_status":"pending",
  "email_status":"pending",
  "date":1574418915,
  "terms":null,
  "partial_payment":true,
  "gross_amount":6899,
  "tax_amount":0,
  "taxable_amount":0,
  "amount":6899,
  "amount_paid":0,
  "amount_due":6899,
  "currency":"INR",
  "description":"Cloud Computing",
  "notes":[],
  "comment":null,
  "short_url":"https://rzp.io/i/u5lx9Zp",
  "view_less":true,
  "billing_start":null,
  "billing_end":null,
  "type":"link",
  "group_taxes_discounts":false,
  "created_at":1574418915
}

Request Parameters🔗

List of request parameters to be used with the Create Payment Link API to customize the Checkout UI theme element.

options

array Options to show or hide the top bar. Parent parameter under which the checkout and theme child parameters must be passed.

checkout mandatory

array The parameter for the checkout section. theme is its child parameter.

theme.hide_topbar optional: boolean Used to display or hide the top bar on the Checkout. This bar shows the selected payment method, phone number and gives the customer the option to navigate to the initial Checkout screen and change the payment method. Possible values are:
- true - Hides the top bar
- false - Displays the top bar. Defaults to false.