Composable Moov Drops
With the moov-form
element, credit card information is updated by the user and processed directly by Moov. All information is securely captured through iframes and hidden from the customer’s website. For example, if a card number needs to be updated, the user can do this with the card-number-input
element with a moov-form
.
The example below uses all the elements of a moov-form
, and goes over styling, properties, and attributes. See the Composable elements section to view the full guides on the moov-form
and all subsequent form elements.
Note that the use of the Moov composable Drop elements requires a secure HTTPS connection.
Use the Drops 101 guide to learn the basics of properties, attributes, and initializing Drops
Full form example
|
|
Theming and styles
The composable Drop elements are unstyled, but inputs will automatically style themselves based on inheritable styles, such as font-size, color, and line-height. You can tailor the styling of the elements by adding CSS to the form’s components. The fields can be laid out in any way that best fits your app.
To re-style the inner contents of the input, use the inputStyle
property.
Note: Pseudo-selectors such as :focus
and :valid
don’t work through iframes. Instead, use :has(.focus)
to apply styles to these pseudo-states.
|
|
Properties
Properties for elements can be accessed through JavaScript using a reference to the specific form element.
- View
moov-form
properties - View
moov-text-input
properties - View
moov-card-number-input
properties - View
moov-expiration-date-input
properties - View
moov-card-security-code-input
properties
Attributes
String-type properties can be set via attributes on the HTML <moov-form>
element.
Attribute | Type | Description |
---|---|---|
name |
String | The unique name of the form |
method |
String | The HTTP method to use when submitting the form. GET , POST , PATCH , or DELETE . |
action |
String | The Moov API url to use when submitting the form, such as /accounts/{accountID} . |
Any string-type property can be set via attributes on the other moov-*-input
HTML elements:
<moov-text-input>
<moov-card-number-input>
moov-expiration-date-input
<moov-card-security-code-input>
Composable elements
Moov form
The Moov form Drop enables Moov customers to securely and seamlessly submit sensitive user data to Moov. With the moov-form element, information is entered by the user and processed directly by Moov.
Text input
Include the Moov text input Drop with the Moov form Drop to securely and seamlessly submit sensitive user data to Moov.
Card number input
Include the Moov card number input Drop with the Moov form Drop to securely and seamlessly submit sensitive card numbers to Moov.
Expiration date input
Include the Moov expiration date input Drop with the Moov form Drop to securely and seamlessly submit sensitive card data to Moov.
Card security code input
Include the Moov security code input Drop with the Moov form Drop to securely and seamlessly submit sensitive card data to Moov.