Svelte Payment Inputs

Svelte Payment Inputs is a collection of unstyled payment input components for Svelte.

This is a port of React Payment Inputs for React, which was created by Medipass.

Usage

To start using the library, install it in your project:

npm install svelte-payment-inputs

Use the drawer in your app.

<script>
	import { Package } from "svelte-payment-inputs";
</script>

<Package
  name="Visa"
  number="4111 1111 1111 1111"
  expiry="12/23"
  cvc="123"
  on:change={(event) => {
    console.log(event.detail);
  }}
</Package>

Documentation

The documentation is hosted on GitHub Pages.

Examples

Play around with the examples on StackBlitz:

• With scaled background

API Reference

TBD

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Everything inside src/lib is part of the library, everything inside src/routes is the documentation.

Building

To build the library:

npm run package

To create a production version of the documentation:

npm run build

You can preview the production build with npm run preview.

To deploy the app, you may need to install an adapter for your target environment.

Publishing

To publish the library to npm:

npm publish

Testing

To run the tests, use the following command:

npm run test

Roadmap

The roadmap for the project is available in the ROADMAP.md file.

Acknowledgements

TBD

License

The svelte-payment-inputs is licensed under the MIT License.

Contributing

Contributions are welcome! Please read the contributing guidelines for more information.