npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-credit-card-field-ksh

v0.3.16

Published

A generic Bootstrap 4 capatible credit card field that mimics Stripe's behavior.

Downloads

3

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.

Basic Usage Example

<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.

Basic Usage Example

Error Handling Example

<inline-credit-card-field v-model="card"></inline-credit-card-field>