The application extension applied to the Payment question sends credit card details to the payment gateway, obtains a credit card token and stores it in an Interaction variable. The extension can be modified as you wish, to carry out any other operations that you would like to add to the flow. 

To help you get started, Jacada Interact supplies a Mobile Web application containing two sample application extensions that implement a secure payment flow using the Stripe payment gateway: 

  • The Payment extension calls the credit card details form used by Stripe, and customers enter credit card information on this form. If you want your customers to work with the form that is provided by the payment gateway, write your extension based on this sample. 
  • The Embedded Payment extension presents customers with a customized form on which to enter their payment details. If you want to design your own details form for credit card input, write your extension based on this sample.

Both sample extensions are applied to the same Interaction page (that of the Payment question), and both have similar flows for obtaining and storing the credit card token.

The Mobile application with the extension samples (plus sample Interactions) may be downloaded from the bottom of this page, and imported into your Admin Console. The following sections provide more detailed explanations about each of the sample extensions.

Payment Extension

When the Payment page is displayed, the Next button is hidden and a Pay with Credit button is shown instead. When the user clicks the button, the Stripe handler shows the Stripe UI for entering credit card information. 

After the user enters details and clicks the Pay button, details are verified. If all the details are valid, the token callback function is called. The ccToken variable is set with the token, and the Interaction moves to the next page, where the Integration Point is called to perform the actual charge operation.

The code for this extension is shown below:

The following table summarizes the operations done by the Payment extension:

LineActions
4 Loads the Stripe JS library.
8 Ensures that the code runs only in the context of the Payment page.
12-13 Adds the Pay button.
16 Initializes Stripe's details form with the public key.
19 Calls the token callback function upon validation of credit card information.
22 Stores the returned token in a ccToken variable that will be sent in the next navigation.
23 Clicks the Next button to initiate a Next navigation.
27 Handles the click event on the Pay button.

Embedded Payment Extension

When the Payment page is displayed, the Next button is hidden and a customized form on which customers enter credit card information is displayed. For example:



After the user enters details and clicks the Pay with Credit button, the data is verified. The payment gateway can either accept the credit card information, or return an error. If an error is returned, it is shown on the same page, and navigation to the next page is blocked. If all the details are valid, navigation proceeds to the next page, where the Integration Point is called to perform the actual charge operation.

The code for this extension is shown below:

The following table summarizes the operations done by the Embedded Payment extension:

LineActions
4 Loads the Stripe JS library.
6 Sets the Stripe publishable API key.
8 Ensures that the code runs only in the context of the Payment page.
11 Builds the interface of the form used for entering credit card information.
12 Hides the Next button.
13 Handles the click event on the Pay button.
15 Asks Stripe to create a credit card token.
16-18 Error handling.
21-23 Stores the returned token in a ccToken variable that will be sent in the next navigation.
24 Clicks the Next button to initiate a Next navigation.

 

Revision:

Comments