Understanding Payment Application Extensions
To protect the privacy of customer details, X‑Platform performs secure payment transactions without sending transaction information to the Server. Instead, it uses an application extension to route sensitive client information directly to the Payment Gateway.
An application extension applied to the Payment question sends credit card details to the Payment Gateway, obtains a credit card token and stores it in a User Variable for use by the current Flow. The same extension can also perform additional gateway operations that may be needed.
Note
To help you get started, we've created some example resources for implementing secure payments that you'll find attached at the bottom of the article Designing the Payment Flow. Follow the instructions there to download and deloy the example files.
Payment Extension Example
Using the Payments Flow, when the Payment page is displayed, the Next button is hidden and a Pay with Credit button is shown instead. When the user clicks this button, the Stripe handler is called to display the Stripe UI for entering actual credit card information.
 |
After the user enters details and clicks the Pay button, details are verified by the Stripe Payment Gateway. If all the details are valid, the token callback function is called. The ccToken variable is set with the token, and the Flow moves to the next page, where the example 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:
Line | Actions |
|---|---|
| Loads the Stripe JS library. |
| Ensures that the code runs only in the context of the Payment page. |
| Adds the Pay button. |
| Initializes Stripe's details form with the public key. |
| Calls the token callback function upon validation of credit card information. |
| Stores the returned token in a ccToken variable that will be sent in the next navigation. |
| Clicks the Next button to initiate a Next navigation. |
| Handles the click event on the Pay button. |
Embedded Payment Extension Example
Using the Embedded Payment Form Flow, when the Embedded Form 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 relevant 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:
Line | Actions |
|---|---|
| Loads the Stripe JS library. |
| Sets the Stripe publishable API key. |
| Ensures that the code runs only in the context of the Payment page. |
| Builds the interface of the form used for entering credit card information. |
| Hides the Next button. |
| Handles the click event on the Pay button. |
| Asks Stripe to create a credit card token. |
| Error handling. |
| Stores the returned token in a ccToken variable that will be sent in the next navigation. |
| Clicks the Next button to initiate a Next navigation. |