Hosted Checkout

Hosted payments lets you handover the control of the entire checkout process to Razorpay thereby providing a seamless checkout experience to your customers. As the payment information entered by the customers is securely stored with Razorpay, you do not have to worry about implementing the PCI compliance requirements at your end.

How it Works#

Unlike the standard implementation of checkout where customers enter their payment details on a pop-up modal, hosted payments securely redirects customers to a Checkout page hosted at Razorpay. The payment details submitted by the customer in the Checkout form are sent to our server. Payments, from thereon, follow the usual payment flow.

Workflow#

To implement hosted payments you must do the following:

Create an Order.
Pass Checkout options.
Configure a callback.

1. Create an Order#

Each payment must be tied to a unique Razorpay Order and also have a one-to-one mapping with the order created at your end. Creating an Order has several advantages such as:

Combine multiple payment attempts for a single order
Automatically capture payments
Quick and easy database querying

 Request Response
Copycurl -u <YOUR_KEY>:<YOUR_SECRET> \
-X POST https://api.razorpay.com/v1/orders \
-H "Content-Type: application/json" \
-d '{
    "amount": "50000",
    "currency" : "INR",
    "receipt": "rcptid #1",
    "payment_capture": "0"
    }'
Copy{
  "id": "order_4xbQrmEoA5WJ0G",
  "entity": "order",
  "amount": 50000,
  "amount_paid": 0,
  "amount_due": 50000,
  "currency": "INR",
  "receipt": "rcptid #1",
  "status": "created",
  "attempts": 0,
  "notes": [],
  "created_at": 1455696638
}

Learn more about Orders API.

2. Pass Checkout Options#

The Checkout options are sent as form-data to the following URL in a POST request.

https://api.razorpay.com/v1/checkout/embedded

Checkout Options#

key_id mandatory

string Your <KEY_ID>. Enter the API Key_ID generated from the Dashboard. Learn how to generate your API Key here.

name mandatory

string The company name shown in checkout form.

descriptionoptional

string Description of the item purchased shown in the checkout form.

image optional

string URL of the logo that must appear on the checkout form. It is recommended to add the logo using the Razorpay Dashboard.

order_id mandatory

string Unique identifier of the Order, created using the Orders API.

prefill

The fields that can be pre-populated in the Checkout form.

[name] optional: string Name of the card holder.
[email] mandatory: string Email address of the customer.
[contact] mandatory: string Customer's phone number.
[method] optional: string The payment method that should be used for making the payment.

Possible values: card,netbanking,wallet,emi,upi.

notesoptional

jSON object An additional set of fields that you want to associate with the payment. You can add "shipping address", "alternate contact" in the Notes field. Refer API section on Notes for more information.

[Shipping address]: string 106, Razorpay, Bangalore
[Alternate contact]: string 9999999999

Note:
You can add upto 15 fields (key-value pairs) in the Notes parameters

callback_url mandatory

string Page to which the customers are redirected to after a successful payment. razorpay_payment_id, razorpay_order_id and razorpay_signature are sent as form-data through a POST request to the callback_url. Tip:
You can also utilize Razorpay Webhooks to get notified of different events such as payment authorization or payment failure. Learn how to enable webhooks from your Dashboard.

cancel_urloptional

string The URL customers are redirected to after the cancellation of a payment.

3. Configure a Callback#

Once payment is successful, the response parameters: razorpay_payment_id, razorpay_order_id and razorpay_signature are sent as form-data as a POST request to the callback_url. You can consume this response to verify the payment signature.

Note:
If a user cancels the transaction, a GET redirect request is made to the cancel_url.

Example#

A representative sample for accepting payment for ₹200:

 Example Checkout Script
Copy<form method="POST" action="https://api.razorpay.com/v1/checkout/embedded">
  <input type="hidden" name="key_id" value="YOUR_KEY_ID">
  <input type="hidden" name="order_id" value="razorpay_order_id">
  <input type="hidden" name="name" value="Acme Corp">
  <input type="hidden" name="description" value="A Wild Sheep Chase">
  <input type="hidden" name="image" value="https://cdn.razorpay.com/logos/BUVwvgaqVByGp2_large.png">
  <input type="hidden" name="prefill[name]" value="Gaurav Kumar">
  <input type="hidden" name="prefill[contact]" value="9123456780">
  <input type="hidden" name="prefill[email]" value="gaurav.kumar@example.com">
  <input type="hidden" name="notes[shipping address]" value="L-16, The Business Centre, 61 Wellfield Road, New Delhi - 110001">
  <input type="hidden" name="callback_url" value="https://example.com/payment-callback">
<input type="hidden" name="cancel_url" value="https://example.com/payment-cancel">
  <button>Submit</button>
</form>