vue-credit-card-field-ksh
v0.3.16
Published
A generic Bootstrap 4 capatible credit card field that mimics Stripe's behavior.
Downloads
12
Readme
vue-credit-card-field
This repository is a collection of Vue components for credit card field UI's. As time goes on and trends change, the best credit card UI tends to change. All of the components are fully compatible with Bootstrap 4.
Features
- Fully compatible and designed for Bootstrap 4
- Extensible and written in ES6
- Responsive for mobile, tablets, and desktop
- Inline error handling and client side validation fields on a form
Installation
NPM
npm install vue-credit-card-field --save
Available Components
This repository contains multiple standalone components. You can import the component you want to use like so:
import { CreditCardField, InlineCreditCardField } from 'vue-credit-card-field';
export default {
components: {
CreditCardField,
InlineCreditCardField
}
}
CreditCardField
This is the standard credit card field. It has individual fields and not based on Stripe. Newer case studies suggest individual fields can give a better return. More studies show that only showing the fields that are relevant to no overwhelm the user and clutter the UI before the user as comitted will improve results. This field attempts to build on those principles.
<credit-card-field v-model="card"></credit-card-field>
InlineCreditCardField
This field mimics Stripe's elements UI. It works well unless the space is too narrow and the fields start to overlap.
<inline-credit-card-field v-model="card"></inline-credit-card-field>