| Table of Contents |
|---|
Introduction
The Payment Processor Tool is used to integrate different payment gateway methods. Currently, this tool supports Stripe, Paypal and PaypalRazorpay. Users can modify the product details to generate a customised payment link. The payment link can be conveniently sent to customers via email or any configurable ways, allowing them to perform payment.
This plugin is created with the aid of Stripe API Documentation and , Paypal API Documentation and Razorpay API documentation.
Plugin Info
Plugin Available in the Bundle:
Payment Processor Tool
Configure Payment Processor Tool
The types of payment method supported
- All
Paypal
Stripe
The types of Paypal environment
Sandbox
Live
Plugin Compulsory Configurations
Compulsory configurations:
This field is compulsory at *Redirected formThis plugin bundle is compatible with Joget DX 8.
Expected Outcome
To successfully generate a Stripe, Paypal and Razorpay payment link to be shared to users to perform payment.
Get Started
Prerequisites
To start using this plugin, you must first have a stripe, paypal or razorpay account.
1. Stripe Account
To sign up for a stripe account, please refer to this:
Sign Up and Create a Stripe Account | Stripe
Locate your API keys by referring to:
Locate API keys in the Dashboard : Stripe: Help & Support
Payment test cards for testing usage:
Test payment methods | Stripe Documentation
2. Paypal Account
To sign up for a paypal account, please refer to this:
Locate your API keys by referring to:
How to get a PayPal API key: examples, integration and pricing [2023] (elfsight.com)
Create sandbox accounts for testing usage:
3. Razorpay Account
To sign up for a razorpay account, please refer to this:
Signup and create a Razorpay Account | Razorpay
Locate your API keys by referring to:
How to Generate razorpay API Key documentation
Payment test cards for testing usage:
Test Payment methods | Razorpay Documentation
4. API Domain/IP Whitelist
To ensure the successful operation of this plugin, it is essential to whitelist the domains or IP addresses of the host. Typically, this involves adding the IP address or domain name of your Joget application server to the whitelist. To access this section of Joget, go to Settings → General Settings and scroll down till you see API Domain/IP Whitelist section.
Figure 1: API Domain/IP Whitelist
| Name | Description | |||||||
|---|---|---|---|---|---|---|---|---|
| API Domain Whitelist (Separated by ';') | Domain whitelist to allow API calls to Joget Workflow. Separated by semicolon.
| |||||||
| API IP Whitelist (Separated by ';') | IP address whitelist to allow API calls to Joget. Separated by semicolon.
|
Steps
How to install the plugin
You can choose to import the demo app or create the app from scratch.
Steps for importing demo app
1. If you choose to import the demo app, you can get it from Download Demo App.
2. Go to Joget Home or All Apps and click on Import App to import the downloaded demo app.
3. Fill in the stripe, paypal and razorpay payment API and client keys.
Figure 2: Fill in the API and client keys
Steps for creating app from scratch
1. The first part of the app is the form. You can create a form to hold the hidden fields for Stripe payment method to work smoothly.
Figure 3: Stripe Hidden Field Form
You can also attach any extra tool in the hidden field form as this form will get submitted and thus running the post processing tool. You must select to run post processor on Data Update.
Figure 4: Stripe Hidden Field Form - Post Form Processing
2. Generate a CRUD for the hidden field form.
Figure 5: Stripe Hidden Field Form - Generate CRUD
3. Create another form to receive customer information input. Remember to add the respective payment method supported currencies option (USD, MYR, etc) for the Currency field in the Payment Form. If no currencies option is set, payment cannot be done.
Figure 6: Stripe Customer Payment Form
4. Add a custom HTML to let user easily click on the generated link later on. The table name will be the form with the hidden fields.
Figure 7: Stripe Customer Payment Form - Custom HTML
| Code Block |
|---|
<a href="#form.ppsa_stripePLink.stripe_payment_link#">Pay with Stripe</a> |
| Hash Variable in Custom HTML | Description |
|---|---|
| #form.ppsa_stripePLink.stripe_payment_link# | This hash variable points to the form table created in step 1, with the field of the payment link. |
Table 1: Hash Variable in Custom HTML
5. Attach the plugin tool to the customer form created. You should not attach this tool at the hidden field form.
Figure 8: Stripe Customer Payment Form - Attach Tool
6. Fill in the plugin configurations. Refer to Payment Processor Tool Properties for more information on how to fill the plugin configurations. We will be putting the API keys in app variables (Figure 10) and using hash variables for retrieval. Refer to table 2 for each of the hash variable descriptions. Redirect Details will be the form created in next few steps.
Figure 9: Plugin Configurations
Figure 10: App Variables
| Hash Variable | Description |
|---|---|
| #appVariable.stripe_api_key# | Stripe API key which is stored in the app variable. |
| #form.ppsa_stripePayment.currency# | Currency field which is created in form to retrieve customer input. |
| #form.ppsa_stripePayment.total_amount# | Total amount field which is created in form to retrieve customer input. |
Table 2: Hash Variables for Stripe
7. Modify the List generated in step 2 when generating CRUD, in the list we will be joining the table used to retrieve customer information, to get all the columns of payment details.
Figure 11: List builder join table
7. Create a form for order confirmation page, to act as the redirected page after the payment has been made.
Payment Status field with ID payment_status is compulsory to ensure that user does not click on the same link twice
(duplicate payment)
Figure 2: *Redirected form is set at Redirect Details
Figure 3: Payment Status field with ID "payment_status"
- These hidden fields are compulsory to ensure Stripe payment methods works smoothly.
Figure 4: Stripe compulsory hidden fields
- These hidden fields are compulsory to ensure Paypal payment methods works smoothly.
Figure 5: Paypal compulsory hidden fields
to avoid duplicated payment.
Set all the fields as readonly so that user does not tamper with the data after payment is done.
Figure 12: Stripe Payment Order Confirmation Form - Payment Status
| Hash Variable in Form | Description |
|---|---|
| #form.ppsa_stripePLink.stripe_payment_intent_id# | Payment Intent ID field saved in another table created in Payment Link form. |
| #form.ppsa_stripePLink.stripe_payment_intent# | Payment Intent field saved in another table created in Payment Link form. |
| #form.ppsa_stripePLink.payment_status# | Payment Status field saved in another table created in Payment Link form. |
8. To configure the alert message, we retrieve the parameter "src" that is redirected from the payment processor web service, and store it in a hidden field alertmsg.
Figure 13: Stripe Payment Order Confirmation Form - Request Param value stored in Hidden Field
9. Create a section that holds the success or warning message. Configure the visibility of the section based on the hidden field value from alertmsg. Refer to table 3 for more information.
Figure 14: Stripe Payment Order Confirmation Form - Section Visibility
Parameter Value | Definition |
|---|---|
gateway | Payment is successful. |
stored | Duplicate payment. |
error | Error when performing payment. |
Table 3: "src" Parameter Value
10. Create a custom HTML to show the message when each section is visible. A sample code block for the success message is shown below. Please configure accordingly based on your desired message output.
Figure 15: Stripe Payment Order Confirmation Form - Custom HTML message
| Code Block |
|---|
<div id="alertmsgSuccess" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Payment Success!</strong> - Thank you, your payment has been successfully processed.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> |
11. Configure the similar hidden field form, customer form and order confirmation form for Paypal. The only difference is that for paypal, these hidden fields are different with Stripe, and are also compulsory to ensure Paypal payment method works smoothly.
Figure 16: Paypal Payment Form with hidden fields
12. Configure the similar hidden field form, customer form and order confirmation form for Razorpay. These hidden fields are different from Stripe and Paypal, and are also compulsory to ensure Razorpay payment method works smoothly.
Figure 17 : Razorpay Payment Form with hidden fields
13. Create a UI to hold all the forms and datalist. Use the hidden field form as the List, customer form for Add and Edit.
Figure 18: Payment Processor UI - Datalist
13. Create a hidden category to hold the order confirmation forms. The Menu ID of the order confirmation pages will be used in the Redirect Details in plugin configurations.
Figure 19: Payment Processor UI - Redirection Form
How to use the plugin
1. Save and launch the UI. Go to Stripe customer form. Fill in the details and submit.
Figure 20: Fill in Stripe Payment Customer Form
2. Go to the CRUD list. You can see that the stripe payment link has been generated. Now click on edit.
Figure 21: Stripe Payment List
3. Click on Pay with Stripe. You can also share the link with your desired method, by downloading the form as PDF and sharing to the customer, or even using the Email Tool to send the stripe_payment_link using hash variable.
Figure 22: Clicking on payment link
4. Now you will be redirected to the payment page of Stripe. You can use the test cards to test out the payment flow.
Figure 23: Stripe Payment Gateway
5. After payment is complete, you can see that you are redirected to the order confirmation page. The payment intent details are saved to the same form as the payment link form (form with hidden fields). You can configure the payment intent into table form or retrieve any values that you think are useful to your use case.
Figure 24: Stripe Payment Order Confirmation Form - Successful Payment
6. Now go to the Stripe CRUD list and click on Pay with Stripe again. You will directly be redirected to this order confirmation page, showing that payment has already been processed earlier.
Figure 25: Stripe Payment Order Confirmation Form - Duplicated Payment
Note that the table of the "Payment form" and "Payment Confirmation form" are the same so successful data retrieval occurs during redirection, otherwise it will show the “Record cannot be found” message.
Figure 26: Same table of payment and payment confirmation form
Note that the redirected fields ID in the "Payment Confirmation form" is the same as its corresponding fields ID in the "Payment Form".
Figure 27: Same ID of payment and payment confirmation form
7. For Paypal, the payment flow is similar, the only difference is that the payment gateway looks like below:
Figure 28 & 29: Paypal Payment Gateway
8. For Razorpay, the payment flow is similar, the only difference is that the payment gateway looks like below:
Figure 30 & 31: Razorpay Payment Gateway
Payment Processor Tool Properties
Configure Payment Processor Tool
Figure 32: Plugin Configurations for ALL type
| Name | Description |
|---|---|
| Form | Other form that has the hidden fields (cannot be the current form with the tool attached) |
| Payment Method | The types of payment method supported
|
| Paypal Credentials | Header. Contents under this category is only visible when Payment Method is Paypal or All. |
| Environment | The types of Paypal environment
|
| Client ID | Client ID used to connect to Paypal account. Retrieved from Paypal created app. More information |
| Client Secret | Client Secret used to connect to Paypal account. Retrieved from Paypal created app. More information |
| Stripe Credentials | Header. Contents under this category is only visible when Payment Method is Stripe or All. |
API Key | Secret API Key used to perform Stripe API calls. Can be Test Mode or Live Mode API Keys. Retrieved from Stripe account page. More information |
Razor Credentials | Header. Contents under this category is only visible when Payment Method is Razorpay or All. |
API Secret
| This API secret is used to authenticate requests made from Joget to Razorpay's servers. It ensures that the requests are securely authorized and helps prevent unauthorized access. More Information |
API Key
| Secret API Key for executing Razorpay API calls, available in Test or Live Mode. Retrieve and manage this key from the Razorpay dashboard under API keys. Additional details are provided in Razorpay's developer documentation. More Information |
| Input Fields to Generate Payment Link | Header |
| Product Name | The name of the product mainly used in Stripe payment page. |
| Currency | Three-letter ISO currency code, in lowercase. Must be a supported currency. (Eg: USD, MYR). *Please check whether the currency is supported with your Paypal account. For Stripe, please check https://stripe.com/docs/currencies. For Paypal, please check PayPal Supported Currencies. For Razorpay, please check Razorpay supported currencies. |
| Total Amount | The total amount to be charged. |
| Redirect Details | Header |
| Userview Menu | Userview Menu for redirection to occur after payment is completed. |
| Userview Menu Form ID | Userview Menu form ID set in Userview Menu for redirection to occur after payment is completed. |
Download Demo App
| View file | ||||
|---|---|---|---|---|
|
with plugin and form data
Payment Flow
1. Attach the tool at Post Form Submission Processing. Fill in the Payment Processor Tool Properties.
Figure 6: Post Form Submission Processing at Form Builder
Set API key / client details to connect to the payment method.
Set the product details necessary to ensure sufficient details to generate the payment link.
2. User fills in the payment link form and submits. A temporary payment link will be generated.
3. We can use any desired ways to share the link for the customer.
(Eg: utilising the Email Tool, using a simple datalist to show the payment link, set the payment link as hyperlink or button in form,...)
Figure 7: Set starting form, then Email Tool at Process Builder
4. User clicks on the payment link, redirects the user to the payment gateway respectively.
Paypal Payment Gateway
Figure 8 & 9: Paypal Payment Gateway
Stripe Payment Gateway
Figure 10: Stripe Payment Gateway
5. User keys in payment details and perform payment.
If payment is success, redirects the user back to the redirect page configured by the user. The page will show the payment information.
Figure 11: After payment success redirect back to Userview Form set in configuration
If payment has already been done and user clicks the link again, the user will directly be redirected back to the redirect URL.
Figure 12: If payment is duplicated redirect back to Userview Form set in configuration
Download Sample App
APP_paymentProcessorSampleApp-1-20230721023707.jwa