Overview

Stripe Connector allows to capture payments with SmartIQ forms, without the need for users to leave the form. With this method, credit card details are also not stored within the form. Stripe Payment implements SSL (https) making the payment secure and enabling SAQ A and Attestation of Compliance (AoC). Here a summary of most common scenarios when this connector would be used:

• Pay and Finish: Payment as final step in a Form.
• Pay and Continue: Mid-Form Payment in a Form
• Pay in Workflow: Payment in one or many steps of a workflow.

Features

• Validation of SmartIQ form before Stripe Payment widget is displayed.
• Mid-Form Payment: Allows designers to capture payments in a form and use it to modify behaviour of form based on payment result; this design pattern is also known as a "gate".
• Payment Button can be customized, allowing designer to change button text and CSS.
• Customizable payment widget
• Automatically detects user culture.

Connector Components

• Stripe Connector Question Extension

📘

Note

Stripe Connector requires a license key, make sure your SmartIQ Instance has Module Id: 9015 under Licensing.

Creating Stripe Sandbox

More information here: https://stripe.com
This will enable you to create a sandbox for testing and development. This is also where you will obtain the Publishable and Secret API keys required to configure the connector.

Configuration

1. In Manage, go to Settings > Stripe Connector.
2. Provide the following information:

• Publishable API Key: Get this key from Stripe Dashboard (Developers > API Keys).
• Secret API Key: Get this key from Stripe Dashboard (Developers > API Keys).
• Default Logo URL (128x128): Url with a 128x128 image (png, gif or jpeg).
• Default Currency Code: Three-letter ISO code (lowercase), for example: usd, aud, cop, etc. https://stripe.com/docs/currencies
• Default Payment Button Class: A custom class can be defined in the environment css, btn by default.
• Default Payment Button Text: Text to be included in the Pay button.
• Default Payment Description: Description included in the Payment widget.

3. (Optional) For multiple accounts:
   1. Click the New Set button to create additional accounts. For example, Sandbox and Production.
   2. Click the Set as Default button to change the default set. If the previous Default was set in Design, SmartIQ will now use the new Default values.

📘

Note

All of these individual settings are optional inputs in here, but some are ultimately required for the custom question to successfully operate (see below). All of these can also be provided as inputs to the custom question itself within Design, and that would override the connector settings for those parameters in that instance of the question.

4. Click Save.

Using Stripe Connector in Design

Stripe Payment Gateway is a custom question that can be added at any point in a process and we cover the most relevant use cases below.

Question Extension Inputs

Required

• Publishable API Key: Get this key from Stripe Dashboard (Developers > API Keys). This option will override value defined in Connector Settings.
• Secret API Key: You can get this key from Stripe Dashboard (Developers > API Keys). This option will override value defined in Connector Settings.
• Total Amount: Amount to be charged.
• Payment Description: Brief description to be included in Payment the widget. This option will override value defined in Connector Settings.
• Merchant Name: Name of entity collecting the payment. This option will override value defined in Connector Settings.
• Currency Code: Three-letter ISO code (lowercase), for example: usd, aud, cop, etc. https://stripe.com/docs/currencies. This option will override value defined in Connector Settings.

Optional

UI

• Payment Button Text: Allows to customize text of payment button. This option will override value defined in Connector Settings.
• Payment Button Class: A custom class can be defined in the environment css, btn by default. This option will override value defined in Connector Settings.
• Logo URL (128x128): Url with a 128x128 image (png, gif or jpeg). This option will override value defined in Connector Settings.
• E-Mail: Customer's email.

Custom Statement

• Statement Descriptor: Description to be included in customers bank statement. Max 22 characters and the following characters are not allowed: <, >, ', or ". It is recommended to include a validation in Design to check length and characters; use this regex ._[\<\>"]._

Checkpoint (Pay and Continue)

• Checkpoint Payment [true|false]: By default this option is disabled False. For "Pay and continue" (mid-form payment) scenario, set it to True.
• Payment State (Project Property Name): A Project Property needs to be defined to control behaviour of Form (Recommended to be initiated as "False" with capital "F"), include here the name specified in Project Properties.

Additional Options (True|False)

• Billing Address [true|false]: Customer's billing address (some validations can be performed by Stripe)
• Zip Code [true|false]: Applicable to US customers.
• Shipping Address [true|false].
• Send Email Receipt [true|false]: Enable this option and ensure the E-Mail input is provided by making the SmartIQ question mandatory. Stripe will send a receipt to the customer automatically. It is possible to review and send receipts via Stripe Dashboard. Make sure you review Stripe official documentation to learn more;

Question Extension Outputs

• Payment State: [True|False] Before Payment -> False, when payment successful -> True.
• Risk Level
• Risk Score
• Reason
• RuleId
• Seller Message
• Type
• Network Status

📘

Note

It is recommended to enable troubleshooting when developing a new form, this enables relevant debugging messages.

Design Patterns (Use Cases and Examples)

Pay and Finish: Payment as final step in a form.

This is probably the most common scenario, where SmartIQ will collect some information before collecting payment and potentially running some actions at the end (for example: send confirmation email).

Use sample project Stripe Connector (Pay and Finish).ixpkg that can be downloaded from here

Key Concepts

• The Stripe Connector Question Extension needs to be the last question of the last page in the Form.
• A condition is added to the Finish page, where it's only Active if Payment State = "True".
• Make Finish Page as Not Visible
• Define as mandatory questions, those mapped required Inputs for Stripe Connector to ensure data is collected (avoiding validation error).

Pay and Continue: Mid-Form Payment in a Form

This use case defines a "gate" or "decision point" within a SmartIQ Form based on the payment event, where it will have a different behaviour before and after payment.

Use sample project Stripe Connector (Pay and Continue).ixpkg that can be downloaded from here

Key Concepts

• Create a new Project Property to control the state of the Form, in the example form case paymentStatus, and set initial value to False. Please be aware that SmartIQ performs case sensitive string comparison.
• Drag and drop Stripe Connector Question Extension in your form and include Question Extension Input Payment State (Project Property Name) and set value to paymentSatus (or the project property name you chose).
• Configure Form logic using the project property [paymentStatus] comparing value for False or True to create the Before/After behaviour. Stripe Connector will automatically change the Project Property defined in the input to True when payment is successful.

Pay in Workflow: Payment in one or many steps of a workflow.

Stripe connector can be used in a workflow to collect one or more payments, this can be combined with the previous two use cases where Payment is the last event before
workflow transition or within one workflow step to define a binary state (before/after payment). A practical example of this pattern would be a case where the business process requires a Deposit collection and a Final Payment later.

Use sample project Stripe Connector (Workflow).ixpkg that can be downloaded from here

Key Concepts

• Configure Workflow Transition to only be active defining an Active condition pointing to Payment State result to True, this will display the submit button only when payment is successful.
• If Payment is the last question before transition, make sure "Show Send To" is disabled for the workflow transition and resolve who is next user in the workflow based on Form logic.

🚧

Important Notes

• The Stripe Connector Question cannot be directly referenced in a Form Summary. The Designer needs to map the response value to a label in order to make it a visible property.
• Stripe Connector is not recorded in the Interaction Log and Project Results.
• Payment cannot be performed via an API call, it requires user interaction.
• If the Stripe Payment Gateway is not loading check the correct url is in the site framing policy list in manage. More details about Content Security Policy and Stripe can be found here