Payment Processor Tool Plugin

Introduction

The Payment Processor Tool is used to integrate different payment gateway methods. Currently, this tool supports Stripe, PayPal, and Razorpay. 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 way, allowing them to perform a payment.

This plugin is created with the aid of Stripe API Documentation, PayPal API Documentation, and Razorpay API Documentation.

Plugin Info

Plugin Available in the Bundle:

1. Payment Processor Tool

This plugin bundle is compatible with Joget DX 8.

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:

Log in to your PayPal account

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:

Sandbox accounts (paypal.com)

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 the API Domain/IP Whitelist section.

Fields to configure:

• API Domain Whitelist (Separated by ';'): 

  Domain whitelist to allow API calls to Joget Workflow. Separated by a semicolon.

  Example

  "localhost;www.joget.org;dev.joget.org”, or "*" to allow from everywhere.

  In a production environment, do not use "*".

  Doing so will allow anyone to call all JSON APIs from the Joget server.

• API IP Whitelist (Separated by ';'): 

  IP address whitelist to allow API calls to Joget. Separated by a semicolon.

  Example

  "localhost; 192.168.101.10; www.joget.org;dev.joget.org”, or "*" to allow from everywhere.

  In a production environment, do not use "*".

  Doing so will allow anyone to call all JSON APIs from the Joget server.

Steps

How to install the plugin

Download the plugin from GitHub or the Joget Marketplace.

You can choose to import the demo app or create the app from scratch.

Steps for importing the 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.

Steps for creating an app from scratch

1. The first part of the app is the form. You can create a form to hold the hidden fields for the Stripe payment method to work smoothly.
   You can also attach any extra tool in the hidden field form, as this form will get submitted and thus run the post-processing tool. You must select to run the post-processor on the Data Update.
   
2. Generate a CRUD for the hidden field form.
   
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 currency option is set, payment cannot be made.
   
4. Add a custom HTML to let the user easily click on the generated link later on. The table name will be the form with the hidden fields.
   

<a href="#form.ppsa_stripePLink.stripe_payment_link#">Pay with Stripe</a>

List 1: Hash Variable in the Custom HTML:

• • #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.

5. Attach the plugin tool to the customer form created. You should not attach this tool to the hidden field form.
   
6. Fill in the plugin configurations. Refer to Payment Processor Tool Properties for more information on how to fill in the plugin configurations. We will be putting the API keys in app variables (Figure 10) and using hash variables for retrieval. Refer to List 2 for each of the hash variable descriptions. Redirect Details will be the form created in the next few steps.
   

List 2: Hash Variables for Stripe: 

• • #appVariable.stripe_api_key#: Stripe API key, which is stored in the app variable.
  • #form.ppsa_stripePayment.currency#: A currency field that is created in a form to retrieve customer input.
  • #form.ppsa_stripePayment.total_amount#: The total amount field, which is created in the form to retrieve customer input.

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.
   
8. Create a form for the order confirmation page to act as the redirected page after the payment has been made.
9. The Payment Status field with ID payment_status is compulsory to ensure that the user does not click on the same link twice to avoid duplicate payments.
10. Set all the fields as read-only so that the user does not tamper with the data after payment is done.
    

Fields to configure:

• • #form.ppsa_stripePLink.stripe_payment_intent_id#: The Payment Intent ID field is saved in another table created in the Payment Link form.
  • #form.ppsa_stripePLink.stripe_payment_intent#: The Payment Intent field is saved in another table created in the Payment Link form.
  • #form.ppsa_stripePLink.payment_status#: The Payment Status field is saved in another table created in the Payment Link form.

9. 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.
   
10. 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 List 3 for more information.
    

List 3: src Parameter Value:

• • gateway: Payment is successful.
  • stored: Duplicate payment.
  • error: Error when performing payment.

11. 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.
    

<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>

12. 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 from Stripe, and are also compulsory to ensure the PayPal payment method works smoothly.
    
13. 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 the Razorpay payment method works smoothly.
    
14. Create a UI to hold all the forms and the datalist. Use the hidden field form as the List, customer form for Add and Edit.
    
15. 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.
    

How to use the plugin

1. Save and launch the UI. Go to the Stripe customer form. Fill in the details and submit.
   
2. Go to the CRUD list. You can see that the Stripe payment link has been generated. Now, click on edit.
   
3. Click on Pay with Stripe. You can also share the link with your desired method, by downloading the form as a PDF and sharing it with the customer, or even using the Email Tool to send the stripe_payment_link using a hash variable.
   
4. Now you will be redirected to the payment page of Stripe. You can use the test cards to test out the payment flow.
   
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.
   
6. Now go to the Stripe CRUD list and click on Pay with Stripe again. You will be directly redirected to this order confirmation page, showing that payment has already been processed earlier.
   

Note that the tables 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.

Note that the redirected fields ID in the "Payment Confirmation form" is the same as its corresponding fields ID in the "Payment Form".

7. For PayPal, the payment flow is similar; the only difference is that the payment gateway looks like below:
    
   
8. For Razorpay, the payment flow is similar; the only difference is that the payment gateway looks like below:
   
   

Payment Processor Tool Properties

Configure Payment Processor Tool

Fields to configure:

• Form: Another form that has the hidden fields (cannot be the current form with the tool attached)
• Payment Method: The types of payment methods supported

  • All

  • Paypal

  • Stripe

  • Razorpay

• Paypal Credentials: Header. Contents under this category are only visible when the Payment Method is PayPal or All.
• Environment: The types of PayPal environments

  • Sandbox

  • Live

• Client ID: Client ID used to connect to the PayPal account. Retrieved from the PayPal-created app. More information
• Client Secret: Client Secret used to connect to the PayPal account. Retrieved from the PayPal-created app. More information
• Stripe Credentials: Header. Contents under this category are only visible when the 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 the Stripe account page. More information
• Razor Credentials: Header. Contents under this category are only visible when the 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 is mainly used on the 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: The Userview Menu form ID is set in the Userview Menu for redirection to occur after payment is completed.

Expected Outcome

A Stripe, PayPal, and Razorpay payment link is generated to be shared with users to perform payment.

Download Demo App