{"id":15151814,"url":"https://github.com/lokcito/rycard","last_synced_at":"2026-02-11T04:32:25.449Z","repository":{"id":57156183,"uuid":"300931629","full_name":"lokcito/rycard","owner":"lokcito","description":"Is a react component that implements an input card form to receipt the Number cards, Dates expired and CVV code. To help to the user the form shows some errors when the card is incomplete or when the date expired is not in range of valid dates.","archived":false,"fork":false,"pushed_at":"2020-10-11T18:38:13.000Z","size":3243,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-14T06:40:06.154Z","etag":null,"topics":["bootstrap","card","component","forms","payment","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lokcito.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-03T16:57:59.000Z","updated_at":"2020-10-11T18:37:57.000Z","dependencies_parsed_at":"2022-08-28T15:21:15.502Z","dependency_job_id":null,"html_url":"https://github.com/lokcito/rycard","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/lokcito/rycard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokcito%2Frycard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokcito%2Frycard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokcito%2Frycard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokcito%2Frycard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lokcito","download_url":"https://codeload.github.com/lokcito/rycard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokcito%2Frycard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270742043,"owners_count":24637504,"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","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap","card","component","forms","payment","react"],"created_at":"2024-09-26T15:22:01.290Z","updated_at":"2026-02-11T04:32:25.440Z","avatar_url":"https://github.com/lokcito.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rycard\n\n\u003e Is a react component that implements an input card form to receipt the Number cards, Dates expired and CVV code. \nTo help to the user the form shows some errors when the card is incomplete or when the date expired is not in range of valid dates.\n\n[![NPM](https://img.shields.io/npm/v/rycard.svg)](https://www.npmjs.com/package/rycard) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save rycard\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport Rycard from 'rycard'\nimport 'rycard/dist/index.css'\n\nclass Example extends Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      'endpoint': '/my-route-where-i-charge',\n      'email': 'someone@somedomain.com',\n      'price': 100.00\n    };\n    this.onResponse = this.onResponse.bind(this);\n    this.onNativeResponse = this.onNativeResponse.bind(this);\n    this.onError = this.onError.bind(this);\n  }\n  onResponse(response) {\n    console.log('data response:', response);\n  }\n  onNativeResponse(response) {\n    console.log('full response:', onNativeResponse);\n  }  \n  onError(err) {\n    console.log('error', err);\n  }\n  render() {\n    return \u003cRycard endpoint={this.state.endpoint} \n      email={this.state.email} \n      price={this.state.price} \n      onNativeResponse={this.onNativeResponse} \n      onResponse={this.onResponse} \n      onError={this.onError} /\u003e\n  }\n}\n```\n### Params\n| Name | Description | Type | \n| ------ | ------ | ------ |\n| endpoint |Url where the card will send the request POST | String\n| email | Email that will be part of the form request. | String\n| price |The amount that will be charge by the backend.| Number\n\n## Bootstrap\nTo get stylized this form you must include bootstrap in your html headers\n [![Example](https://i.imgur.com/6xq0ANg.png)](http://games.rayrojas.info/card/?path=/docs/ry-card--default)\n```\n\u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\" integrity=\"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z\" crossorigin=\"anonymous\"\u003e\n```\n\n## Storybook\n\n[http://games.rayrojas.info/card](http://games.rayrojas.info/card)\n\n## License\n\nMIT © [lokcito](https://github.com/lokcito)\n\n\n## References: \n - https://www.npmjs.com/package/create-react-library\n - https://github.com/Groftware/template-reactnpm\n - https://github.com/zxol/react-component-publish\n - https://stackoverflow.com/questions/48395804/where-is-create-react-app-webpack-config-and-files\n - https://www.npmjs.com/package/react-button-component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flokcito%2Frycard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flokcito%2Frycard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flokcito%2Frycard/lists"}