# Credit Card

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-32935d607c66588c6b45b8fc95294c6b6c7d75c0%2Fcredit-card-web-control-v180-0.png?alt=media)

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](../building-apps/payments/creating-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](../variable-data-types/the-currency-variable-data-type) data type value representing the amount to be charged. For example:

```javascript
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](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### 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](web-controls-overview/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.&#x20;

**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](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-66a5e56a1284e955dfb457aaba4e5888e32802d6%2Fcredit-card-web-control-v180-1.png?alt=media)

Create a Stripe Integration at the Console level. Attach the integration to the app via the [Settings](../studio/builder-bar/settings). Add a Credit Card component to a Web Page. Select the integration from the dropdown. Add a valid currency value.
