Learn how to create a simple payment page and accept payments on your website using Zoho Payments. Customers can pay you through UPI, and credit cards.
Zoho Payments is a new payment gateway that lets you accept payments on your website. You can visit this sample store to see the Zoho Payment widget in action.
Unlike Stripe or RazorPay which are more mature payment gateways, Zoho Payments supports domestic payments only in INR (₹). In the initial release, merchants can only accept one-time payments and customers can pay you through UPI, net banking, and credit cards.
The onboarding process is simple and, once you upload your KYC documents, your account is approved within a few business days. There is no transaction fee for UPI payments while credit card transactions are subject to a 2% fee (excluding GST).
How to accept payments with Zoho Payments
In this tutorial, we will create a simple payment page in Google Apps Script and accept payments on our website using Zoho Payments.
Assuming you are signed up to Zoho Payments, you can go to the dashboard to find your “Account ID”. Next, go to Settings > Developer Space to find your “API Key”.
Setting up the Google Apps script
Open the Google Script project and copy it to your Google Drive.
Within the Apps Script Editor, go to the Function dropdown and select printZohoPaymentsRedirectUrl. Run the script and you should see the URL in the console window.
Go to your Zoho API console at api-console.zoho.in and add a new client. Set it Client Type who Server-based Applications And paste the redirect URL from the previuos step Authorized Redirect URLs area. Give it a name like your application MyPaymentsApp And click Create. Make a note of Client ID and Client Secret We will need it in the next step.
Go back to the Apps script editor and paste Client ID and Client Secret In the corresponding variables. You will also need to paste yours Account ID and API Key in the code.
Next, run printZohoPaymentsAuthUrl Function to generate authorization URL. Open the URL in a new tab, allow the app to access your Zoho Payments data and you should see a success message. We are limiting the scope of the application ZohoPay.payments.CREATE So that our application can only create payments but cannot read or update any other data.
Once the application is authorized, click Deploy button and select New Deployment. Select type as Web appSet it Execute as who Me and Who has access who Anyone. Click on Deploy And you will get your web payment page URL. Now anyone can pay by visiting this URL.
Technical details
The application uses the OAuth2 library to handle the authorization process and generate an access token to connect to the Zoho Payments API.
const getZohoPaymentsService_ = () => {
return OAuth2.createService(ZOHO_SERVICE_NAME)
.setAuthorizationBaseUrl('https://accounts.zoho.in/oauth/v2/auth')
.setTokenUrl('https://accounts.zoho.in/oauth/v2/token')
.setClientId(ZOHO_PAYMENTS_CLIENT_ID)
.setClientSecret(ZOHO_PAYMENTS_CLIENT_SECRET)
.setCallbackFunction('zohoOauthCallback')
.setPropertyStore(PropertiesService.getScriptProperties())
.setCache(CacheService.getScriptCache())
.setParam('response_type', 'code')
.setScope('ZohoPay.payments.CREATE')
.setParam('access_type', 'offline')
.setParam('prompt', 'consent');
};The createZohoPaymentSession The function is used to create a new payment session. It takes the amount as a parameter and returns the payment session details which are then sent to the Zoho payment widget on the client side.
const createZohoPaymentSession = (amount) => {
const service = getZohoPaymentsService_();
const baseUrl = 'https://payments.zoho.in/api/v1';
const apiUrl = `${baseUrl}/paymentsessions?account_id=${ZOHO_PAYMENTS_ACCOUNT_ID}`;
const response = UrlFetchApp.fetch(apiUrl, {
method: 'post',
payload: JSON.stringify({ amount, currency: 'INR' }),
headers: {
Authorization: `Zoho-oauthtoken ${service.getAccessToken()}`,
'Content-Type': 'application/json',
},
muteHttpExceptions: true,
});
const result = JSON.parse(response.getContentText());
const { message, payments_session } = result;
return message === 'success'
? {
account_id: ZOHO_PAYMENTS_ACCOUNT_ID,
api_key: ZOHO_ACCOUNT_API_KEY,
merchant_name: ZOHO_MERCHANT_NAME,
session_id: payments_session.payments_session_id,
order_amount: payments_session.amount,
}
: { error: message };
};You can find the complete code on GitHub.