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.

Properties

General

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.

Description

Expects type text.

An arbitrary string attached to the object. Often useful for displaying to users.

Button Text

Expects type text.

The text that is displayed on the Button in the Credit Card Control.

Credit Card

Connected Account

Expects the ID of the connected account to use for payment processing.

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.

Customer

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

Accessibility

Aria Label

Expects type text.

The aria-label attribute is used to define a string that labels the current element. It is used to provide an accessible name for the control. For more information see here.

More

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.

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.

Is Disabled

Expects type boolean.

If TRUE, the Control will be disabled and the user will not be able to interact with the Control. If FALSE, it will be enabled. If the field is empty, it will be enabled.

Style

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.

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.