vue-card-payment
VueCardPayment
Awesome credit card payment form
Installation
npm install --save vue-card-payment
Usage
with Webpack or Rollup
import Vue from 'vue'
import VueCardPayment from 'vue-card-payment'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-card-payment/dist/vue-card-payment.css'
Vue.use(VueCardPayment)
then, place this one in a place you want payment form to appear
<VueCardPayment></VueCardPayment>
Properties
Settings
Prop | Data type | Default | Description |
---|---|---|---|
showBank | bool | true | if false, card form will not be themed with bank logo and corporate styles |
showPaymentSystem | bool | true | if false, payment system logo will not be showed |
Labels
Prop | Data type | Default |
---|---|---|
labels.cardnumber | string | Card number |
labels.month | string | Month |
labels.year | string | Year |
labels.cardHolder | string | Cardholder name |
labels.button | string | Pay |
Placeholders
Prop | Data type | Default |
---|---|---|
placeholders.cardnumber | string | 0000 0000 0000 0000 |
placeholders.month | string | 00 |
placeholders.year | string | 00 |
placeholders.cardHolder | string | JOHN DOE |
placeholders.cvv | string | 000 |
Events
Event | Description |
---|---|
card-submit | fires when button is pressed |
Example with settings
<VueCardPayment :settings="{
labels: {
cardNumber: 'Card number',
month: 'Month',
year: 'Year',
cardHolder: 'Cardholder name',
button: 'pay'
},
placeholders: {
cardNumber: '0000 0000 0000 0000',
month: '00',
year: '00',
cardHolder: 'JOHN DOE',
cvv: '000'
},
showBank: true,
showPaymentSystem: true
}" @card-submit=""></VueCardPayment>
Browser
<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-card-payment/dist/vue-card-payment.css"></link>
<script src="vue-card-payment/dist/vue-card-payment.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-card-payment/dist/vue-card-payment.css"></link>
<script src="https://unpkg.com/vue-card-payment"></script>
Thanks
iserdmi for card-info plugin, this plugin is primary-based on it
braintree for card-validator plugin, this one used here for validation needs
License
Dependencies
Dependencies
add-asset-html-webpack-plugin: ^2.0.0babel-core: ^6.24.0babel-eslint: ^7.2.0babel-helper-vue-jsx-merge-props: ^2.0.0babel-loader: ^7.0.0babel-plugin-istanbul: ^4.1.0babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-object-rest-spread: ^6.23.0babel-plugin-transform-runtime: ^6.23.0babel-plugin-transform-vue-jsx: ^3.4.0babel-preset-env: ^1.4.0buble: ^0.15.2chai: ^3.5.0chai-dom: ^1.4.0clean-css: ^4.0.0copy-webpack-plugin: ^4.5.2cross-env: ^4.0.0css-loader: ^0.28.0eslint: ^3.19.0eslint-config-vue: ^2.0.0eslint-plugin-vue: ^2.0.0extract-text-webpack-plugin: ^2.1.0friendly-errors-webpack-plugin: ^1.7.0html-webpack-plugin: ^2.28.0karma: ^1.7.0karma-chai-dom: ^1.1.0karma-chrome-launcher: ^2.1.0karma-coverage: ^1.1.0karma-mocha: ^1.3.0karma-sinon-chai: ^1.3.0karma-sourcemap-loader: ^0.3.7karma-spec-reporter: ^0.0.31karma-webpack: ^2.0.0lint-staged: ^3.4.0lodash: ^4.16.4mkdirp: ^0.5.1mocha: ^3.3.0mocha-css: ^1.0.1postcss: ^6.0.0postcss-cssnext: ^2.10.0pre-commit: ^1.2.0rimraf: ^2.6.0rollup: ^0.41.6rollup-plugin-buble: ^0.15.0rollup-plugin-commonjs: ^8.0.0rollup-plugin-jsx: ^1.0.0rollup-plugin-node-resolve: ^3.0.0rollup-plugin-postcss: ^0.4.1rollup-plugin-replace: ^1.1.0rollup-plugin-vue: ^2.3.0sinon: 2.2.0sinon-chai: ^2.10.0style-loader: ^0.17.0stylefmt: ^5.3.0stylelint: ^7.10.0stylelint-config-standard: ^16.0.0stylelint-processor-html: ^1.0.0uglify-js: ^3.0.0uppercamelcase: ^3.0.0vue: ^2.3.0vue-loader: ^12.0.0vue-template-compiler: ^2.3.0webpack: ^2.5.0webpack-bundle-analyzer: ^2.4.0webpack-dashboard: ^0.4.0webpack-dev-server: ^2.4.0webpack-merge: ^4.0.0yarn-or-npm: ^2.0.0