Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


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.

Figure 1.0: API Domain/IP Whitelist


NameDescription
API Domain Whitelist (Separated by ';')

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

Info
titleExample

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

Warning

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

Info
titleExample

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

Warning

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

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 and payment API and client keys.

Figure 12: 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 with to hold the following hidden fields for customer information input. For Stripe, these hidden fields are compulsory to ensure Stripe payment method works smoothly.

Image Removed

Figure 2: Stripe Payment Main Form - Form with Hidden Fields

to work smoothly. You can also attach any extra tool in this form as this form will get submitted and thus running the post processing tool.

Image Added

Figure 3: Stripe Hidden Field Form


2. Generate a CRUD for the hidden field form.

Image Added

Figure 4: Stripe Hidden Field Form - Generate CRUD


3. Create another form to receive customer information input.

Image Added

Figure 5: Stripe Customer Payment Form


4. Add Create 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.

Image RemovedImage Added

Figure 36: Stripe Customer Payment Main Form - Custom HTML


25. Attach the plugin tool to the customer form created. You should not attach this tool at the hidden field form.

Figure 47: Stripe Customer Payment Main Form - Attach Tool


36. 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 RemovedImage Added

Figure 58: Plugin Configurations


47. Create a form for order confirmation page, to act as the 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 RemovedImage Added

Figure 69: Stripe Payment Order Confirmation Form - Payment Status


58. 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 710: Stripe Payment Order Confirmation Form - Request Param value stored in Hidden Field


69. 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 811: Stripe Payment Order Confirmation Form - Section Visibility

Parameter Value

Definition

gateway

Payment is successful.

stored

Duplicate payment.

error

Error when performing payment.

Table 1: "src" Parameter Value


710. 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 912: 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>


811. Configure the similar main form 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.

Image RemovedImage Added

Figure 1013: Paypal Payment Main Form Payment Form with hidden fields


912. Create a UI to hold all the forms and datalist. Use the hidden field form as the List, customer form for Add and Edit.

Image Added

Figure 14: 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 the Redirect Details in plugin configurations.

Image RemovedImage Added

Figure 1115: Payment Processor UI - Redirection Form

How to use the plugin

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

Image RemovedImage Added

Figure 1216: Fill in Stripe Payment Main Customer Form 


2. Go to the CRUD list. You can see that the stripe payment link has been generated. Now click on edit.

Image RemovedImage Added

Figure 1317: 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 RemovedImage Added

Figure 1418: 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 1519: 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 1620: 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 1721: 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 22 & 1923: Paypal Payment Gateway


Payment Processor Tool Properties

Configure Payment Processor Tool

Image RemovedImage Added

Image RemovedFigure 2024: Plugin Configurations for ALL type

NameDescription
FormCurrent form using the toolOther form that has the hidden fields (cannot be the current form with the tool attached)
Payment Method

The types of payment method supported

  • All
  • Paypal

  • Stripe

Paypal CredentialsHeader. Contents under this category is only visible when Payment Method is Paypal or All.
Environment

The types of Paypal environment

  • Sandbox

  • Live

Client IDClient ID used to connect to Paypal account. Retrieved from Paypal created app. More information
Client SecretClient Secret used to connect to Paypal account. Retrieved from Paypal created app. More information
Stripe CredentialsHeader. Contents under this category is only visible when Payment Method is Stripe or All.
API KeySecret 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 LinkHeader
Product NameThe name of the product mainly used in Stripe payment page.
CurrencyThree-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 AmountThe total amount to be charged.
Redirect DetailsHeader
Userview MenuUserview Menu for redirection to occur after payment is completed.
Userview Menu Form IDUserview Menu form ID set in Userview Menu for redirection to occur after payment is completed.



Download Demo App