The Credit Card Web Control is used to collect credit card information from users. By default, it is set up to work with a Stripe Integration.
General
Control Properties
Datasource ID
Expects the ID that represents the Stripe Data source to use for payment processing.
Currency
Expects type currency.
A Currency data type value representing the amount to be charged. For example:
CURRENCY(
1000,
"USD",
2
)
This value would charge 10 dollars.
Button Text
Expects type text.
The text that is displayed on the Button in the Credit Card Control.
Description
Expects type text.
An arbitrary string attached to the object. Often useful for displaying to users.
Aria Label
Expects type text.
Defines a value to the aria-label of the control for accessibility. For more information see here.
Advanced Control Properties
Number Placeholder
Expects type number.
The numbers that are shown as placeholders until the user enters the credit card number.
CVC Placeholder
Expects type number.
The placeholder text for the CVC input.
Expiration Placeholder
Expects type number.
The numbers that are shown as placeholders until the user enters the credit card number.
Return Payment Token
If enabled, the payment request will return a payment token that can be used to identify the payment method. The token is available on the event.token.
Create New Customer
Expects type boolean.
If enabled, the payment request will return a new customer id for the customer. This id will be returned on the event.customerId.
Customer ID
ID of the customer
Metadata
Expects key-value pairs that can be attached to an object. This can be useful for storing additional information about the object in a structured format. Individual keys can be unset by posting an empty value to them. All keys can be unset by posting an empty value to metadata.
Style and Layout
Check Common style properties of web controls for further details on how to style this control.
Actions
Submitted
Is triggered whenever the user clicks the button at the bottom of the form.
Submit Successful
Is triggered if the processor successfully executes the payment.
Submitted Failed
Is triggered if the payment fails to complete successfully by the processor.
Input Validation
Is triggered every time the user modifies a value on the credit card data. The results of the validation check are returned on the input validation event and can be used for custom error messages.
Note: this action chain is fired on both validation success and failure.
Advanced
State
Is Visible
Expects type boolean.
If TRUE the control will be visible. If FALSE the control will not be displayed. If the field is empty, the control will be visible.
Example
A simple credit card form:
Create a Stripe Integration at the Console level. Attach the integration to the app via the Settings. Add a Credit Card component to a Web Page. Select the integration from the dropdown. Add a valid currency value.