Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including svelte-credit-cards with all npm packages installed. Try it out:

var svelteCreditCards = require("svelte-credit-cards")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

svelte-credit-cards v1.2.0

A svelte component to render a credit card

Svelte Credit Card

npm version

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

Based in 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:

$ npm install svelte-credit-cards

With Yarn:

$ yarn add svelte-credit-cards

Example

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

<script>
  import CreditCard from "svelte-credit-cards";

  let number = "";
  let name = "";
  let cvc = "";
  let expiry = "";
</script>
<div>
  <label for="number">Number</label>
  <input bind:value={number} name="number" id="number" />
</div>
<div>
  <label for="name">Name</label>
  <input bind:value={name} name="name" id="name" />
</div>
<div>
  <label for="cvc">CVC</label>
  <input bind:value={cvc} name="cvc" id="cvc" maxlength="3" />
</div>
<div>
  <label for="expiry">Exp.</label>
  <input bind:value={expiry} name="expiry" id="expiry" maxlength="4" />
</div>
<CreditCard {number} {name} {cvc} {expiry} preview={true} />

Built With

react-credit-cards - A react component with beautiful credit cards for your payment forms.

Svelte Component Template - A base for building shareable Svelte components.

Payment - A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.

Contributing

Please read CONTRIBUTING 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 file for details

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free