Skip to content

Commit cc58284

Browse files
thecodecafethecodecafe
committed
docs(readme): add exmples and types of new implementation
1 parent 63ee87d commit cc58284

File tree

2 files changed

+382
-55
lines changed

2 files changed

+382
-55
lines changed

‎README.md‎

Lines changed: 48 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ Easily implement Flutterwave for payments in your React Native appliction. This
44
[![V2 API](https://img.shields.io/badge/API-V3-brightgreen)](https://developer.flutterwave.com/docs) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
55

66
<p align="center">
7-
<img src=".github/images/github-preview-ios.gif" alt="ios-preview"/>
8-
<img src=".github/images/github-preview-android.gif" alt="android-preview"/>
7+
<img src=".github/images/github-preview-ios.gif" alt="ios-preview"/>
8+
<img src=".github/images/github-preview-android.gif" alt="android-preview"/>
99
</p>
1010

1111
## Table Of Content
@@ -16,23 +16,23 @@ Easily implement Flutterwave for payments in your React Native appliction. This
1616
- [Activity Indicator (Android)](#activity-indicator-only-needed-for-android)
1717
- [Important Information](#fire-important-information-fire)
1818
- Usage
19-
- [Flutterwave Button ](#flutterwave-button)
20-
- [Flutterwave Button (with custom render)](#flutterwave-button-with-custom-render)
21-
- [Default Button (Flutterwave styled button)](#defaultbutton-flutterwave-styled-button)
22-
- [Flutterwave Standard Init](#flutterwave-standard-init)
19+
- [PayWithFlutterwave ](#flutterwave-button)
20+
- [PayWithFlutterwave (with custom render)](#flutterwave-button-with-custom-render)
21+
- [FlwButton (Flutterwave styled button)](#flwbutton-flutterwave-styled-button)
22+
- [FlutterwaveInit](#flutterwaveinit)
2323
- [Aborting Payment Initialization](#aborting-payment-initialization)
2424
- Props
25-
- [Flutterwave Button Props](#flutterwavebuttonprops)
26-
- [Default Button Props](#defaultbuttonprops)
27-
- [Flutterwave Init Options](#flutterwaveinitoptions)
25+
- [FlutterwaveInitOptions](#flutterwaveinitoptions)
26+
- [PayWithFlutterwaveProps](#flutterwavebuttonprops)
27+
- [FlwButtonProps](#flwbutton-props)
2828
- Types
29-
- [Flutterwave Button Props](#flutterwavebuttonprops-interface)
30-
- [Default Button Props](#defaultbuttonprops-interface)
31-
- [Flutterwave Init Customer](#flutterwaveinitcustomer)
32-
- [Flutterwave Init Customization](#flutterwaveinitcustomization)
33-
- [Flutterwave Init Sub Account](#flutterwaveinitsubaccount)
34-
- [Flutterwave Init Options](#flutterwaveinitoptions-interface)
35-
- [Flutterwave Init Error](#flutterwaveiniterror)
29+
- [PayWithFlutterwaveProps](#paywithflutterwaveprops-interface)
30+
- [FlwButtonProps](#flwbuttonprops-interface)
31+
- [FlutterwaveInitCustomer](#flutterwaveinitcustomer)
32+
- [FlutterwaveInitCustomization](#flutterwaveinitcustomization)
33+
- [FlutterwaveInitSubAccount](#flutterwaveinitsubaccount)
34+
- [FlutterwaveInitOptions](#flutterwaveinitoptions-interface)
35+
- [FlutterwaveInitError](#flutterwaveiniterror)
3636
- [FlutterwavePaymentMeta](#flutterwavepaymentmeta)
3737
- [RedirectParams](#redirectparams)
3838
- [CustomButtonProps](#custombuttonprops)
@@ -66,25 +66,25 @@ dependencies {
6666
````
6767

6868
### :fire: IMPORTANT INFORMATION :fire:
69-
If the `options` property on the [FlutterwaveButton](#flutterwavebuttonprops-interface) changes, when next the user taps on the button a new payment will be initialized whether the last one was successful or not.
69+
If the `options` property on [PayWithFlutterwave](#paywithflutterwaveprops-interface) changes, when next the user taps on the button a new payment will be initialized whether the last one was successful or not.
7070

71-
Remember you cannot use the same transaction reference for two different payments, remember to recreate the transaction reference before allowing the user initiate a new payment.
71+
Remember you cannot use the same transaction reference for two different payments, also remember to recreate the transaction reference before allowing the user initiate a new payment.
7272

7373

7474
## Usage
7575
Below are a few examples showcasing how you can use the library to implement payment in your React Native app.
7676

77-
### Flutterwave Button
77+
### PayWithFlutterwave
7878
<img src=".github/images/pay-with-flutterwave.png" alt="preview" width="350"/>
7979

8080
[View All Props](#flutterwavebuttonprops)
8181

82-
Import `FlutterwaveButton` from `react-native-flutterwave` and use it like so.
82+
Import `PayWithFlutterwave` from `react-native-flutterwave` and use it like so.
8383
````jsx
84-
import {FlutterwaveButton} from 'react-native-flutterwave';
85-
// or import FlutterwaveButton from 'react-native-flutterwave';
84+
import {PayWithFlutterwave} from 'react-native-flutterwave';
85+
// or import PayWithFlutterwave from 'react-native-flutterwave';
8686

87-
<FlutterwaveButton
87+
<PayWithFlutterwave
8888
...
8989
onComplete={handleOnComplete}
9090
options={{
@@ -100,17 +100,17 @@ import {FlutterwaveButton} from 'react-native-flutterwave';
100100
/>
101101
````
102102

103-
### Flutterwave Button (with custom render)
103+
### PayWithFlutterwave (with custom render)
104104
<img src=".github/images/pay-with-flutterwave-custom.png" alt="preview" width="350"/>
105105

106106
[View All Props](#flutterwavebuttonprops)
107107

108-
Import `FlutterwaveButton` from `react-native-flutterwave` and use it like so.
108+
Import `PayWithFlutterwave` from `react-native-flutterwave` and use it like so.
109109
````jsx
110-
import {FlutterwaveButton} from 'react-native-flutterwave';
111-
// or import FlutterwaveButton from 'react-native-flutterwave';
110+
import {PayWithFlutterwave} from 'react-native-flutterwave';
111+
// or import PayWithFlutterwave from 'react-native-flutterwave';
112112

113-
<FlutterwaveButton
113+
<PayWithFlutterwave
114114
...
115115
onComplete={handleOnComplete}
116116
options={{...}}
@@ -126,25 +126,24 @@ import {FlutterwaveButton} from 'react-native-flutterwave';
126126
/>
127127
````
128128

129-
### DefaultButton (Flutterwave styled button)
129+
### FlwButton (Flutterwave styled button)
130130
<img src=".github/images/flutterwave-styled-button.png" alt="preview" width="350"/>
131131

132-
[View All Props](#defaultbuttonprops)
132+
[View All Props](#flwbuttonprops)
133133

134-
Import `DefaultButton` from `react-native-flutterwave` and use it like so.
134+
Import `FlwButton` from `react-native-flutterwave` and use it like so.
135135
````jsx
136-
import {DefaultButton} from 'react-native-flutterwave';
136+
import {FlwButton} from 'react-native-flutterwave';
137137

138-
<DefaultButton
138+
<FlwButton
139139
style={styles.paymentButton}
140140
onPress={onPress}
141-
isBusy={isInitializing}
142141
disabled={disabled}>
143142
<Text style={styles.paymentButtonText}>Pay $500</Text>
144-
</DefaultButton>
143+
</FlwButton>
145144
````
146145

147-
### Flutterwave Standard Init
146+
### FlutterwaveInit
148147
When called, this function returns a Promise which resolves to a string on success and rejects if an error occurs. [See all config options](#flutterwaveinitoptions)
149148

150149
Import `FlutterwaveInit` from `react-native-flutterwave` and use it like so.
@@ -192,8 +191,8 @@ try {
192191
| meta | No | array of [FlutterwavePaymentMeta](#flutterwavepaymentmeta) | undefined | This is an object that helps you include additional payment information to your request. `E.g. { 'consumer_id': 23, 'consumer_mac': '92a3-912ba-1192a' }` |
193192
| customizations | No | [FlutterwaveInitCustomizations](#flutterwaveinitcustomizations) | undefined | This is an object that contains title, logo, and description you want to display on the modal `E.g. {'title': 'Pied Piper Payments', 'description': 'Middleout isn't free. Pay the price', 'logo': 'https://assets.piedpiper.com/logo.png'}` |
194193

195-
### FlutterwaveButtonProps
196-
[See Interface](#flutterwavebuttonprops-interface)
194+
### PayWithFlutterwaveProps
195+
[See Interface](#paywithflutterwaveprops-interface)
197196
| Name | Required | Type | Default | Description |
198197
| --------- | --------- | ---- | ------- | ----------- |
199198
| style | No | object | undefined | Used to apply styling to the button.|
@@ -206,16 +205,13 @@ try {
206205
| customButton | No | function | undefined | This is used to render a custom button. The function a prop argument structured like [CustomButtonProps](#custombuttonprops), this function should return a valid React node. |
207206
| alignLeft | No | boolean | undefined | This aligns the content of the button to the left. |
208207

209-
### DefaultButtonProps
210-
[See Interface](#defaultbuttonprops-interface)
208+
### FlwButton Props
209+
[See Interface](#flwbuttonprops-interface)
211210
| Name | Required | Type | Default | Description |
212211
| --------- | --------- | ---- | ------- | ----------- |
213-
| style | No | object | undefined | Used to apply styling to the button.|
214-
| onPress | Yes | function | undefined | This |
212+
| style | No | ViewStyle | undefined | This component uses the same style properties that are applicable to react-native's View component style.|
213+
| onPress | Yes | function | undefined | This property receive a function that is called on button press. |
215214
| disabled | No | boolean | undefined | This disables button, and causes onPress not to be fired.|
216-
| isBusy | No | boolean | undefined | This puts the button in a busy state, making the content look faded.|
217-
| onSizeChange | No | (ev: {width: number; height: number}) => void | undefined | If provided this function is fired whenever the size(height or width) of the button changes |
218-
| children | Yes | ReactElement | undefined | This will be the content rendered within the button, if string is to be direct decendant, remember to put string in the Text component. |
219215
| alignLeft | No | boolean | undefined | This aligns the content of the button to the left. |
220216

221217
## Types
@@ -300,9 +296,9 @@ export interface FlutterwaveInitOptions {
300296
}
301297
````
302298

303-
#### FlutterwaveButtonProps Interface
299+
#### PayWithFlutterwaveProps Interface
304300
````typescript
305-
interface FlutterwaveButtonProps {
301+
interface PayWithFlutterwaveProps {
306302
style?: ViewStyle;
307303
onComplete: (data: RedirectParams) => void;
308304
onWillInitialize?: () => void;
@@ -315,16 +311,13 @@ interface FlutterwaveButtonProps {
315311
}
316312
````
317313

318-
#### DefaultButtonProps Interface
314+
#### FlwButtonProps Interface
319315
````typescript
320-
interface DefaultButtonProps {
321-
style?: ViewStyle;
322-
onPress?: () => void;
316+
interface FlwButtonProps {
317+
style?: StyleProp<ViewStyle>;
323318
disabled?: boolean;
324-
children: React.ReactElement;
325-
isBusy?: boolean;
326-
onSizeChange?: (ev: {width: number; height: number}) => void;
327-
alignLeft?: 'alignLeft' | boolean,
319+
alignLeft?: boolean;
320+
onPress?: () => void;
328321
}
329322
````
330323

0 commit comments

Comments
 (0)