https://github.com/charlyjazz/svelte-credit-card

A svelte component to render a credit card :credit_card:
https://github.com/charlyjazz/svelte-credit-card

css ecommerce javascript mit npm package rollup svelte ui

Last synced: 17 days ago
JSON representation

A svelte component to render a credit card :credit_card:

• Host: GitHub
• URL: https://github.com/charlyjazz/svelte-credit-card
• Owner: CharlyJazz
• License: mit
• Created: 2020-05-12T14:09:13.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2025-03-11T02:30:01.000Z (about 1 month ago)
• Last Synced: 2025-04-05T23:09:30.150Z (17 days ago)
• Topics: css, ecommerce, javascript, mit, npm, package, rollup, svelte, ui
• Language: Svelte
• Homepage:
• Size: 2.18 MB
• Stars: 67
• Watchers: 2
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Svelte Credit Card

[![npm version](https://badge.fury.io/js/svelte-credit-cards.svg)](https://badge.fury.io/js/svelte-credit-cards)

![Codecov](https://img.shields.io/codecov/c/github/charlyjazz/svelte-credit-card?label=%20&logo=codecov&logoColor=orange&style=flat-square)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Credit-card-svelte-test.gif](https://i.postimg.cc/FK2ngjbz/Credit-card-svelte-test.gif)](https://postimg.cc/GBxQbT5n)

A component to render a credit card preview, useful for ecommerces.

Based in [react-credit-cards](https://github.com/amarofashion/react-credit-cards) A react component with beautiful credit cards for your payment forms.

### Prerequisites

You need svelte-loader or a rollup svelte configuration

### Installing

With NPM:

```bash

$ npm install svelte-credit-cards

```

With Yarn:

```bash

$ yarn add svelte-credit-cards

```

## Example

You can create inputs and send the values as props to the CreditCard component

```javascript

  import CreditCard from "svelte-credit-cards"; let number = ""; let name = "";

  let cvc = ""; let expiry = "";

```

```html



  Number

  





  Name

  





  CVC

  





  Exp.

  



```

## Built With

[react-credit-cards](https://github.com/amarofashion/react-credit-cards) - A react component with beautiful credit cards for your payment forms.

[Svelte Component Template](https://github.com/sveltejs/component-template) - A base for building shareable Svelte components.

[Payment](https://github.com/jessepollak/payment) - A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.

## Contributing

Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details