razorpay-react-sdk
Version:
A simple Razorpay integration package for React & Next.js with TypeScript support.
218 lines (217 loc) • 9.54 kB
TypeScript
import { Config } from "./Config";
import { HiddenFields } from "./HiddenFields";
import { ModalOptions } from "./Modal";
import { PaymentResponse } from "./PaymentResponse";
import { Prefill } from "./Prefill";
import { ReadonlyFields } from "./ReadonlyFields";
import { Retry } from "./Retry";
import { Theme } from "./Theme";
/**
* Options to configure the Razorpay payment instance.
*/
export interface RazorpayOptions {
/**
* Your API Key ID generated from the Razorpay Dashboard.
*/
key: string;
/**
* Payment amount in the smallest currency sub-unit (e.g., 10000 = ₹100).
*
* For example:
* - If the amount to be charged is ₹299.00, then pass 29900 in this field.
* - In the case of three decimal currencies, such as KWD, BHD, and OMR:
* - To accept a payment of 295.991, pass the value as 295990.
* - In the case of zero decimal currencies, such as JPY:
* - To accept a payment of 295, pass the value as 295.
*
* This approach ensures proper handling of different currency precision requirements
* by passing the corresponding value in the smallest sub-unit (e.g., paise, fils, etc.).
*/
amount: number;
/**
* The currency in which the payment should be made by the customer.
*
* See the list of supported currencies here:
* [Razorpay Supported Currencies](https://razorpay.com/docs/payments/international-payments/#supported-currencies)
*/
currency: string;
/**
* Your Business/Enterprise name shown on the Checkout form.
*
* For example, **Acme Corp**.
*/
name: string;
/**
* Description of the purchase item shown on the Checkout form. It should start with an alphanumeric character.
*/
description?: string;
/**
* Link to an image (usually your business logo) shown on the Checkout form. Can also be a **base64** string if you are not loading the image from a network.
*/
image?: string;
/**
* Order ID generate via [Orders API](https://razorpay.com/docs/api/orders/)
*/
order_id: string;
/**
* Prefilled user details for faster checkout.
*/
prefill?: Prefill;
/**
* Represents additional information that can be stored about the payment.
*
* This is an optional property and allows you to store a set of key-value pairs.
*
* The object can hold a maximum of 15 key-value pairs, with each key or value being
* a string with a maximum length of 256 characters.
*
* Example:
* ```typescript
* notes: {
* "address": "Razorpay Corporate Office",
* "customerNote": "Please deliver by end of the day"
* }
* ```
*
*/
notes?: {
[key: string]: string;
};
/**
* Optional thematic options to modify the appearance of the Checkout form.
*/
theme?: Theme;
/**
* Represents options to handle the Checkout modal.
*/
modal?: ModalOptions;
/**
* Represents the subscription ID for recurring payments via Razorpay Checkout.
*
* This is an optional string parameter. If you are accepting recurring payments using Razorpay Checkout,
* you should pass the relevant `subscription_id` to the Checkout.
*
* For more information on subscription integration with Razorpay Checkout, refer to:
* [Subscriptions on Checkout](https://razorpay.com/docs/api/payments/subscriptions/#checkout-integration)
*/
subscription_id?: string;
/**
* Represents the option to permit or restrict the customer from changing the card linked to the subscription.
*
* This is an optional boolean parameter. You can control whether customers are allowed to change the card
* linked to their subscription via the Checkout page. You can also manage this through the [hosted page](https://razorpay.com/docs/payments/subscriptions/payment-retries/#update-the-payment-method-via-our-hosted-page).
*
* Possible values:
* - `true`: Allows the customer to change the card from the Checkout page.
* - `false` (default): Does not allow the customer to change the card from the Checkout page.
*/
subscription_card_change?: boolean;
/**
* Represents whether recurring payments are accepted on Checkout via instruments such as emandate, paper NACH, and others.
*
* This is an optional boolean parameter. It determines if the Checkout allows [recurring (charge-at-will) payments](https://razorpay.com/docs/api/payments/recurring-payments/).
*
* Possible values:
* - `true`: You are accepting recurring payments via instruments like emandate, paper NACH, etc.
* - `false` (default): You are not accepting recurring payments.
*/
recurring?: boolean;
/**
* Represents the URL to which customers will be redirected upon successful payment.
*
* This is an optional string parameter. After a successful payment, the customer will be redirected to the specified `callback_url`.
*
* Ensure that the domain of the `callback_url` is allowlisted to avoid any issues with the redirection.
*/
callback_url?: string;
/**
* Determines whether to post a response to the event handler or redirect to the Callback URL after payment completion.
*
* This is an optional boolean parameter. If the `redirect` option is enabled, the customer will be redirected to the
* `callback_url` specified after a payment, even in the case of payment failure. The `callback_url` must be provided
* when using this parameter.
*
* Possible values:
* - `true`: The customer is redirected to the specified `callback_url` in case of payment failure.
* - `false` (default): The customer is shown the Checkout popup to retry the payment with the suggested next best option.
*/
redirect?: boolean;
/**
* Represents a unique identifier for the customer.
*
* This is an optional string parameter. The `customer_id` is used for:
* - [Local saved cards feature](https://razorpay.com/docs/payments/payment-methods/cards/features/saved-cards/#manage-saved-cards), allowing the customer to use previously saved payment methods.
* - Displaying static bank account details on Checkout in case the [Bank Transfer payment method](https://razorpay.com/docs/payments/payment-methods/bank-transfer/) is used.
*
* Ensure that the `customer_id` is unique to avoid any conflicts.
*/
customer_id?: string;
/**
* Determines whether to allow the saving of cards for future payments.
*
* This is an optional boolean parameter that specifies if the card-saving feature should be enabled for the customer.
* It can also be configured via the Dashboard.
*
* Possible values:
* - `true`: Enables the card saving feature, allowing customers to save their card details for future use.
* - `false` (default): Disables the card saving feature, meaning the customer’s card details will not be saved.
*/
remember_customer?: boolean;
/**
* Sets a timeout on Checkout, in seconds.
*
* This is an optional integer parameter. After the specified time limit (in seconds), the customer will no longer be able to use the Checkout.
*
* Example:
* - `timeout: 300` will set a 5-minute timeout for the Checkout session.
*/
timeout?: number;
/**
* Represents fields that are marked as read-only, preventing customers from editing them.
*
* This is an optional object containing settings for making specific fields (contact, email, and name) read-only.
* Each field can be set to either `true` (read-only) or `false` (default, editable).
*/
readonly?: ReadonlyFields;
/**
* Represents fields that are hidden from the customer.
*
* This is an optional object that allows you to hide specific fields (contact and email). When a field is set as hidden, the customer will not be able to view it.
*
* Each field can be set to either `true` (hidden) or `false` (default, visible).
*/
hidden?: HiddenFields;
/**
* Determines whether the OTP for cards and net banking pages is auto-read.
*
* This is an optional boolean parameter, and it is applicable from Android SDK version 1.5.9 and above.
*
* Possible values:
* - `true`: OTP is auto-read, allowing the system to automatically read the OTP from the SMS.
* - `false` (default): OTP is not auto-read, and the customer will need to enter the OTP manually.
*/
send_sms_hash?: boolean;
/**
* A boolean value that determines whether the payment page can be rotated according to the screen orientation.
* This field is applicable from Android SDK version 1.6.4 and above.
*
* Possible values:
* - `true`: The payment page can be rotated.
* - `false` (default): The payment page cannot be rotated.
*
* @since 1.6.4 (Android SDK version)
*/
allow_rotation?: boolean;
/**
* Parameters that enable retry of payment on the checkout.
*/
retry?: Retry;
config?: Config;
/**
* Success Callback function for handling the payment response.
* The function will alert the payment ID, order ID, and signature upon a successful payment.
*
* @param response - The response object returned by Razorpay Checkout.
*/
handler?: (response: PaymentResponse) => void;
}