{"id":19639506,"url":"https://github.com/charlyjazz/svelte-credit-card","last_synced_at":"2025-04-05T23:09:49.446Z","repository":{"id":39875218,"uuid":"263355543","full_name":"CharlyJazz/svelte-credit-card","owner":"CharlyJazz","description":"A svelte component to render a credit card :credit_card:","archived":false,"fork":false,"pushed_at":"2025-03-11T02:30:01.000Z","size":2288,"stargazers_count":67,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T23:09:30.150Z","etag":null,"topics":["css","ecommerce","javascript","mit","npm","package","rollup","svelte","ui"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CharlyJazz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-12T14:09:13.000Z","updated_at":"2025-03-04T05:13:30.000Z","dependencies_parsed_at":"2024-05-11T20:31:00.267Z","dependency_job_id":"0870c051-67b0-4588-ad60-ac4205047383","html_url":"https://github.com/CharlyJazz/svelte-credit-card","commit_stats":{"total_commits":90,"total_committers":8,"mean_commits":11.25,"dds":0.6111111111111112,"last_synced_commit":"66f7e6c2cdd74f20fbead3c0dd768b14f81a4eb2"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":"sveltejs/component-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fsvelte-credit-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fsvelte-credit-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fsvelte-credit-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CharlyJazz%2Fsvelte-credit-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CharlyJazz","download_url":"https://codeload.github.com/CharlyJazz/svelte-credit-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411235,"owners_count":20934653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","ecommerce","javascript","mit","npm","package","rollup","svelte","ui"],"created_at":"2024-11-11T13:01:31.969Z","updated_at":"2025-04-05T23:09:49.417Z","avatar_url":"https://github.com/CharlyJazz.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Credit Card\n\n[![npm version](https://badge.fury.io/js/svelte-credit-cards.svg)](https://badge.fury.io/js/svelte-credit-cards)\n![Codecov](https://img.shields.io/codecov/c/github/charlyjazz/svelte-credit-card?label=%20\u0026logo=codecov\u0026logoColor=orange\u0026style=flat-square)\n[![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)\n\n\n[![Credit-card-svelte-test.gif](https://i.postimg.cc/FK2ngjbz/Credit-card-svelte-test.gif)](https://postimg.cc/GBxQbT5n)\n\nA component to render a credit card preview, useful for ecommerces.\n\nBased in [react-credit-cards](https://github.com/amarofashion/react-credit-cards) A react component with beautiful credit cards for your payment forms.\n\n### Prerequisites\n\nYou need svelte-loader or a rollup svelte configuration\n\n### Installing\n\nWith NPM:\n\n```bash\n$ npm install svelte-credit-cards\n```\n\nWith Yarn:\n\n```bash\n$ yarn add svelte-credit-cards\n```\n\n## Example\n\nYou can create inputs and send the values as props to the CreditCard component\n\n```javascript\n\u003cscript\u003e\n  import CreditCard from \"svelte-credit-cards\"; let number = \"\"; let name = \"\";\n  let cvc = \"\"; let expiry = \"\";\n\u003c/script\u003e\n```\n\n```html\n\u003cdiv\u003e\n  \u003clabel for=\"number\"\u003eNumber\u003c/label\u003e\n  \u003cinput bind:value=\"{number}\" name=\"number\" id=\"number\" /\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n  \u003clabel for=\"name\"\u003eName\u003c/label\u003e\n  \u003cinput bind:value=\"{name}\" name=\"name\" id=\"name\" /\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n  \u003clabel for=\"cvc\"\u003eCVC\u003c/label\u003e\n  \u003cinput bind:value=\"{cvc}\" name=\"cvc\" id=\"cvc\" maxlength=\"3\" /\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n  \u003clabel for=\"expiry\"\u003eExp.\u003c/label\u003e\n  \u003cinput bind:value=\"{expiry}\" name=\"expiry\" id=\"expiry\" maxlength=\"4\" /\u003e\n\u003c/div\u003e\n\u003cCreditCard {number} {name} {cvc} {expiry} preview=\"{true}\" /\u003e\n```\n\n## Built With\n\n[react-credit-cards](https://github.com/amarofashion/react-credit-cards) - A react component with beautiful credit cards for your payment forms.\n\n[Svelte Component Template](https://github.com/sveltejs/component-template) - A base for building shareable Svelte components.\n\n[Payment](https://github.com/jessepollak/payment) - A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.\n\n## Contributing\n\nPlease read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlyjazz%2Fsvelte-credit-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharlyjazz%2Fsvelte-credit-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharlyjazz%2Fsvelte-credit-card/lists"}