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.
- 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.
- Stripe Connector Question Extension
Note: Stripe Connector requires a license key, make sure your SmartIQ Instance has Module Id: 9015 under Licensing
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.
Go to Manage Application, open
Settings > Connector Settings > Stripe Connector and 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,
- Default Payment Button Text: Text to be included in the Pay button.
- Default Payment Description: Description included in the Payment widget.
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.
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.
- 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.
- 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,
btnby 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.
- 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
- 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;
- Payment State:
[True|False]Before Payment ->
False, when payment successful ->
- Risk Level
- Risk Score
- Seller Message
- Network Status
Note: It is recommended to enable troubleshooting when developing a new form, this enables relevant debugging messages.
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
- 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
Payment State = "True".
- Make Finish Page as
- Define as mandatory questions, those mapped required Inputs for Stripe Connector to ensure data is collected (avoiding validation error).
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
- 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
Trueto create the Before/After behaviour. Stripe Connector will automatically change the Project Property defined in the input to
Truewhen payment is successful.
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
- 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.
- 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
Updated about 1 month ago