{"id":4739,"url":"https://github.com/Kerumen/react-native-awesome-card-io","last_synced_at":"2025-08-04T02:31:32.762Z","repository":{"id":10773840,"uuid":"66923243","full_name":"Kerumen/react-native-awesome-card-io","owner":"Kerumen","description":"A complete and cross-platform card.io component for React Native (iOS and Android).","archived":false,"fork":false,"pushed_at":"2023-01-27T04:26:44.000Z","size":156784,"stargazers_count":458,"open_issues_count":27,"forks_count":134,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-23T05:02:16.022Z","etag":null,"topics":["android","card-io","card-scanning","ios","react","react-native"],"latest_commit_sha":null,"homepage":"https://kerumen.github.io/react-native-awesome-card-io/","language":"Objective-C","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/Kerumen.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":"2016-08-30T08:46:53.000Z","updated_at":"2025-03-14T02:33:11.000Z","dependencies_parsed_at":"2023-02-15T05:16:32.368Z","dependency_job_id":null,"html_url":"https://github.com/Kerumen/react-native-awesome-card-io","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/Kerumen/react-native-awesome-card-io","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kerumen%2Freact-native-awesome-card-io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kerumen%2Freact-native-awesome-card-io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kerumen%2Freact-native-awesome-card-io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kerumen%2Freact-native-awesome-card-io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kerumen","download_url":"https://codeload.github.com/Kerumen/react-native-awesome-card-io/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kerumen%2Freact-native-awesome-card-io/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267716028,"owners_count":24133065,"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-07-29T02:00:12.549Z","response_time":2574,"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":["android","card-io","card-scanning","ios","react","react-native"],"created_at":"2024-01-05T20:17:21.836Z","updated_at":"2025-08-04T02:31:32.479Z","avatar_url":"https://github.com/Kerumen.png","language":"Objective-C","funding_links":[],"categories":["Components","Other Lists","\u003ca name=\"Utility-\u0026-Build-\u0026-Publish:-Native-Modules\"\u003eUtility, Build \u0026 Publish: Native Modules\u003c/a\u003e"],"sub_categories":["Integrations","TeX Lists"],"readme":"# ⚠️ Both [iOS](https://github.com/card-io/card.io-iOS-SDK) and [Android](https://github.com/card-io/card.io-Android-SDK) SDKs have been archived\nAs this wrapper depends on them, there is not much I can do to support new OS versions or fix bugs..\nI tried to reach out people there to have an explanation on the deprecation but I'm yet to receive a response. In the meantime, please be comprehensive and do not open issues not related to the wrapper. Thanks!\n\n# [react-native-awesome-card-io](https://kerumen.github.io/react-native-awesome-card-io/)\n\nA complete and **cross-platform** [card.io](https://www.card.io/) component for React Native.\n\n## Getting started\n\n```bash\n$ npm install react-native-awesome-card-io --save\n$ cd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\n### iOS\n\nYou should add the key [NSCameraUsageDescription](https://developer.apple.com/documentation/bundleresources/information_property_list/nscamerausagedescription) to your app's Info.plist and set the value to be a string describing why your app needs to use the camera (e.g. \"To scan credit cards.\"). This string will be displayed when the app initially requests permission to access the camera.\n\n## Usage\n\nThis component provides an abstraction of the card.io entry points for iOS and Android.\n\n| Javascript     | iOS                                                                                             | Android                                                                                              | Description                                                                         |\n| -------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |\n| `CardIOModule` | [`CardIOPaymentViewController`](https://github.com/card-io/card.io-iOS-SDK#integrate-as-a-view) | [`CardIOActivity`](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html) | A module to launch the card.io view controller which handles everything.            |\n| `CardIOView`   | [`CardIOView`](https://github.com/card-io/card.io-iOS-SDK#integrate-as-a-view-controller)       | N / A                                                                                                | Create a `CardIOView` to do card scanning only and manage everything else yourself. |\n\n### `CardIOView` (iOS only)\n\n_This component is iOS-only as the card.io Android SDK does not offer this functionality._\n\n```jsx\nimport React, { Component } from 'react'\nimport { View } from 'react-native'\nimport { CardIOView, CardIOUtilities } from 'react-native-awesome-card-io'\n\nexport default class CardIOExample extends Component {\n  componentWillMount() {\n    CardIOUtilities.preload()\n  }\n\n  didScanCard = card =\u003e {\n    // the scanned card\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cCardIOView didScanCard={this.didScanCard} style={{ flex: 1 }} /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n#### Props\n\n`didScanCard` _function_ **Required** - This function will be called when the CardIOView completes its work and returns a [CreditCard](#creditcard). ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOViewDelegate.h#L24))\n\n`languageOrLocale` _string_ - The preferred language for all strings appearing in the user interface. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L38))\n\n`guideColor` _string_ - Alter the card guide (bracket) color. Opaque colors recommended. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L42))\n\n`useCardIOLogo` _boolean_ `false` - Set to `true` to show the card.io logo over the camera instead of the PayPal logo. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L45))\n\n`hideCardIOLogo` _boolean_ `false` - Hide the PayPal or card.io logo in the scan view. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L48))\n\n`allowFreelyRotatingCardGuide` _boolean_ `true` - By default, in camera view the card guide and the buttons always rotate to match the device's orientation. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L55))\n\n`scanInstructions` _string_ - Set the scan instruction text. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L59))\n\n`scanExpiry` _string_ `true` - Set to `false` if you don't want the camera to try to scan the card expiration. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L79))\n\n`scannedImageDuration` _number_ `1.0` - How long the CardIOView will display an image of the card with the computed card number superimposed after a successful scan. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L97))\n\n`detectionMode` _[CardIODetectionMode](#constants)_ `CardIODetectionModeCardImageAndNumber` - Set the detection mode. ([Docs](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOView.h#L90))\n\n### `CardIOModule`\n\n_This module abstracts the [`CardIOPaymentViewController`](https://github.com/card-io/card.io-iOS-SDK#integrate-as-a-view) on iOS and the [`CardIOActivity`](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html) on Android._\n\n```jsx\nimport React, { Component } from 'react'\nimport { View, TouchableOpacity, Text, Platform } from 'react-native'\nimport { CardIOModule, CardIOUtilities } from 'react-native-awesome-card-io'\n\nexport default class CardIOExample extends Component {\n  componentWillMount() {\n    if (Platform.OS === 'ios') {\n      CardIOUtilities.preload()\n    }\n  }\n\n  scanCard() {\n    CardIOModule.scanCard()\n      .then(card =\u003e {\n        // the scanned card\n      })\n      .catch(() =\u003e {\n        // the user cancelled\n      })\n  }\n\n  render() {\n    return (\n      \u003cView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n        \u003cTouchableOpacity onPress={this.scanCard.bind(this)}\u003e\n          \u003cText\u003eScan card!\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n#### Methods\n\n`scanCard([config])` -\u003e Promise - Launch the card.io controller to manage the card scanning and get the [CreditCard](#creditcard) result in the resolved promise.\n\n- `config` On object with the following available keys:\n\n  - `languageOrLocale` _string_ - The preferred language for all strings appearing in the user interface. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L43) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_LANGUAGE_OR_LOCALE))\n  - `guideColor` _string_ - Alter the card guide (bracket) color. Opaque colors recommended. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L70) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_GUIDE_COLOR))\n  - `useCardIOLogo` _boolean_ `false` - Set to `true` to show the card.io logo over the camera view instead of the PayPal logo. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L148) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_USE_CARDIO_LOGO))\n  - `hideCardIOLogo` _boolean_ `false` - Hide the PayPal or card.io logo in the scan view. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L96) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_HIDE_CARDIO_LOGO))\n  - `scanInstructions` _string_ - Set the scan instruction text. If nil, use the default text. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L93) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_SCAN_INSTRUCTIONS))\n  - `suppressManualEntry` _boolean_ `false` - Set to `true` to prevent card.io from showing its \"Enter Manually\" button. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L163) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_SUPPRESS_MANUAL_ENTRY))\n  - `suppressConfirmation` _boolean_ `false` - If `true`, don't have the user confirm the scanned card, just return the results immediately. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L74) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_SUPPRESS_CONFIRMATION))\n  - `requireExpiry` _boolean_ `true` - Set to `false` if you don't need to collect the card expiration. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L126) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_REQUIRE_EXPIRY))\n  - `requireCVV` _boolean_ `true` - Set to `false` if you don't need to collect the CVV from the user. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L129) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_REQUIRE_CVV))\n  - `requirePostalCode` _boolean_ `false` - Set to `false` if you need to collect the billing postal code. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L132) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_REQUIRE_POSTAL_CODE))\n  - `restrictPostalCodeToNumericOnly` _boolean_ `false` - Set to `true` if the postal code should only collect numeric input. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L137) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_RESTRICT_POSTAL_CODE_TO_NUMERIC_ONLY))\n  - `requireCardholderName` _boolean_ `false` - Set to `true` if you need to collect the cardholder name. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L140) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_REQUIRE_CARDHOLDER_NAME))\n  - `scanExpiry` _boolean_ `true` - Set to `false` if you don't want the camera to try to scan the card expiration. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L145) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_SCAN_EXPIRY))\n\n  - `disableBlurWhenBackgrounding` _boolean_ `false` (iOS only) - Disable the blur of the screen when the app is backgrounded. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L163))\n  - `keepStatusBarStyle` _boolean_ `false` (iOS only) - If `true`, the status bar's style will be kept as whatever your app has set it to. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L48))\n  - `detectionMode` _[CardIODetectionMode](#constants)_ `false` (iOS only) - Set the detection mode. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L123))\n  - `suppressScannedCardImage` _boolean_ `false` (iOS only) - If `true`, instead of displaying the image of the scanned card, present the manual entry screen with the scanned card number prefilled. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L79))\n  - `scannedImageDuration` _number_ `0.1` (iOS only) - How long card.io will display an image of the card with the computed card number superimposed after a successful scan. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L86))\n  - `allowFreelyRotatingCardGuide` _boolean_ `true` (iOS only) - By default, in camera view the card guide and the buttons always rotate to match the device's orientation. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOPaymentViewController.h#L155))\n\n  - `noCamera` _boolean_ `false` (Android only) - If set, the card will not be scanned with the camera. ([Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_NO_CAMERA))\n  - `unblurDigits` _number_ `-1` (Android only) - Privacy feature. How many of the Card number digits NOT to blur on the resulting image. Setting it to 4 will blur all digits except the last four. ([Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_UNBLUR_DIGITS))\n  - `usePaypalActionbarIcon` _boolean_ `false` (Android only) - Use the PayPal icon in the ActionBar. ([Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#EXTRA_USE_PAYPAL_ACTIONBAR_ICON))\n\n### CreditCard\n\nAn object with the following keys:\n\n- `cardType` _string_ - Localized card type.\n- `cardNumber` _string_ - Card number.\n- `redactedCardNumber` _string_ - Card number with all but the last four digits obfuscated.\n- `expiryMonth` _number_ - Expiry month with january as 1 (may be 0 if expiry information was not requested).\n- `expiryYear` _number_ - Expiry year (may be 0 if expiry information was not requested).\n- `cvv` _string_ - Security code.\n- `postalCode` _string_ - Postal code. Format is country dependent.\n- `scanned` _boolean_ - Was the card number scanned (as opposed to entered manually)?\n- `cardholderName` _string_ - Card holder name.\n\n### CardIOUtilities\n\n#### Methods\n\n`canReadCardWithCamera()` -\u003e Boolean - Determine whether this device supports camera-based card scanning. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOUtilities.h#L24) / [Android](http://card-io.github.io/card.io-Android-SDK/io/card/payment/CardIOActivity.html#canReadCardWithCamera--))\n\n`preload` -\u003e void (iOS only) - The preload method prepares card.io to launch faster. ([iOS](https://github.com/card-io/card.io-iOS-SDK/blob/ec9a8632c9fd879537354d4b9075aa487dcebe8b/CardIO/CardIOUtilities.h#L31))\n\n#### Constants\n\n`DETECTION_MODE`: String\n\n- `IMAGE_AND_NUMBER` (CardIODetectionModeCardImageAndNumber) - the scanner must successfully identify the card number.\n- `IMAGE` (CardIODetectionModeCardImageOnly) - don't scan the card, just detect a credit-card-shaped card.\n- `AUTOMATIC` (CardIODetectionModeAutomatic) - start as CardIODetectionModeCardImageAndNumber, but fall back to CardIODetectionModeCardImageOnly if scanning has not succeeded within a reasonable time.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKerumen%2Freact-native-awesome-card-io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKerumen%2Freact-native-awesome-card-io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKerumen%2Freact-native-awesome-card-io/lists"}