VueCardPayment

Awesome credit card payment form

React version

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

MIT