Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
The Payment Processor Tool is used to integrate different payment gateway methods. Currently, this tool supports Stripe and Paypal. 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.
Plugin Available in the Bundle:
Payment Processor Tool
This plugin bundle is compatible with Joget DX 8.
To successfully generate a Stripe and Paypal payment link to be shared to users to perform payment.
To start using this plugin, you must first have a stripe or paypal account.
To sign up for a stripe account, please refer to this:
Locate your API keys by referring to:
Payment test cards for testing usage:
To sign up for a paypal account, please refer to this:
Locate your API keys by referring to:
Create sandbox accounts for testing usage:
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.0: API Domain/IP Whitelist
|API Domain Whitelist (Separated by ';')|
|API IP Whitelist (Separated by ';')|
You can choose to import the demo app or create the app from scratch.
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 and payment API and client keys.
Figure 1: Fill in the API and client keys
1. The first part of the app is the form. You can create a form with the following fields for customer information input. For Stripe, these hidden fields are compulsory to ensure Stripe payment method works smoothly.
Figure 2: Stripe Payment Main Form - Form with Hidden Fields
Create a custom HTML to let user easily click on the generated link later on.
Figure 3: Stripe Payment Main Form - Custom HTML
2. Attach the plugin tool to the form created.
Figure 4: Stripe Payment Main Form - Attach Tool
3. Fill in the plugin configurations. Refer to Payment Processor Tool Properties for more information on how to fill the plugin configurations. Redirect Details will be the form created in next step.
Figure 5: Plugin Configurations
4. 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 to avoid duplicated payment.
Figure 6: Stripe Payment Order Confirmation Form - Payment Status
5. 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 7: Stripe Payment Order Confirmation Form - Request Param value stored in Hidden Field
6. 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 1 for more information.
Figure 8: Stripe Payment Order Confirmation Form - Section Visibility
|Payment is successful.|
|Error when performing payment.|
Table 1: "src" Parameter Value
7. 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 9: Stripe Payment Order Confirmation Form - Custom HTML message
8. Configure the similar main 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 10: Paypal Payment Main Form with hidden fields
9. Create a UI to hold all the forms. 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 11: Payment Processor UI
1. Save and launch the UI. Go to Stripe main form. Fill in the details and submit.
Figure 12: Fill in Stripe Payment Main Form
2. Go to the CRUD list. You can see that the stripe payment link has been generated. Now click on edit.
Figure 13: 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 14: 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 15: Stripe Payment Gateway
5. After payment is complete, you can see that you are redirected to the order confirmation page. You can configure the payment intent into table form or retrieve any values that you think are useful to your use case.
Figure 16: 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 17: Stripe Payment Order Confirmation Form - Duplicated Payment
7. For Paypal, the payment flow is similar, the only difference is that the payment gateway looks like below:
Figure 18 & 19: Paypal Payment Gateway
Figure 20: Plugin Configurations for ALL type
|Form||Current form using the tool|
The types of payment method supported
|Paypal Credentials||Header. Contents under this category is only visible when Payment Method is Paypal or All.|
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|
|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.|
|Total Amount||The total amount to be charged.|
|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.|