Block to implement Razorpay payment gateway #1169
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@dkashikar is attempting to deploy a commit to the Typebot Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Auto Review SkippedDraft detected. Please check the settings in the CodeRabbit UI or the To trigger a single review, invoke the WalkthroughThe update introduces Razorpay payment integration into the Typebot Forge application, enabling functionalities like creating payment orders, displaying payment buttons, generating QR codes for transactions, and verifying payments. It includes the setup of authentication credentials, configuration options, and constants specific to Razorpay. Additionally, the Razorpay block is now enabled and incorporated into the existing schema of forged blocks. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 4
Configuration used: CodeRabbit UI
Files ignored due to path filters (4)
packages/forge/blocks/razorpay/package.jsonis excluded by:!**/*.jsonpackages/forge/blocks/razorpay/tsconfig.jsonis excluded by:!**/*.jsonpackages/forge/schemas/package.jsonis excluded by:!**/*.jsonpnpm-lock.yamlis excluded by:!**/*.yaml
Files selected for processing (11)
- packages/forge/blocks/razorpay/actions/createOrder.ts (1 hunks)
- packages/forge/blocks/razorpay/actions/createPaymentButton.ts (1 hunks)
- packages/forge/blocks/razorpay/actions/createQrCode.ts (1 hunks)
- packages/forge/blocks/razorpay/actions/verifyPayment.ts (1 hunks)
- packages/forge/blocks/razorpay/auth.ts (1 hunks)
- packages/forge/blocks/razorpay/baseOptions.ts (1 hunks)
- packages/forge/blocks/razorpay/constants.ts (1 hunks)
- packages/forge/blocks/razorpay/index.ts (1 hunks)
- packages/forge/blocks/razorpay/logo.tsx (1 hunks)
- packages/forge/repository/index.ts (1 hunks)
- packages/forge/schemas/index.ts (2 hunks)
Files skipped from review due to trivial changes (2)
- packages/forge/blocks/razorpay/constants.ts
- packages/forge/repository/index.ts
Additional comments: 5
packages/forge/blocks/razorpay/auth.ts (1)
- 3-13: The
authobject is well-defined and follows the expected structure for anAuthDefinition. The use ofoption.objectandoption.string.layoutis appropriate for defining the schema of the authentication object. The helper text provides a direct link to generate the API key and secret, which is a good user experience practice.packages/forge/blocks/razorpay/logo.tsx (1)
- 3-17: The
RazorpayLogocomponent is a straightforward React functional component returning an SVG. The SVG paths and attributes are hardcoded, which is acceptable for a logo component. There are no props validations or default props, but since the component is simple and only receives SVG props, this is not a concern.packages/forge/blocks/razorpay/index.ts (1)
- 10-18: The
razorpayblock is correctly created using thecreateBlockfunction. It includes the necessary components such asauth,baseOptions, andactions. TheLightLogois properly assigned to theRazorpayLogocomponent. The block's structure is consistent with the expected pattern for defining blocks in the Typebot Forge package.packages/forge/schemas/index.ts (1)
- 1-5: > 📝 NOTE
This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [2-22]
The import and inclusion of the
razorpayblock in theforgedBlocksarray are correct. The file follows the established pattern for including new blocks in the Typebot Forge package. Therazorpayblock is added to the array without disrupting the existing order or structure of the file.packages/forge/blocks/razorpay/baseOptions.ts (1)
- 4-42: The
baseOptionsobject is well-structured, usingoption.objectto define a set of configuration options. Each option is clearly labeled and includes helper text or tooltips where appropriate. Default values are provided for some options, which is a good practice to ensure that there are sensible defaults in place if the user does not specify a value.
Comment on lines
6
to
50
| export const verifyPayment = createAction({ | ||
| name: 'Verify Payment', | ||
| auth, | ||
| baseOptions, | ||
| options: option.object({ | ||
| paymentResponse: option.string.layout({ | ||
| label: 'Payment Response', | ||
| moreInfoTooltip: 'Payment response from Payment Button action', | ||
| }), | ||
| saveStatusInVariableId: option.string.layout({ | ||
| label: 'Payment Status', | ||
| inputType: 'variableDropdown', | ||
| }), | ||
| }), | ||
| getSetVariableIds: (options) => | ||
| options.saveStatusInVariableId ? [options.saveStatusInVariableId] : [], | ||
| run: { | ||
| server: async ({ credentials, options, variables, logs }) => { | ||
| if (!credentials.keySecret) | ||
| return logs.add( | ||
| 'Invalid razorpay secret. Please check your configuration.' | ||
| ) | ||
| if (!options.paymentResponse) | ||
| return logs.add( | ||
| 'Payment response is empty. Please check the logs for any error.' | ||
| ) | ||
| if (!options.saveStatusInVariableId) | ||
| return logs.add( | ||
| 'Payment Status variable is not specified. Please select a variable to save the payment status.' | ||
| ) | ||
|
|
||
| try { | ||
| const paymentResponse = JSON.parse(options.paymentResponse) | ||
|
|
||
| const payload = paymentResponse.razorpay_order_id + '|' + paymentResponse.razorpay_payment_id; | ||
| const expectedSignature = createHmac('sha256', credentials.keySecret).update(payload).digest('hex'); | ||
| variables.set(options.saveStatusInVariableId, expectedSignature == paymentResponse.razorpay_signature) | ||
| } catch (error) { | ||
| return logs.add(error as string) | ||
| } | ||
|
|
||
|
|
||
| }, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
The verifyPayment action is well-structured and includes proper error handling and logging. The use of createHmac for signature verification is appropriate. However, there is a potential security concern with the direct comparison of the expected signature and the payment response signature (line 42). A timing attack could be possible here, so it's recommended to use a constant-time comparison function to mitigate this risk.
- variables.set(options.saveStatusInVariableId, expectedSignature == paymentResponse.razorpay_signature)
+ variables.set(options.saveStatusInVariableId, crypto.timingSafeEqual(Buffer.from(expectedSignature), Buffer.from(paymentResponse.razorpay_signature)))Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
Suggested change
| export const verifyPayment = createAction({ | |
| name: 'Verify Payment', | |
| auth, | |
| baseOptions, | |
| options: option.object({ | |
| paymentResponse: option.string.layout({ | |
| label: 'Payment Response', | |
| moreInfoTooltip: 'Payment response from Payment Button action', | |
| }), | |
| saveStatusInVariableId: option.string.layout({ | |
| label: 'Payment Status', | |
| inputType: 'variableDropdown', | |
| }), | |
| }), | |
| getSetVariableIds: (options) => | |
| options.saveStatusInVariableId ? [options.saveStatusInVariableId] : [], | |
| run: { | |
| server: async ({ credentials, options, variables, logs }) => { | |
| if (!credentials.keySecret) | |
| return logs.add( | |
| 'Invalid razorpay secret. Please check your configuration.' | |
| ) | |
| if (!options.paymentResponse) | |
| return logs.add( | |
| 'Payment response is empty. Please check the logs for any error.' | |
| ) | |
| if (!options.saveStatusInVariableId) | |
| return logs.add( | |
| 'Payment Status variable is not specified. Please select a variable to save the payment status.' | |
| ) | |
| try { | |
| const paymentResponse = JSON.parse(options.paymentResponse) | |
| const payload = paymentResponse.razorpay_order_id + '|' + paymentResponse.razorpay_payment_id; | |
| const expectedSignature = createHmac('sha256', credentials.keySecret).update(payload).digest('hex'); | |
| variables.set(options.saveStatusInVariableId, expectedSignature == paymentResponse.razorpay_signature) | |
| } catch (error) { | |
| return logs.add(error as string) | |
| } | |
| }, | |
| }, | |
| }) | |
| export const verifyPayment = createAction({ | |
| name: 'Verify Payment', | |
| auth, | |
| baseOptions, | |
| options: option.object({ | |
| paymentResponse: option.string.layout({ | |
| label: 'Payment Response', | |
| moreInfoTooltip: 'Payment response from Payment Button action', | |
| }), | |
| saveStatusInVariableId: option.string.layout({ | |
| label: 'Payment Status', | |
| inputType: 'variableDropdown', | |
| }), | |
| }), | |
| getSetVariableIds: (options) => | |
| options.saveStatusInVariableId ? [options.saveStatusInVariableId] : [], | |
| run: { | |
| server: async ({ credentials, options, variables, logs }) => { | |
| if (!credentials.keySecret) | |
| return logs.add( | |
| 'Invalid razorpay secret. Please check your configuration.' | |
| ) | |
| if (!options.paymentResponse) | |
| return logs.add( | |
| 'Payment response is empty. Please check the logs for any error.' | |
| ) | |
| if (!options.saveStatusInVariableId) | |
| return logs.add( | |
| 'Payment Status variable is not specified. Please select a variable to save the payment status.' | |
| ) | |
| try { | |
| const paymentResponse = JSON.parse(options.paymentResponse) | |
| const payload = paymentResponse.razorpay_order_id + '|' + paymentResponse.razorpay_payment_id; | |
| const expectedSignature = createHmac('sha256', credentials.keySecret).update(payload).digest('hex'); | |
| variables.set(options.saveStatusInVariableId, crypto.timingSafeEqual(Buffer.from(expectedSignature), Buffer.from(paymentResponse.razorpay_signature))) | |
| } catch (error) { | |
| return logs.add(error as string) | |
| } | |
| }, | |
| }, | |
| }) |
Comment on lines
7
to
66
| export const createOrder = createAction({ | ||
| name: 'Payment Order', | ||
| auth, | ||
| baseOptions, | ||
| options: option.object({ | ||
| amount: option.string.layout({ | ||
| label: 'Amount', | ||
| moreInfoTooltip: 'Amount to be paid', | ||
| isRequired: true | ||
| }), | ||
| uid: option.string.layout({ | ||
| label: 'Transaction ID', | ||
| moreInfoTooltip: 'Any unique id for the transaction' | ||
| }), | ||
| saveOrderInVariableId: option.string.layout({ | ||
| label: 'Save Order ID', | ||
| inputType: 'variableDropdown', | ||
| }), | ||
| }), | ||
| getSetVariableIds: (options) => | ||
| options.saveOrderInVariableId ? [options.saveOrderInVariableId] : [], | ||
| run: { | ||
| server: async ({ credentials, options, variables, logs }) => { | ||
| if (!options.amount || !parseInt(options.amount)) | ||
| return logs.add( | ||
| 'Amount is empty. Please provide the amount to generate the QR code.' | ||
| ) | ||
| if (!options.saveOrderInVariableId) | ||
| return logs.add( | ||
| 'Order ID variable is not specified. Please select a variable to save the generated order id.' | ||
| ) | ||
|
|
||
| try { | ||
| const notes: Record<string, string> = {} | ||
| notes[options.uidLabel ?? defaultUidLabel] = options.uid ?? '' | ||
| const order = { | ||
| currency: options.currency ?? defaultCurrency, | ||
| amount: options.amount, | ||
| receipt: options.uid ?? '', | ||
| notes: notes | ||
| } | ||
|
|
||
| const response: Record<string, string> = await got.post(`${apiBaseUrl}/orders`, { | ||
| headers: { | ||
| "Content-Type": "application/json" | ||
| }, | ||
| username: options.keyId, | ||
| password: credentials.keySecret, | ||
| json: order, | ||
| }) | ||
| .json() | ||
|
|
||
| variables.set(options.saveOrderInVariableId, response.id) | ||
| } catch (error) { | ||
| return logs.add(error as string) | ||
| } | ||
|
|
||
| }, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
The createOrder action is well-structured, with appropriate error handling and logging. The use of got for HTTP requests is consistent with modern JavaScript practices. However, there is a potential issue with the error handling in the catch block (line 61). The error is cast to a string, which may not provide useful information if the error object contains more details. It would be better to log the error message or the entire error object.
- return logs.add(error as string)
+ return logs.add(`Error creating order: ${error.message}`)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
Suggested change
| export const createOrder = createAction({ | |
| name: 'Payment Order', | |
| auth, | |
| baseOptions, | |
| options: option.object({ | |
| amount: option.string.layout({ | |
| label: 'Amount', | |
| moreInfoTooltip: 'Amount to be paid', | |
| isRequired: true | |
| }), | |
| uid: option.string.layout({ | |
| label: 'Transaction ID', | |
| moreInfoTooltip: 'Any unique id for the transaction' | |
| }), | |
| saveOrderInVariableId: option.string.layout({ | |
| label: 'Save Order ID', | |
| inputType: 'variableDropdown', | |
| }), | |
| }), | |
| getSetVariableIds: (options) => | |
| options.saveOrderInVariableId ? [options.saveOrderInVariableId] : [], | |
| run: { | |
| server: async ({ credentials, options, variables, logs }) => { | |
| if (!options.amount || !parseInt(options.amount)) | |
| return logs.add( | |
| 'Amount is empty. Please provide the amount to generate the QR code.' | |
| ) | |
| if (!options.saveOrderInVariableId) | |
| return logs.add( | |
| 'Order ID variable is not specified. Please select a variable to save the generated order id.' | |
| ) | |
| try { | |
| const notes: Record<string, string> = {} | |
| notes[options.uidLabel ?? defaultUidLabel] = options.uid ?? '' | |
| const order = { | |
| currency: options.currency ?? defaultCurrency, | |
| amount: options.amount, | |
| receipt: options.uid ?? '', | |
| notes: notes | |
| } | |
| const response: Record<string, string> = await got.post(`${apiBaseUrl}/orders`, { | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| username: options.keyId, | |
| password: credentials.keySecret, | |
| json: order, | |
| }) | |
| .json() | |
| variables.set(options.saveOrderInVariableId, response.id) | |
| } catch (error) { | |
| return logs.add(error as string) | |
| } | |
| }, | |
| }, | |
| }) | |
| } catch (error) { | |
| return logs.add(`Error creating order: ${error.message}`) | |
| } |
Comment on lines
10
to
105
| export const createQrCode = createAction({ | ||
| name: 'Generate a QR Code', | ||
| auth, | ||
| baseOptions, | ||
| options: option.object({ | ||
| amount: option.string.layout({ | ||
| label: 'Amount', | ||
| moreInfoTooltip: 'Amount to be paid', | ||
| isRequired: true | ||
| }), | ||
| uid: option.string.layout({ | ||
| label: 'Transaction ID', | ||
| moreInfoTooltip: 'Any unique id for the transaction' | ||
| }), | ||
| name: option.string.layout({ | ||
| accordion: 'Advanced Configuration', | ||
| label: 'QR Code Name', | ||
| moreInfoTooltip: 'Name of the QR Code', | ||
| defaultValue: 'QR Code' | ||
| }), | ||
| usage: option.enum(['single_use', 'multiple_use']).layout({ | ||
| accordion: 'Advanced Configuration', | ||
| label: 'Usage', | ||
| moreInfoTooltip: 'Will the qr code be used once or multiple times', | ||
| defaultValue: 'single_use' | ||
| }), | ||
| fixed_amount: option.boolean.layout({ | ||
| accordion: 'Advanced Configuration', | ||
| label: 'Fixed Amount', | ||
| moreInfoTooltip: 'Is the amount fixed', | ||
| defaultValue: true | ||
| }), | ||
| valid_till: option.string.layout({ | ||
| accordion: 'Advanced Configuration', | ||
| label: 'Valid Till', | ||
| moreInfoTooltip: 'How long is the QR code valid till', | ||
| defaultValue: '900' | ||
| }), | ||
| saveUrlInVariableId: option.string.layout({ | ||
| label: 'Save QR code image URL', | ||
| inputType: 'variableDropdown', | ||
| }), | ||
| }), | ||
| getSetVariableIds: (options) => | ||
| options.saveUrlInVariableId ? [options.saveUrlInVariableId] : [], | ||
| run: { | ||
| server: async ({ credentials, options, variables, logs }) => { | ||
| if (!options.amount || !parseInt(options.amount)) | ||
| return logs.add( | ||
| 'Amount is empty. Please provide the amount to generate the QR code.' | ||
| ) | ||
| if (!options.saveUrlInVariableId) | ||
| return logs.add( | ||
| 'QR code image URL is not specified. Please select a variable to save the generated QR code image.' | ||
| ) | ||
|
|
||
| const delta = parseInt(options.valid_till ?? '900') | ||
| const close_by = delta > 900 ? Math.floor(Date.now() / 1000) + delta : Math.floor(Date.now() / 1000) + 900 | ||
| const notes: Record<string, string> = {} | ||
| notes[options.uidLabel ?? 'vdsid'] = options.uid ?? `${close_by}` | ||
| try { | ||
| const qrcode = { | ||
| "type": "upi_qr", | ||
| "name": options.name, | ||
| "usage": options.usage ?? 'single_use', | ||
| "fixed_amount": options.fixed_amount ?? true, | ||
| "payment_amount": options.amount, | ||
| "description": `For ${options.name ?? 'Razorpay'}`, | ||
| "close_by": close_by, | ||
| "notes": notes | ||
| } | ||
|
|
||
| const response: Record<string, string> = await got.post(`${apiBaseUrl}/payments/qr_codes`, { | ||
| headers: { | ||
| "Content-Type": "application/json" | ||
| }, | ||
| username: options.keyId, | ||
| password: credentials.keySecret, | ||
| json: qrcode, | ||
| }) | ||
| .json() | ||
|
|
||
| const url = await uploadFileToBucket({ | ||
| file: await generateQrCodeBuffer(response.image_content), | ||
| key: `tmp/qrcodes/${createId() + createId()}.png`, | ||
| mimeType: 'image/png', | ||
| }) | ||
|
|
||
| variables.set(options.saveUrlInVariableId, url) | ||
| } catch (error) { | ||
| return logs.add(error as string) | ||
| } | ||
|
|
||
| }, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
The createQrCode action is well-structured and includes proper error handling and logging. The use of uploadFileToBucket for storing the QR code image is appropriate. However, there is a potential issue with the default value for valid_till (line 46). The default value is a string, but it is used in a calculation as a number (line 66). It would be safer to ensure that the default value is a number or to parse it as a number before using it in calculations.
- const delta = parseInt(options.valid_till ?? '900')
+ const delta = parseInt(options.valid_till) || 900Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
Suggested change
| export const createQrCode = createAction({ | |
| name: 'Generate a QR Code', | |
| auth, | |
| baseOptions, | |
| options: option.object({ | |
| amount: option.string.layout({ | |
| label: 'Amount', | |
| moreInfoTooltip: 'Amount to be paid', | |
| isRequired: true | |
| }), | |
| uid: option.string.layout({ | |
| label: 'Transaction ID', | |
| moreInfoTooltip: 'Any unique id for the transaction' | |
| }), | |
| name: option.string.layout({ | |
| accordion: 'Advanced Configuration', | |
| label: 'QR Code Name', | |
| moreInfoTooltip: 'Name of the QR Code', | |
| defaultValue: 'QR Code' | |
| }), | |
| usage: option.enum(['single_use', 'multiple_use']).layout({ | |
| accordion: 'Advanced Configuration', | |
| label: 'Usage', | |
| moreInfoTooltip: 'Will the qr code be used once or multiple times', | |
| defaultValue: 'single_use' | |
| }), | |
| fixed_amount: option.boolean.layout({ | |
| accordion: 'Advanced Configuration', | |
| label: 'Fixed Amount', | |
| moreInfoTooltip: 'Is the amount fixed', | |
| defaultValue: true | |
| }), | |
| valid_till: option.string.layout({ | |
| accordion: 'Advanced Configuration', | |
| label: 'Valid Till', | |
| moreInfoTooltip: 'How long is the QR code valid till', | |
| defaultValue: '900' | |
| }), | |
| saveUrlInVariableId: option.string.layout({ | |
| label: 'Save QR code image URL', | |
| inputType: 'variableDropdown', | |
| }), | |
| }), | |
| getSetVariableIds: (options) => | |
| options.saveUrlInVariableId ? [options.saveUrlInVariableId] : [], | |
| run: { | |
| server: async ({ credentials, options, variables, logs }) => { | |
| if (!options.amount || !parseInt(options.amount)) | |
| return logs.add( | |
| 'Amount is empty. Please provide the amount to generate the QR code.' | |
| ) | |
| if (!options.saveUrlInVariableId) | |
| return logs.add( | |
| 'QR code image URL is not specified. Please select a variable to save the generated QR code image.' | |
| ) | |
| const delta = parseInt(options.valid_till ?? '900') | |
| const close_by = delta > 900 ? Math.floor(Date.now() / 1000) + delta : Math.floor(Date.now() / 1000) + 900 | |
| const notes: Record<string, string> = {} | |
| notes[options.uidLabel ?? 'vdsid'] = options.uid ?? `${close_by}` | |
| try { | |
| const qrcode = { | |
| "type": "upi_qr", | |
| "name": options.name, | |
| "usage": options.usage ?? 'single_use', | |
| "fixed_amount": options.fixed_amount ?? true, | |
| "payment_amount": options.amount, | |
| "description": `For ${options.name ?? 'Razorpay'}`, | |
| "close_by": close_by, | |
| "notes": notes | |
| } | |
| const response: Record<string, string> = await got.post(`${apiBaseUrl}/payments/qr_codes`, { | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| username: options.keyId, | |
| password: credentials.keySecret, | |
| json: qrcode, | |
| }) | |
| .json() | |
| const url = await uploadFileToBucket({ | |
| file: await generateQrCodeBuffer(response.image_content), | |
| key: `tmp/qrcodes/${createId() + createId()}.png`, | |
| mimeType: 'image/png', | |
| }) | |
| variables.set(options.saveUrlInVariableId, url) | |
| } catch (error) { | |
| return logs.add(error as string) | |
| } | |
| }, | |
| }, | |
| }) | |
| const delta = parseInt(options.valid_till) || 900 |
Comment on lines
6
to
173
| amount: options.amount, | ||
| keyId: options.keyId, | ||
| orderId: options.orderId ?? '', | ||
| uid: options.uid ?? null, | ||
| name: options.name ?? null, | ||
| email: options.email ?? null, | ||
| contact: options.contact ?? null, | ||
| currency: options.currency ?? defaultCurrency, | ||
| companyLogo: options.companyLogo ?? null, | ||
| companyName: options.companyName ?? null, | ||
| themeColor: options.themeColor ?? defaultThemeColor, | ||
| uidLabel: options.uidLabel ?? defaultUidLabel, | ||
| rzpScriptUrl: rzpScriptUrl | ||
| }, | ||
| content: ` | ||
| function TR() { | ||
| // Store callbacks for different actions | ||
| this.callbacks = {}; | ||
|
|
||
| // Method to handle "init" action | ||
| this.init = function(callback) { | ||
| console.log('Initializing...'); | ||
| window.rzp = this | ||
| const rzpScript = document.createElement('script'); | ||
| rzpScript.src = rzpScriptUrl; | ||
| rzpScript.onload = function() { | ||
|
|
||
| const rzpButton = document.createElement('button'); | ||
| rzpButton.classList.add("py-2", "px-4", "font-semibold", "focus:outline-none", "filter", "hover:brightness-90", "active:brightness-75", "disabled:opacity-50", "disabled:cursor-not-allowed", "disabled:brightness-100", "flex", "justify-center", "typebot-button", "w-full"); | ||
| rzpButton.textContent = "Pay"; | ||
|
|
||
| var rzpoptions = { | ||
| "key": keyId, | ||
| "amount": amount, | ||
| "currency": currency, | ||
| "name": companyName, | ||
| "description": companyName, | ||
| "image": companyLogo, | ||
| "order_id": orderId, | ||
| "prefill": { | ||
| "name": name, | ||
| "email": email, | ||
| "contact": contact | ||
| }, | ||
| "handler": function (response) { | ||
|
|
||
| rzpButton.disabled = true; | ||
| rzpButton.classList.replace("typebot-button", "typebot-guest-bubble") | ||
|
|
||
| if (rzp.callbacks['success']) { | ||
| rzp.callbacks['success'](response); | ||
| } | ||
| }, | ||
| "notes": { | ||
| uidLabel: uid | ||
| }, | ||
| "theme": { | ||
| "color": themeColor | ||
| } | ||
| }; | ||
| var rzp1 = new Razorpay(rzpoptions); | ||
|
|
||
| rzpButton.onclick = function(e){ | ||
| rzp1.open(); | ||
| e.preventDefault(); | ||
| } | ||
|
|
||
| typebotElement.appendChild(rzpButton); | ||
| callback(); | ||
|
|
||
| } | ||
| typebotElement.appendChild(rzpScript); | ||
| }; | ||
|
|
||
| // Method to handle "on" action | ||
| this.on = function(options) { | ||
| if (options && options.action && options.callback) { | ||
|
|
||
| // Store the callback for the specified action | ||
| this.callbacks[options.action] = options.callback; | ||
| } else { | ||
| console.error('Invalid "on" action configuration'); | ||
| } | ||
| }; | ||
|
|
||
| } | ||
|
|
||
| const rzp1 = new TR(); | ||
|
|
||
| rzp1.init(function() { | ||
| console.log('Initialization complete'); | ||
| }); | ||
|
|
||
| `, | ||
| } | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
The createPaymentButton action is complex and includes inline JavaScript code for the web client. The action structure is correct, and the error handling is appropriate. However, the inline JavaScript code (lines 55-167) is difficult to maintain and could be prone to errors. It would be beneficial to extract this code into a separate file or module to improve maintainability and testability.
Consider refactoring the inline JavaScript code into a separate file or module to improve maintainability and testability.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (3)
- packages/forge/blocks/razorpay/actions/createOrder.ts (1 hunks)
- packages/forge/blocks/razorpay/actions/createQrCode.ts (1 hunks)
- packages/forge/blocks/razorpay/actions/verifyPayment.ts (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- packages/forge/blocks/razorpay/actions/createOrder.ts
- packages/forge/blocks/razorpay/actions/createQrCode.ts
- packages/forge/blocks/razorpay/actions/verifyPayment.ts
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by:!**/*.yaml
Files selected for processing (1)
- packages/forge/blocks/razorpay/actions/verifyPayment.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/forge/blocks/razorpay/actions/verifyPayment.ts
moved upi generation and variable mapping to function
|
Stalled. Feel free to re-open :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This block implements the Razorpay payment gateway
Credentials need to be generated from https://dashboard.razorpay.com/app/api-keys
Base options define common values like Company name etc. These are in baseOptions.ts
There are four actions
createQrCode: This generates a qrcode for payment using UPI (which is quite popular in india) This is compatible with Whatsapp.
createOrder, createPaymentButton and verifyPayment: these three actions together generate a payment button and verify payment. This generates an embedBubble so it's not compatible with whatsapp. however it is compatible with all payment methods offered by razorpay - cards, net banking, wallets etc.
Summary by CodeRabbit
New Features
Enhancements
Documentation