{"id":20051727,"url":"https://github.com/seerbit/react-native-seerbit","last_synced_at":"2026-04-17T04:03:18.132Z","repository":{"id":227884282,"uuid":"764704379","full_name":"seerbit/react-native-seerbit","owner":"seerbit","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-27T22:12:34.000Z","size":1612,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-14T15:28:03.745Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/seerbit.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":"2024-02-28T15:07:14.000Z","updated_at":"2024-03-24T19:54:22.000Z","dependencies_parsed_at":"2025-03-02T08:42:33.441Z","dependency_job_id":"2732ebf6-06da-47ca-a0be-f4075e60cc14","html_url":"https://github.com/seerbit/react-native-seerbit","commit_stats":null,"previous_names":["seerbit/seerbit-react-native-checkout","seerbit/react-native-seerbit"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/seerbit/react-native-seerbit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Freact-native-seerbit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Freact-native-seerbit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Freact-native-seerbit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Freact-native-seerbit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seerbit","download_url":"https://codeload.github.com/seerbit/react-native-seerbit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Freact-native-seerbit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31914458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"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":[],"created_at":"2024-11-13T12:05:37.175Z","updated_at":"2026-04-17T04:03:18.119Z","avatar_url":"https://github.com/seerbit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![seerbit](https://user-images.githubusercontent.com/74198009/230321289-beb6c9ec-6d29-4d79-84cb-abb0606a23ab.png)\n                                                      \n\n\n # SeerBit React Native  Checkout\n \nSeerBit React Native sdk is used to seamlessly integrate SeerBit payment gateways into React Native applications. It is very simple and easy to integrate. It is a wrapper built around SeerBit checkout on native ios and android.\n\n## Requirements:\n\n- The merchant must have an account with SeerBit or create one on [SeerBit Merchant Dashboard](https://www.dashboard.seerbitapi.com/#/auth/login) to get started.\n- Obtain the live public key of the merchant.\n\n## Implementation:\n\n- Add the package to your React native project: \n\n```\nnpm install react-native-seerbit\n```\n\nor \n\n```\nyarn add react-native-seerbit\n```\n\n- Then navigate the ios folder of your project, run \n\n```\npod install\n```\n\n - If you encounter an error, be sure that flipper is disabled by commenting out the following line in your podfile\n ```\n  :flipper_configuration =\u003e flipper_config,\n ```\n and be sure that use_frameworks is enabled by adding the following line in your podfile before target\n ```\n use_frameworks! :linkage =\u003e :static \n ```\n\n If you still encounter an error that states like \"Multiple commands produce........./Assets.car\", then also add the below code to your podfile, before target. \n \n ```\n install! 'cocoapods', :disable_input_output_paths =\u003e true\n ```\n This should fix all problems.\n\n- After adding the package to your project, import SeerBitCheckout methods into the file you want to use them like so:\n\n```\nimport { openCheckout, eventEmitter } from 'react-native-seerbit';\n```\n\n### Configure deeplink in your project\n\n- Add deeplink configuration to ios part of your project with the following custom uri scheme:\n\n```\nseerbitioscheckout\n```\n- The most straightforward way to add a deeplink is to click on the info tab when you select your project target on Xcode. Click on the URL Types chevron and paste \"seerbitioscheckout\" on URL Schemes placeholder.\n\n- This sdk works for iOS 16.0 and above. Make sure your project is targeting iOS 16.0 and above. In the case where your project targets ios 15 and below, the sdk will install, but users running ios 15 and below will be prompted to update thier ios version.\n\n- Note that if you already have a url scheme for your project, you still have to create another one with the custom url scheme above.\n \n ## Usage: These parameters must be supplied to the openCheckout method;\n \n  ### Required:\n  \n - Merchant's live public key // SBTESTPUBK_t4G16GCA1O51AV0Va3PPretaisXubSw1 (This a test public key for test purpose)\n - Amount\n - Customer's full name\n - Customer's email\n - Customer's phone number\n \n ### Optional\n \n - productId // defaults to empty string\n - vendorId //defaults to empty string\n - currency //defaults to merchant's country currency\n - country //defaults to merchant's country\n - pocketReference // used when money is to be moved to pocket\n - transactionPaymentReference //we generate payment reference for each transaction, but if you supply yours, the sdk will use it.\n - tokenize // used only when card is to be tokenized -  defaults to false\n - productDescription //defaults to empty string\n\n\n ## Example\n \n \n ```\nimport * as React from 'react';\nimport { StyleSheet, View, Text, TouchableOpacity, SafeAreaView } from 'react-native';\nimport { openCheckout, eventEmitter } from 'react-native-seerbit';\n\ninterface Props {\n    placeholder: string,\n    value: string,\n    onChangeText: any,\n    style?: object,\n    rootStyle?: object,\n    isForPassword?: boolean,\n    keyboardType?: 'default' | 'numeric',\n    editable?: boolean,\n    placeholderStyle?: string,\n    onEnterPressed?: any,\n    returnKeyType?: 'next' | 'done',\n    disabled?: boolean,\n    onFocus?: () =\u003e void,\n    onBlur?: () =\u003e void,\n    toFocus?: boolean\n}\nconst CustomInput: React.FC\u003cProps\u003e = ({\n    placeholder,\n    placeholderStyle,\n    value,\n    onChangeText = () =\u003e { },\n    style,\n    rootStyle,\n    editable = true,\n    keyboardType = 'default',\n    onEnterPressed = () =\u003e { },\n    returnKeyType = 'next',\n    onBlur = () =\u003e { },\n    onFocus = () =\u003e { },\n}) =\u003e {\n    const [focus, setFocus] = useState\u003cboolean\u003e(false)\n    const inputRef = useRef\u003cany\u003e(null)\n\n\n    return (\n        \u003cView\n            style={[focus ? styles.root1 : styles.root2, rootStyle]}\n        \u003e\n            \u003cTextInput\n                placeholder={placeholder}\n                value={value}\n                onChangeText={onChangeText}\n                style={[styles.input, style]}\n                onFocus={() =\u003e {\n                    setFocus(true)\n                    onFocus()\n                }}\n                onBlur={() =\u003e {\n                    setFocus(false)\n                    onBlur()\n                }}\n                editable={editable}\n                placeholderTextColor={placeholderStyle ? placeholderStyle : 'gray'}\n                keyboardType={keyboardType}\n                returnKeyType={returnKeyType}\n                onSubmitEditing={onEnterPressed}\n                ref={inputRef}\n            /\u003e\n        \u003c/View\u003e\n    )\n}\n\n\n\nexport default function App() {\n\n  const [amount, setAmount] = React.useState\u003cstring\u003e('20.5')\n  const [phoneNumber, setPhoneNumber] = React.useState\u003cstring\u003e('08131248253')\n  const [publicKey, setPublicKey] = React.useState\u003cstring\u003e('SBTESTPUBK_t4G16GCA1O51AV0Va3PPretaisXubSw1')\n  const [fullName, setFullName] = React.useState\u003cstring\u003e('SeerBit Checkout')\n  const [email, setEmail] = React.useState\u003cstring\u003e('seerbitcheckout@gmail.com')\n\n\n  React.useEffect(() =\u003e {\n    let closeEventListener = eventEmitter.addListener('close', (event) =\u003e {\n      console.log('user closed', event?.eventProperty);\n    });\n    let successEventListener = eventEmitter.addListener('success', (event) =\u003e {\n      console.log('user success ', event?.eventProperty);\n    });\n    return () =\u003e {\n      closeEventListener.remove();\n      successEventListener.remove();\n    };\n  }, []);\n\n  const open = () =\u003e {\n    openCheckout({\n      amount: amount,\n      phoneNumber: phoneNumber,\n      publicKey: publicKey,\n      fullName: fullName,\n      email: email,\n      productDescription: 'productDescription',\n      pocketReference: 'pocketReference',\n      transactionPaymentReference: '',\n      vendorId: 'vendorId',\n      country: 'NG',\n      currency: 'NGN',\n      tokenize: false,\n      productId: 'productId',\n    });\n  };\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cView style={styles.container}\u003e\n        \u003cCustomInput\n          value={amount}\n          onChangeText={(val: string) =\u003e setAmount(val)}\n          placeholder='Amount'\n          rootStyle={{ marginBottom: 15 }}\n          keyboardType={'numeric'}\n        /\u003e\n        \u003cCustomInput\n          value={phoneNumber}\n          onChangeText={(val: string) =\u003e setPhoneNumber(val)}\n          placeholder='Phone number'\n          rootStyle={{ marginBottom: 15 }}\n          keyboardType={'numeric'}\n        /\u003e\n        \u003cCustomInput\n          value={publicKey}\n          onChangeText={(val: string) =\u003e setPublicKey(val)}\n          placeholder='Public key'\n          rootStyle={{ marginBottom: 15 }}\n        /\u003e\n        \u003cCustomInput\n          value={fullName}\n          onChangeText={(val: string) =\u003e setFullName(val)}\n          placeholder='Full name'\n          rootStyle={{ marginBottom: 15 }}\n        /\u003e\n        \u003cCustomInput\n          value={email}\n          onChangeText={(val: string) =\u003e setEmail(val)}\n          placeholder='Email'\n          rootStyle={{ marginBottom: 15 }}\n        /\u003e\n\n        \u003cTouchableOpacity\n          onPress={open}\n          style={styles.btn}\u003e\n          \u003cText style={{ color: 'white' }}\u003eOpen Checkout\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    \u003c/SafeAreaView\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    paddingTop: 80\n  },\n  box: {\n    width: 60,\n    height: 60,\n    marginVertical: 20,\n  },\n  btn: {\n    width: '90%',\n    height: 40,\n    borderRadius: 5,\n    backgroundColor: 'green',\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginTop: 50\n  },\n  input: {\n        width: '80%',\n        color: '#1E2234',\n    },\n    root1: {\n        width: '90%',\n        height: 50,\n        backgroundColor: '#F5F5F5',\n        justifyContent: 'space-between',\n        paddingHorizontal: 10,\n        borderRadius: 8,\n        marginRight: 'auto',\n        marginLeft: 'auto',\n        borderWidth: 1.2,\n        borderColor: '#F24736',\n        flexDirection: 'row',\n        alignItems: 'center'\n    },\n    root2: {\n        width: '90%',\n        height: 50,\n        backgroundColor: '#F5F5F5',\n        justifyContent: 'space-between',\n        paddingHorizontal: 10,\n        borderRadius: 8,\n        marginRight: 'auto',\n        marginLeft: 'auto',\n        flexDirection: 'row',\n        alignItems: 'center'\n    }\n});\n\n\n ```\n\n## Properties:\n\n| Property                    | type     | required  | default | Desc                                                                        |\n|-----------------------------|----------|-----------|---------|-----------------------------------------------------------------------------|\n| currency                    | String   | Optional  | NGN     | The currency for the transaction e.g NGN                                    |\n| email                       | String   | Required  | None    | The email of the user to be charged                                         |\n| publicKey                   | String   | Required  | None    | Your Public key or see above step to get yours                              |\n| amount                      | String   | Required  | None    | The transaction amount                                                      |\n| fullName                    | String   | Required  | None    | The fullname of the user to be charged                                      |\n| phoneNumber                 | String   | Required  | None    | User phone Number                                                           |\n| pocketReference             | String   | Optional  | None    | This is your pocket reference for vendors with pocket                       |\n| vendorId                    | String   | Optional  | None    | This is the vendorId of your business using pocket                          |\n| tokenize                    | bool     | Optional  | False   | Tokenize card                                                               |\n| country                     | String   | Optional  | NG      | Transaction country which can be optional                                   |\n| transactionPaymentReference | String   | Optional  | None    | Set a unique transaction reference for every transaction                    |\n| productId                   | String   | Optional  | None    | This is the productId which is optional                                     |\n| productDescription          | String   | Optional  | None    | The transaction description which is optional                               |\n\n \n ## Support:\n \n If you encounter any problems, or you have questions or suggestions, create an issue on this repo or send your inquiry to developers@seerbit.com\n \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseerbit%2Freact-native-seerbit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseerbit%2Freact-native-seerbit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseerbit%2Freact-native-seerbit/lists"}