Checkout Widget
The Checkout widget in Zoho Payments provides a streamlined and secure way to facilitate payments directly on your website. Use the Checkout Widget APIs to embed the widget on your website and collect payments.
Prerequisites
- An active Zoho Payments account.
- An API Key. You can generate one under
Zoho Payments > Settings > Developer Space.
Note : Only users with Account Owner, Admin, or Developer roles in Zoho Payments can generate and view API keys.
Integrate Widget
To use Zoho Payments' checkout widget in your application, add this script to your webpage.
<script src="https://static.zohocdn.com/zpay/zpay-js/v1/zpayments.js"></script>
Instance Creation
Create an instance for ZPayments using the following parameters:
config parameter
account_id
string
(Required)
The Zoho Payments account ID.
domain
string
(Required)
The edition of Zoho Payments you are using. This is represented by a 2-letter country code (e.g.,
IN). otherOptions.api_key
string
(Required)
The API key generated in Zoho Payments.
let config = {
"account_id": "23137556",
"domain": "IN",
"otherOptions" : {
"api_key": "1000.41d9xxxxxxxxxxxxxxxxxxxxxxxxc2d1.8fccxxxxxxxxxxxxxxxxxxxxxxxx125f"
}
}
let instance = new window.ZPayments(config);
Initiate Payment
Initiate a payment using the following code.
options parameter
amount
string
(Required)
The payment amount, it can be any non-negative value.
currency_code
string
(Required)
Currency of the payment amount, represented by a 3-letter currency code (e.g.,
INR ).
payments_session_id
string
(Required)
The Payment Session ID is a unique identifier created for each payment session. Learn how to create a payment session.
description
string
(Required)
A description of the payment, which will be displayed in the checkout widget's header.
currency_symbol
string
The currency symbol corresponding to the payment, such as
₹.
business
string
Business Name of the merchant, which will be displayed in the checkout widget's header.
logo
string
The URL of the business logo to be displayed in the checkout widget.
payment_method
string
The default payment method to be displayed in the checkout widget. It can be
card, upi, and net_banking. If no payment method is provided, all options will be displayed by default. address.name
string
The name of the customer or cardholder, which will be prefilled in the checkout widget's name field.
address.email
string
The email address of the customer, which will be prefilled in the checkout widget's email field.
address.phone
string
The phone number of the customer, which will be prefilled in the checkout widget's phone number field.
invoice_number
string
The invoice number associated with the payment.
async function initiatePayment() {
try {
let options = {
"amount": "100.5",
"currency_code": "INR",
"payments_session_id": "2000000012001",
"currency_symbol": "₹",
"business": "Zylker",
"description": "Purchase of Zylker electronics.",
"address": {
"name": "Canon",
"email": "canonbolt@zylker.com",
"phone": "98XXXXXXXX"
}
};
let data = await instance.requestPaymentMethod(options);
} catch (err) {
if (err.code != 'widget_closed') {
// Handle Error
}
} finally {
await instance.close();
}
}
initiatePayment();
Widget Response
After initiating the payment successfully, the checkout widget will return a response with the payment_id
{
"payment_id": "2299000000189035",
"message": "Payment successful!"
}
{
"code": "error",
"message": "Payment failed!"
}