Designing the Payment Flow
The Flow elements that are required to execute a secure payment flow are shown below:
 |
Note
To execute this type of Flow, you need to have an established account with a Payment Gateway. Uniphore's secure payment mechanism supports any Payment Gateway that supports client-side as well as server-side integration.
Step 1: The Question
The Flow begins with an input question. On this page (usually a Payment page), customers are asked to enter their credit card information. Since X‑Platform automatically prevents credit card numbers from reaching the Server, an Application Extension needs to be used to redirect this information to your Payment Gateway. When the credit card information entered is valid, the Payment Gateway returns a credit card token to the Uniphore client application. This credit card token is then sent to the X‑Platform Server.
For more details about the Question element, see below.
Step 2: The Integration Point
In this step, an Integration Point is used to perform the actual payment to the Payment Gateway. Generally, a payment API (provided by the Payment Gateway) is called by the X‑Platform Server via REST web service.
Since the Server has no actual credit card details, the charge operation is accomplished using the credit card token received from the Payment Gateway and a special secret key that is associated with your Payment Gateway account.
For more details and an example Integration Point, click here.
Step 3: The Response Statement
At the end of the Flow, the customer is presented with a Statement page that displays an information message about the payment result. From this page, the customer usually clicks Next to continue the Flow.
Defining the Payment Question
You use this Question element in the Flow as a placeholder for actions that are performed by the Application Extension to execute the secure payment flow (i.e., sending credit card details to the Payment Gateway, obtaining a credit card token, and storing this token in a variable).
Additionally, the extension can be customized to perform other operations that are required. For example, the extension can populate and call the credit card details form that is used by a Payment Gateway, and display it as part of your Flow:
 |
Since the application extension is applied to your specific Flow page (in this case, the Payment question), ensure that the HTML Reference ID field of your Question element exactly matches the pageReferenceName used in the extension.
 |
For more details and examples of extensions used for secure payment flows, click here.
Example Resources for Secure Payment Implementation
To help you get started, we've created example resources to accompany this article. The samples we provide use the Stripe Payment Gateway and include all basic components, including an example Integration Point for credit card charges.
The example includes a two Interaction Flows:
Payments: A Flow in which the form asking customers for payment details is the actual form used by Stripe.
Embedded Payment Form: A Flow in which the form asking customers for payment details is customized.
In addition, the example includes a Mobile Web application that contains the following required Application Extensions:
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.
Download the example file, and then deploy the .zip files inside it to your Environment via the X-Console.
Important
Be sure to run the example Flows using the Mobile Web application that was included with the imported example package.