<PaymentCardTextField /> Component
A text field component specialized for collecting credit/debit card information.
It manages multiple text fields under the hood to collect this information.
It’s designed to fit on a single line.
Props
| Key | Type | Description |
|---|---|---|
| styles | Object | Accepts all View styles, also support color param |
| cursorColor (iOS) | String | The cursor color for the field |
| textErrorColor (iOS) | String | The text color to be used when the user has entered invalid information, such as an invalid card number |
| placeholderColor (iOS) | String | The text placeholder color used in each child field |
| numberPlaceholder | String | The placeholder for the card number field |
| expirationPlaceholder | String | The placeholder for the expiration field |
| cvcPlaceholder | String | The placeholder for the cvc field |
| disabled (iOS) | Bool | Enable/disable selecting or editing the field. Useful when submitting card details to Stripe |
| enabled (Android) | Bool | Enable/disable selecting or editing the field. Useful when submitting card details to Stripe |
| onChange | Func | This function will be called each input change |
| onParamsChange(valid: Bool, params: Object) | Func | This function will be called each input change, it takes two arguments |
onParamsChange params
| Key | Type | Description |
|---|---|---|
| valid | Bool | Whether or not the form currently contains a valid card number, expiration date, and CVC |
| params | Object | Contains entered card params: number, expMonth, expYear and cvc |
Initial Params
To set initial params you can use <instance>.setParams(params) method which is available via ref.
For example, if you’re using another library to scan your user’s credit card with a camera, you can assemble that data into an object and set this property to that object to prefill the fields you’ve collected.
You can also access to valid and params info via <instance>.valid and <instance>.params respectively.
