{"id":27320084,"url":"https://github.com/entria/react-native-visa-checkout","last_synced_at":"2025-04-12T09:12:37.876Z","repository":{"id":57341292,"uuid":"120356976","full_name":"entria/react-native-visa-checkout","owner":"entria","description":null,"archived":false,"fork":false,"pushed_at":"2018-05-27T20:51:57.000Z","size":34159,"stargazers_count":27,"open_issues_count":4,"forks_count":8,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-12T09:11:58.870Z","etag":null,"topics":["react-native","visacheckout-sdk"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/entria.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-05T20:22:01.000Z","updated_at":"2021-07-16T09:06:40.000Z","dependencies_parsed_at":"2022-09-14T04:31:22.416Z","dependency_job_id":null,"html_url":"https://github.com/entria/react-native-visa-checkout","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entria%2Freact-native-visa-checkout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entria%2Freact-native-visa-checkout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entria%2Freact-native-visa-checkout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/entria%2Freact-native-visa-checkout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/entria","download_url":"https://codeload.github.com/entria/react-native-visa-checkout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248543850,"owners_count":21121838,"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":["react-native","visacheckout-sdk"],"created_at":"2025-04-12T09:11:48.547Z","updated_at":"2025-04-12T09:12:37.865Z","avatar_url":"https://github.com/entria.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-native-visa-checkout\n\n![](https://media.giphy.com/media/26DN6CPI32bApp5AI/giphy.gif)\n\n## Getting started\n\n`$ npm install react-native-visa-checkout --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-visa-checkout`\n\n### Manual installation\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-visa-checkout` and add `RNVisaCheckout.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNVisaCheckout.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n- Add `import org.reactnative.RNVisaCheckoutPackage;` to the imports at the top of the file\n- Add `new RNVisaCheckoutPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n```\ninclude ':react-native-visa-checkout'\nproject(':react-native-visa-checkout').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-visa-checkout/android')\n```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n```\ncompile project(':react-native-visa-checkout')\n```\n\n### Post install and building\n\n#### iOS\n\n1. In app's target, `Build Settings`, in `Build options` set `Always Embed Swift Standard Libraries` to `Yes`.\n2. Download the correct iOS VisaCheckout SDK for your XCode from https://developer.visa.com/capabilities/visa_checkout/docs. Add `TrustDefender.framework` and `VisaCheckoutSDK.framework`to your app's project.\n3. On your app's target, on `Embedded Binaries` click on the + and add the `VisaCheckoutSDK.framework`.\n4. The TrustDefender library also needs another system framework. In `Linked Frameworks and Libraries`, click the + button and add `libz.tbd`.\n\n5. Add the `NSFaceIDUsageDescription` key to your `Info.plist` along with a message `Permission to use Face ID` as a value, because VisaCheckout SDK may use Face ID for authentication in iPhone X.\n\n6. From VisaCheckoutSDK docs:\n```\nGo to your Build Phases tab for your target’s settings.\nClick on the + icon and select New Run Script Phase. Make sure the script is run after Embedded Frameworks.\nSelect the ✅Run script only when installing option.\nPaste the following code into the script code window:\n```\n\n```\n# This script removes simulator architectures from VisaCheckoutSDK.framework so it can be uploaded to the App Store.\n# Make this a Build Phase run script after the 'Embed Frameworks' phase.\n# 'Run script only when installing' should be checked.\n# http://stackoverflow.com/questions/30547283/submit-to-app-store-issues/30866648\n\nAPP_PATH=\"${TARGET_BUILD_DIR}/${WRAPPER_NAME}\"\n\nFRAMEWORK_EXECUTABLE_NAME=VisaCheckoutSDK\nfind \"$APP_PATH\" -name \"${FRAMEWORK_EXECUTABLE_NAME}.framework\" -type d | while read -r FRAMEWORK\ndo\n\nFRAMEWORK_EXECUTABLE_PATH=\"$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME\"\n\nEXTRACTED_ARCHS=()\n\nfor ARCH in $ARCHS\ndo\nlipo -extract \"$ARCH\" \"$FRAMEWORK_EXECUTABLE_PATH\" -o \"$FRAMEWORK_EXECUTABLE_PATH-$ARCH\"\nEXTRACTED_ARCHS+=(\"$FRAMEWORK_EXECUTABLE_PATH-$ARCH\")\ndone\n\nlipo -o \"$FRAMEWORK_EXECUTABLE_PATH-merged\" -create \"${EXTRACTED_ARCHS[@]}\"\nrm \"${EXTRACTED_ARCHS[@]}\"\n\nrm \"$FRAMEWORK_EXECUTABLE_PATH\"\nmv \"$FRAMEWORK_EXECUTABLE_PATH-merged\" \"$FRAMEWORK_EXECUTABLE_PATH\"\ndone\n```\n\n4. Build your project.\n\n#### Android\n\n1. In your `android/build.gradle` add this inside the `allprojetcs/repositories`:\n```\nflatDir {\ndirs project(':react-native-visa-checkout').file('libs')\n}\n```\nFor example:\n```\nallprojects {\nrepositories {\n...\nflatDir {\ndirs project(':react-native-visa-checkout').file('libs')\n}\n}\n}\n```\n2. In your manifest add the following permissions:\n```\n\u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n\u003cuses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/\u003e\n\u003cuses-permission android:name=\"android.permission.VIBRATE\"/\u003e\n\u003cuses-permission android:name=\"android.permission.USE_FINGERPRINT\"/\u003e\n```\n3. In your manifest in `\u003capplication` set the `android:allowBackup` to `false:\n```\n\u003capplication\nandroid:name=\".MainApplication\"\nandroid:allowBackup=\"false\"\n```\n\n## Methods\n\n### RNVisaCheckout\n\n#### `configureProfileAsync:Promise`\n\nParameters:\n- `environment` (number):\n- Use either `RNVisaCheckout.Constants.Environment.Sandbox` or `RNVisaCheckout.Constants.Environment.Production`. Use Sandbox for testing and development.\n- `apiKey` (string):\n- Create an API key at [Visa Portal](https://developer.visa.com) and pass it here.\n- `profileName` (string):\n- Pass your profile name. Can be `null` if you do not have it.\n\nConfigures your environment. If promise is resolved, it worked and you are ready to use checkout. If it rejected, an error has occured and you can see the message.\n\n#### `checkoutAsync:Promise`\n\nParameters:\n- `total` (double):\n- The value of your transaction as a double (for example, 22.03).\n- `currency` (integer):\n- The currency code of the currency that your transaction should use. Use a `RNVisaCheckout.Constants.Currency` value, like `RNVisaCheckout.Constants.Currency.USD` for american dollars.\n\nOpens up the checkout screen for your user to make the transaction using the Visa SDK.\nIf the promise is resolved it should return an object representing the payment summary, it has the format:\n```\ncallId: string,\nlastFourDigits: string,\ncountry: number,\npostalCode: string,\npaymentMethodType: string,\ncardBrand: number,\nencryptedKey: string,\n```\n\n`cardBrand` is an int of the value of `RNVisaCheckout.Constants.Card` of the card used in the transaction.\n`country` is an int of the value of `RNVisaCheckout.Constants.Country`.\n\nIf the promise is rejected, an error message will be shown accordingly.\n\n### RNVisaCheckoutButton\n\n#### Properties\n\n###### `cardStyle`\n\nValues: `RNVisaCheckout.Constants.CardStyle.Neutral` or `RNVisaCheckout.Constants.CardStyle.Standard` (default).\n\nSets the card style on the left side of the button.\n\n###### `cardAnimations`\n\nValues: `true` (default) or `false`\n\nSets if the swipe animation is on or off. If off, nothing will happen when trying to drag the arrow image on the left.\n\n###### `checkoutOptions`\n\nThis sets the checkout options for the transaction to be done when the user swipes the Visa Checkout Button all the way and the Visa Checkout screens pops up.\n\nAn object with two fields:\n- `total` (double):\n- The value of your transaction as a double (for example, 22.03).\n- `currency` (integer):\n-  The currency code of the currency that your transaction should use. Use a `RNVisaCheckout.Constants.Currency` value, like `RNVisaCheckout.Constants.Currency.USD` for american dollars.\n\nThe default is `{ total: 0, currency: 0 }`.\n\n###### `onCardCheckout`\n\nFunction to be called when the user swipes the card to the end and FINISHES the transaction without errors.\n\nThe object received is a payment summary and has the format:\n\n```\ncallId: string,\nlastFourDigits: string,\ncountry: number,\npostalCode: string,\npaymentMethodType: string,\ncardBrand: number,\nencryptedKey: string,\n```\n\n`cardBrand` is an int of the value of `RNVisaCheckout.Constants.Card` of the card used in the transaction.\n`country` is an int of the value of `RNVisaCheckout.Constants.Country`.\n\n###### `onCardCheckoutError`\n\nFunction to be called when the user swiped the card to the end but something went wrong with the transaction, like a user cancellation or a Visa internal error.\n\nThe object received has two fields: `code` (string) and `message` (string) containing the error code and error message.\n\n## Constants\n\n### Environment\nPrefix: `RNVisaCheckout.Constants.Environment` or `RNVisaCheckoutButton.Constants.Environment`.\n\nValues: `RNVisaCheckout.Constants.Environment.Sandbox` or `RNVisaCheckout.Constants.Environment.Production`.\n\n### Card\nPrefix: `RNVisaCheckout.Constants.Card` or `RNVisaCheckoutButton.Constants.Card`.\n\nValues:\n- `RNVisaCheckout.Constants.Card.Amex`;\n- `RNVisaCheckout.Constants.Card.Discover`;\n- `RNVisaCheckout.Constants.Card.Electron`;\n- `RNVisaCheckout.Constants.Card.Elo`;\n- `RNVisaCheckout.Constants.Card.Mastercard`;\n- `RNVisaCheckout.Constants.Card.Visa`;\n\n### CardStyle\nPrefix: `RNVisaCheckout.Constants.CardStyle` or `RNVisaCheckoutButton.Constants.CardStyle`.\n\nValues: `RNVisaCheckout.Constants.CardStyle.Standard` or `RNVisaCheckout.Constants.CardStyle.Neutral.`\n\n### Currency\nPrefix: `RNVisaCheckout.Constants.Currency` or `RNVisaCheckoutButton.Constants.Currency`.\n\nValues:\n- `RNVisaCheckout.Constants.Currency.AED`\n- `RNVisaCheckout.Constants.Currency.ARS`\n- `RNVisaCheckout.Constants.Currency.AUD`\n- `RNVisaCheckout.Constants.Currency.BRL`\n- `RNVisaCheckout.Constants.Currency.CAD`\n- `RNVisaCheckout.Constants.Currency.CLP`\n- `RNVisaCheckout.Constants.Currency.CNY`\n- `RNVisaCheckout.Constants.Currency.EUR`\n- `RNVisaCheckout.Constants.Currency.GBP`\n- `RNVisaCheckout.Constants.Currency.HKD`\n- `RNVisaCheckout.Constants.Currency.INR`\n- `RNVisaCheckout.Constants.Currency.KWD`\n- `RNVisaCheckout.Constants.Currency.MYR`\n- `RNVisaCheckout.Constants.Currency.NZD`\n- `RNVisaCheckout.Constants.Currency.PEN`\n- `RNVisaCheckout.Constants.Currency.PLN`\n- `RNVisaCheckout.Constants.Currency.QAR`\n- `RNVisaCheckout.Constants.Currency.SAR`\n- `RNVisaCheckout.Constants.Currency.SGD`\n- `RNVisaCheckout.Constants.Currency.UAH`\n- `RNVisaCheckout.Constants.Currency.USD`\n- `RNVisaCheckout.Constants.Currency.ZAR`\n\n### Country\nPrefix: `RNVisaCheckout.Constants.Country` or `RNVisaCheckoutButton.Constants.Country`.\n\nValues:\n- `RNVisaCheckout.Constants.Country.Argentina`\n- `RNVisaCheckout.Constants.Country.Australia`\n- `RNVisaCheckout.Constants.Country.Brazil`\n- `RNVisaCheckout.Constants.Country.Canada`\n- `RNVisaCheckout.Constants.Country.Chile`\n- `RNVisaCheckout.Constants.Country.China`\n- `RNVisaCheckout.Constants.Country.Colombia`\n- `RNVisaCheckout.Constants.Country.France`\n- `RNVisaCheckout.Constants.Country.HongKong`\n- `RNVisaCheckout.Constants.Country.India`\n- `RNVisaCheckout.Constants.Country.Ireland`\n- `RNVisaCheckout.Constants.Country.Kuwait`\n- `RNVisaCheckout.Constants.Country.Malaysia`\n- `RNVisaCheckout.Constants.Country.Mexico`\n- `RNVisaCheckout.Constants.Country.NewZealand`\n- `RNVisaCheckout.Constants.Country.Peru`\n- `RNVisaCheckout.Constants.Country.Poland`\n- `RNVisaCheckout.Constants.Country.Qatar`\n- `RNVisaCheckout.Constants.Country.SaudiArabia`\n- `RNVisaCheckout.Constants.Country.Singapore`\n- `RNVisaCheckout.Constants.Country.SouthAfrica`\n- `RNVisaCheckout.Constants.Country.Spain`\n- `RNVisaCheckout.Constants.Country.Ukraine`\n- `RNVisaCheckout.Constants.Country.UnitedArabEmirates`\n- `RNVisaCheckout.Constants.Country.UnitedKingdom`\n- `RNVisaCheckout.Constants.Country.UnitedStates`\n\n## Usage\n\n### RNVisaCheckout methods\n\n```javascript\nimport RNVisaCheckout from 'react-native-visa-checkout';\n\nawait RNVisaCheckout.configureProfileAsync(RNVisaCheckout.Constants.Environment.Sandbox, 'apiKey', null);\nconst checkoutData = await RNVisaCheckout.checkoutAsync(22.09, RNVisaCheckout.Constants.Currency.USD);\nconsole.log(checkoutData);\n```\n\n### RNVisaCheckoutButton\n\nSee the Example app in this repository to see a demo of the RNVisaCheckoutButton in action.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fentria%2Freact-native-visa-checkout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fentria%2Freact-native-visa-checkout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fentria%2Freact-native-visa-checkout/lists"}