Credit Card

organizing info

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:

organizing info

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.