Skip to content

Commit 685648a

Browse files
thecodecafethecodecafe
committed
docs(readme.v2): add exmaples and types of new v2 implementation
1 parent cc58284 commit 685648a

File tree

2 files changed

+378
-61
lines changed

2 files changed

+378
-61
lines changed

‎README.v2.md‎

Lines changed: 54 additions & 61 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-V2-brightgreen)](https://developer.flutterwave.com/v2.0/docs/getting-started) [![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,21 +16,21 @@ 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+
- [PayWithFlutterwaveV2 ](#paywithflutterwavev2)
20+
- [PayWithFlutterwaveV2 (with custom render)](#paywithflutterwavev2-with-custom-render)
21+
- [FlwButton (Flutterwave styled button)](#flwbutton-flutterwave-styled-button)
22+
- [FlutterwaveInitV2](#flutterwaveinitv2)
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+
- [FlutterwaveInitV2Options](#flutterwaveinitv2options)
26+
- [PayWithFlutterwaveV2Props](#paywithflutterwavev2props)
27+
- [FlwButton Props](#flwbutton-props)
2828
- Types
29-
- [Flutterwave Button Props](#flutterwavebuttonprops-interface)
30-
- [Default Button Props](#defaultbuttonprops-interface)
31-
- [Flutterwave Init Options](#flutterwaveinitoptions-interface)
32-
- [Flutterwave Init Error](#flutterwaveiniterror)
33-
- [FlutterwavePaymentMeta](#flutterwavepaymentmeta)
29+
- [PayWithFlutterwaveV2Props](#paywithflutterwavev2props-interface)
30+
- [FlwButtonProps](#flwbuttonprops-interface)
31+
- [FlutterwaveInitV2Options](#flutterwaveinitv2options-interface)
32+
- [FlutterwaveInitError](#flutterwaveiniterror)
33+
- [FlutterwavePaymentMetaV2](#flutterwavepaymentmetav2)
3434
- [RedirectParamsV2](#redirectparamsv2)
3535
- [CustomButtonProps](#custombuttonprops)
3636
- [Contributing](./CONTRIBUTING.md)
@@ -63,25 +63,25 @@ dependencies {
6363
````
6464

6565
### :fire: IMPORTANT INFORMATION :fire:
66-
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.
66+
If the `options` property on the [PayWithFlutterwaveV2](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.
6767

6868
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.
6969

7070

7171
## Usage
7272
Below are a few examples showcasing how you can use the library to implement payment in your React Native app.
7373

74-
### Flutterwave Button
74+
### PayWithFlutterwaveV2
7575
<img src=".github/images/pay-with-flutterwave.png" alt="preview" width="350"/>
7676

7777
[View All Props](#flutterwavebuttonprops)
7878

79-
Import `FlutterwaveButtonV2` from `react-native-flutterwave` and use it like so.
79+
Import `PayWithFlutterwaveV2` from `react-native-flutterwave` and use it like so.
8080
````jsx
81-
import {FlutterwaveButtonV2} from 'react-native-flutterwave';
82-
// or import FlutterwaveButtonV2 from 'react-native-flutterwave/v2';
81+
import {PayWithFlutterwaveV2} from 'react-native-flutterwave';
82+
// or import PayWithFlutterwaveV2 from 'react-native-flutterwave/PayWithFlutterwaveV2';
8383

84-
<FlutterwaveButtonV2
84+
<PayWithFlutterwaveV2
8585
...
8686
onComplete={handleOnComplete}
8787
options={{
@@ -94,17 +94,17 @@ import {FlutterwaveButtonV2} from 'react-native-flutterwave';
9494
/>
9595
````
9696

97-
### Flutterwave Button (with custom render)
97+
### PayWithFlutterwaveV2 (with custom render)
9898
<img src=".github/images/pay-with-flutterwave-custom.png" alt="preview" width="350"/>
9999

100100
[View All Props](#flutterwavebuttonprops)
101101

102-
Import `FlutterwaveButtonV2` from `react-native-flutterwave` and use it like so.
102+
Import `PayWithFlutterwaveV2` from `react-native-flutterwave` and use it like so.
103103
````jsx
104-
import {FlutterwaveButtonV2} from 'react-native-flutterwave';
105-
// or import FlutterwaveButtonV2 from 'react-native-flutterwave/v2';
104+
import {PayWithFlutterwaveV2} from 'react-native-flutterwave';
105+
// or import PayWithFlutterwaveV2 from 'react-native-flutterwave/PayWithFlutterwaveV2';
106106

107-
<FlutterwaveButtonV2
107+
<PayWithFlutterwaveV2
108108
...
109109
onComplete={handleOnComplete}
110110
options={{...}}
@@ -120,31 +120,30 @@ import {FlutterwaveButtonV2} from 'react-native-flutterwave';
120120
/>
121121
````
122122

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

126-
[View All Props](#defaultbuttonprops)
126+
[View All Props](#flwbuttonprops)
127127

128-
Import `DefaultButton` from `react-native-flutterwave` and use it like so.
128+
Import `FlwButton` from `react-native-flutterwave` and use it like so.
129129
````jsx
130-
import {DefaultButton} from 'react-native-flutterwave';
130+
import {FlwButton} from 'react-native-flutterwave';
131131

132-
<DefaultButton
132+
<FlwButton
133133
style={styles.paymentButton}
134134
onPress={onPress}
135-
isBusy={isInitializing}
136135
disabled={disabled}>
137136
<Text style={styles.paymentButtonText}>Pay $500</Text>
138-
</DefaultButton>
137+
</FlwButton>
139138
````
140139

141-
### Flutterwave Standard Init
142-
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)
140+
### FlutterwaveInitV2
141+
When called, this function returns a Promise which resolves to a string on success and rejects if an error occurs. [See all config options](#flutterwaveinitv2options)
143142

144143
Import `FlutterwaveInitV2` from `react-native-flutterwave` and use it like so.
145144
````javascript
146145
import {FlutterwaveInitV2} from 'react-native-flutterwave';;
147-
// or import FlutterwaveInitV2 from 'react-native-flutterwave/v2';
146+
// or import FlutterwaveInitV2 from 'react-native-flutterwave/FlutterwaveInitV2';
148147

149148
// initialize a new payment
150149
const payment = await FlutterwaveInitV2({
@@ -168,12 +167,12 @@ handlePaymentError(
168167
);
169168
````
170169
### Aborting Payment Initialization
171-
Hi :wave:, so there are cases where you have already initialized a payment with `FlutterwaveInit` but might also want to be able to cancel the payment initialization should in case your component is being unmounted or you want to allow users cancel the action before the payment is initialized, we have provided a way for you to do this... [continue reading](./docs/v2/AbortingPaymentInitialization.md)
170+
Hi :wave:, so there are cases where you have already initialized a payment with `FlutterwaveInitV2` but might also want to be able to cancel the payment initialization should in case your component is being unmounted or you want to allow users cancel the action before the payment is initialized, we have provided a way for you to do this... [continue reading](./docs/v2/AbortingPaymentInitialization.md)
172171

173172
## Props
174173

175-
### FlutterwaveInitOptions
176-
[See Interface](#flutterwaveinitoptions-interface)
174+
### FlutterwaveInitV2Options
175+
[See Interface](#flutterwaveinitv2options-interface)
177176
| Name | Required | Type | Default | Description |
178177
| --------- | --------- | ---- | ------- | ----------- |
179178
| PBFPubKey | Yes | string | **REQUIRED** | Your merchant public key, see how to get your [API Keys](https://developer.flutterwave.com/v2.0/docs/api-keys)|
@@ -193,10 +192,10 @@ Hi :wave:, so there are cases where you have already initialized a payment with
193192
| custom_title | No | string | undefined | Text to be displayed as the title of the payment modal. |
194193
| custom_description | No | string | undefined | Text to be displayed as a short modal description. |
195194
| custom_logo | No | string | undefined | Link to the Logo image. |
196-
| meta | No | array of [FlutterwavePaymentMeta](#flutterwavepaymentmeta) | undefined | Any other custom data you wish to pass. |
195+
| meta | No | array of [FlutterwavePaymentMetaV2](#flutterwavepaymentmetav2) | undefined | Any other custom data you wish to pass. |
197196

198-
### FlutterwaveButtonProps
199-
[See Interface](#flutterwavebuttonprops-interface)
197+
### PayWithFlutterwaveV2Props
198+
[See Interface](#paywithflutterwavev2props-interface)
200199
| Name | Required | Type | Default | Description |
201200
| --------- | --------- | ---- | ------- | ----------- |
202201
| style | No | object | undefined | Used to apply styling to the button.|
@@ -205,20 +204,17 @@ Hi :wave:, so there are cases where you have already initialized a payment with
205204
| onDidInitialize | No | function | undefined | This is called when a new payment link has been successfully initialized.|
206205
| onInitializeError | No | function | undefined | This is called if an error occurred while initializing a new pyment link. The function will receive [FlutterwaveInitError](#flutterwaveiniterror) |
207206
| onAbort | No | function | undefined | This is called if a user aborts a transaction, a user can abort a transaction when they click on the dialog's backdrop and choose cancel when prompted to cancel transaction. |
208-
| options | Yes | **[FlutterwaveInitOptions](#flutterwaveinitoptions)** | **REQUIRED** | The option passed here is used to initialize a payment. |
207+
| options | Yes | **[FlutterwaveInitOptions](#flutterwaveinitv2options)** | **REQUIRED** | The option passed here is used to initialize a payment. |
209208
| 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. |
210209
| alignLeft | No | boolean | undefined | This aligns the content of the button to the left. |
211210

212-
### DefaultButtonProps
213-
[See Interface](#defaultbuttonprops-interface)
211+
### FlwButton Props
212+
[See Interface](#flwbuttonprops-interface)
214213
| Name | Required | Type | Default | Description |
215214
| --------- | --------- | ---- | ------- | ----------- |
216-
| style | No | object | undefined | Used to apply styling to the button.|
217-
| onPress | Yes | function | undefined | This |
215+
| style | No | ViewStyle | undefined | This component uses the same style properties that are applicable to react-native's View component style.|
216+
| onPress | Yes | function | undefined | This property receive a function that is called on button press. |
218217
| disabled | No | boolean | undefined | This disables button, and causes onPress not to be fired.|
219-
| isBusy | No | boolean | undefined | This puts the button in a busy state, making the content look faded.|
220-
| 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 |
221-
| 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. |
222218
| alignLeft | No | boolean | undefined | This aligns the content of the button to the left. |
223219

224220
## Types
@@ -258,17 +254,17 @@ interface FlutterwaveInitSubAccount {
258254
}
259255
```
260256

261-
#### FlutterwavePaymentMeta
257+
#### FlutterwavePaymentMetaV2
262258
````typescript
263-
interface FlutterwavePaymentMeta {
259+
interface FlutterwavePaymentMetaV2 {
264260
metaname: string;
265261
metavalue: string;
266262
}
267263
````
268264

269-
#### FlutterwaveInitOptions Interface
265+
#### FlutterwaveInitV2Options Interface
270266
````typescript
271-
export interface FlutterwaveInitOptions {
267+
export interface FlutterwaveInitV2Options {
272268
txref: string;
273269
PBFPubKey: string;
274270
customer_firstname?: string;
@@ -286,13 +282,13 @@ export interface FlutterwaveInitOptions {
286282
custom_title?: string;
287283
custom_description?: string;
288284
custom_logo?: string;
289-
meta?: Array<FlutterwavePaymentMeta>;
285+
meta?: Array<FlutterwavePaymentMetaV2>;
290286
}
291287
````
292288

293-
#### FlutterwaveButtonProps Interface
289+
#### PayWithFlutterwaveV2Props Interface
294290
````typescript
295-
interface FlutterwaveButtonProps {
291+
interface PayWithFlutterwaveV2Props {
296292
style?: ViewStyle;
297293
onComplete: (data: RedirectParamsV2) => void;
298294
onWillInitialize?: () => void;
@@ -305,15 +301,12 @@ interface FlutterwaveButtonProps {
305301
}
306302
````
307303

308-
#### DefaultButtonProps Interface
304+
#### FlwButtonProps Interface
309305
````typescript
310-
interface DefaultButtonProps {
306+
interface FlwButton {
311307
style?: ViewStyle;
312308
onPress?: () => void;
313309
disabled?: boolean;
314-
children: React.ReactElement;
315-
isBusy?: boolean;
316-
onSizeChange?: (ev: {width: number; height: number}) => void;
317310
alignLeft?: 'alignLeft' | boolean,
318311
}
319312
````

0 commit comments

Comments
 (0)