# react-native-credo-webview

> The package allows you accept payment using credo

Latest version **1.0.1** (published 2021-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-credo-webview
pnpm add react-native-credo-webview
yarn add react-native-credo-webview
bun add react-native-credo-webview
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-09-17 |
| First published | 2021-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 32.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nugitech |
| Maintainers | nugi_npm |

## Links

- npm: https://www.npmjs.com/package/react-native-credo-webview
- Homepage: https://github.com/nugitech/react-native-credo-webview#readme
- npm.io page: https://npm.io/package/react-native-credo-webview

## Dependencies (1)

- [react-native-webview](https://npm.io/package/react-native-webview.md) ^11.13.0

## Recent versions

- 1.0.1 (latest) — 2021-09-17
- 1.0.0 — 2021-09-17

## README

# React-Native-Credo-WebView

The package allows you accept payment using credo

### Installation

Add React-Native-Credo-WebView to your project by running;

`npm install react-native-credo-webview react-native-webview`

or

`yarn add react-native-credo-webview react-native-webview`


for iOS: `cd iOS && pod install && cd ..`


### Example Usage 

```javascript
import React, { useState } from 'react';
import  { Credo }  from 'react-native-credo-webview';
import { View, Text } from 'react-native';

const Pay = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const closeModal = () => setModalVisible(false);
  const handleSubmit = () => setModalVisible(true);

  return (
    <View style={{ flex: 1 }}>
    Î<Credo
        amount={3500}
        currency="NGN"
        customerEmail="test@credo.com"
        customerName="Credo Dibs"
        customerPhoneNo="08090000000"
        publicKey="your-public-key"
        showModal={modalVisible}
        onSuccess={(response) => {
          //handle response
        }}
        closeModal={closeModal}
     />
     <Pressable onPress={handleSubmit} title="Submit">
        <Text>Test Payment</Text>
     </Pressable>
    </View>
  );
}
```

## API's

#### []()All React-Native-Credo-WebView API


<br/>

## API

| <b>Property<b>     | Type                             | Required | Description                                                                                                                    |
| ------------------ | -------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| publicKey           |  `string`      | ✔️       | Public Credo key(visit credocentral.com to get yours)                                                                                                                    |
| amount             | `string` or `number` | ✔️       | amount to be charged, should be greater than #100                                                                                                                    
| customerEmail            | `string`      | ✔️       | Customer's email address email                                                                                         
| customerName            | `string`       | ✔️       | Customer's name                                                                                                                                                     |
| customerPhoneNo         | `string`       |     ✔️      | Customer's phone number                                                                                                                                                    
| referenceNo        | `string`      |          | Reference number, if you have already generated one. This would be auto generated by Credo if you don't provide it.                                                                                                                                                                                 
| showModal     | `boolean`    |     ✔️       | Set modal visibility. When it is true, the Credo Payment widget pops up.                                                                                                                                                                                                
| closeModal | `Function`  |    ✔️      | Function to be called to set `showModal` to `false`.                                                                                                                  
| onSuccess     | `Function` |    ✔️      | Function to be called after a successful transaction. You can provide a function that looks like this: `(successResponse: SuccessResponse) => void;`                                                                                                              
| onCancel    | `Function`  |          |  callback function if user cancels or payment transaction could not be verified. 

## [](https://github.com/nugitech/react-native-credo-webview)Contributions

Would you like to contribute to this package? [Read how to contribute](https://github.com/nugitech/react-native-credo-webview/blob/master/contribution.md) and send in your PR!

## [](https://github.com/nugitech/react-native-credo-webview#licensing)Licensing

This project is licensed under MIT license.


## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/nugitech"><img src="https://avatars.githubusercontent.com/u/10873543?s=200&v=4" width="100px;" alt=""/><br /><sub><b>Nugitech </b></sub></a><br /><a href="hhttps://www.nugitech.com/" title="Website">💻</a> <a href="https://nugiinnovations.com/" title="Innovations">📖</a></td>
  </tr>
 
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react-native-credo-webview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._