Introduction

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.

This plugin is created with the aid of Stripe API Documentation and Paypal API Documentation.

Plugin Info

Plugin Available in the Bundle:

1. Payment Processor Tool

This plugin bundle is compatible with Joget DX 8.

Expected Outcome

To successfully generate a Stripe and Paypal payment link to be shared to users to perform payment.

Get Started

Prerequisites

To start using this plugin, you must first have a stripe or paypal 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. 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.

Image Added

Figure 1: API Domain/IP Whitelist

Steps

Where to get the plugin

Refer to Download Plugin and Source Code.

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.

Steps for creating app from scratch

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.

Image Added

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.

Image Added

Figure 3: Stripe Payment Main Form - Custom HTML

2. Attach the plugin tool to the form created.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

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.

Image Added

Figure 8: Stripe Payment Order Confirmation Form - Section Visibility

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.

Image Added

Figure 9: Stripe Payment Order Confirmation Form - Custom HTML message

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

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.

Image Added

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.

Image Added

Figure 11: Payment Processor UI

How to use the plugin

1. Save and launch the UI. Go to Stripe main form. Fill in the details and submit.

Image Added

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.

Image Added

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.

Image Added

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. 

Image Added

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.

Image Added

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.

Image Added

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:

 Image Added   Image Added

Figure 18 & 19: Paypal Payment Gateway

Payment Processor Tool Properties

Configure Payment Processor Tool

Image Added

Figure 20: Plugin Configurations for ALL type

Download Plugin

Compulsory configurations:

• Payment Status field (ID: payment_status) field is compulsory at *Redirected form to ensure that user does not click on the same link twice (avoid duplicate payment)

Image Removed

Figure 2: *Redirected form is set at Redirect Details

Image Removed

Figure 3: Payment Status field with ID "payment_status"

• These hidden fields are compulsory to ensure Stripe payment methods works smoothly.

Image Removed

Figure 4: Stripe compulsory hidden fields

• These hidden fields are compulsory to ensure Paypal payment methods works smoothly.

Image Removed

Figure 5: Paypal compulsory hidden fields

Payment Flow 

1. Attach the tool at Post Form Submission Processing. Fill in the Payment Processor Tool Properties.

Image Removed

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,...)

Image Removed

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

 Image Removed   Image Removed

Figure 8 & 9: Paypal Payment Gateway

Stripe Payment Gateway

Image Removed

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.

Image Removed

and Source Code

1. Please visit https://github.com/jogetoss/payment-processor-tool for the plugin's source code.

2. You can find the latest release at https://github.com/jogetoss/payment-processor-tool/releases.

3. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.

Download Demo

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.

Image Removed

Figure 12: If payment is duplicated redirect back to Userview Form set in configuration

App

• APP_paymentProcessorSampleApp-1-2023110800402220231108020658.jwa (with plugin and form data)