This will walk you through the process of making your page and integrating the Stripe Payment Element Form from PosiPay. This document provides an example of how to set up a payment form in the flow; you are free to configure it any way you see fit, as long as it supports the lightning web component.

Steps in Setting Up Stripe Payment Flow

Go to Set up Home page > Click Process Automation > Flows.

• Click New Flow button to create flow.

Open

• Choose Screen Flow and click Create.

Open

• After clicking, add new Screen.

1. Set up the Customer Info Screen. Add the required attributes.

Choose what type of component you want to use and don’t forget to put Label. Click Stripe Form under Components.

• Label = Customer Info Screen

• API Name: autopopulated

Display the following components with each of the Labels.

• Text:

  • Amount

  • City

  • Country

  • Email Address

  • Gateway Account

  • Line 1

  • Line 2

  • Payment Method

• Checkbox

  • Gateway Customer

  • Is MOTO

    • Default Value = {!$GlobalConstant.False}

  • requirePostalCode

2. Set up the Stripe Form Screen. Click Stripe Form under Components.

• After clicking, fill in components with the same information from the first screen. After doing this, don’t forget to put the screen flow label, then click Done.

  • Amount = {!Amount}

  • City = {!City}

  • Country = {!Country}

  • Email Address = {!Email_Address}

  • Gateway Account = {!Gateway_Account}

  • Gateway Customer = {!Gateway_Customer}

  • Line 1 = {!Line_1}

  • Line 2: {!Line_2}

  • Payment Method = {!Payment_Method}

  • Require Postal Code = {!requirePostalCode}
    
    

3. Set up the “Thank You” Screen.

• Choose Display Text component, fill in the description, and don’t forget to fill in the Flow label. Click Done after setting up.

• After creating the three (3) screens, it should look like this.

After successfully completing the Stripe Payment Flow, click “Save” or “Save As” and fill in the necessary details and click Save.

Validation:

For validations, click “Run” or “Debug” after setting up the Stripe Payment Flow.

The Gateway Account Attribute:

1. In the Stripe Form, fill in the necessary information including Gateway Account, and Payment Method, and tick CVC if you require the Card Verification Code.
   
   

    

   Note: If the Gateway Account is empty, it will display an error message and will not proceed to the Stripe Payment Form.
   
   

2. After filling in, click Next and proceed to display the Stripe Payment Form.
   
   

    

The Payment Method attribute:

1. In the Stripe Form, fill in the necessary information including Gateway Account, and Payment Method, and tick CVC if you require the Card Verification Code.
   
   

    

• Note: If the provided methods in the Payment Method are NOT supported by the Gateway Account record, it won’t proceed to the Stripe Payment Form and will display an error message.
  
  

  • If the Payment Method attribute is EMPTY, then the Stripe payment form will not display, and an error message will display.

2. After filling in the necessary details correctly, it will display the Stripe Payment Form.

Note: If you select Credit Card as Payment Method and the Is MOTO is set to TRUE, the Stripe Form will display like this and the CVC field will NOT display.

Once you have filled in all the necessary details, click on Process Payment. The payment will be processed to the gateway with the Credit Card details without CVC.

If you select Credit Card as Payment Method and the Is MOTO is set to FALSE, the Stripe Form will display like this and the CVC field will display.

If you select Direct Debit as the Payment Method, the Stripe Form will display like this :

Once you have filled in all the necessary details, click on Process Payment. You will then be redirected to the next window where you can see the Bank Account Name.

Testing the Payment Form

Stripe Payment

1. Setup > Process Automation > Flow > New Flow > Screen Flow > Create

2. Successful Testing: Fill in the required fields.

• After filling in, click Pay Now. Afterwards, it will create a Gateway Transaction record and the component will navigate to the next screen.

Here is the sample Gateway Transaction that has been recorded.

A Payment Transaction is successful if the Transaction Status field is Successful.

3. For Failed Testing, fill in the required fields.

• After filling in, click Pay now. If the transaction is failed, an error message will appear and the component will stay in the Payment Form.

• Here is the Gateway Transaction record with the failed payment transaction.

Stripe Payment Element Form Parameters (Attributes)

Input

To be configured when calling the lightning web component of the Stripe payment form.

Output

The results from the process returned by the lightning web component of the Stripe payment form – no need to configure.

Next place to go: Step 8 - Set up Stripe Customer Form