Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 81 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Paymob for React Native

Paymob runs millions of transactions for different business sizes across the Middle East and Africa. Start using Paymobs solutions and APIs to accept and send payments for your online business now.
Paymob runs millions of transactions for different business sizes across the Middle East and Africa. Start using Paymob's solutions and API's to accept and send payments for your online business now.

To learn more about Paymobs offerings and capabilities, visit [Paymob.com](https://www.paymob.com).
To learn more about Paymob's offerings and capabilities, visit [Paymob.com](https://www.paymob.com).

## Installation

Expand Down Expand Up @@ -58,6 +58,84 @@ To get started with the `paymob-reactnative` package, follow these steps:
}
```

### Expo Support

If you're using Expo, follow these platform-specific setup instructions:

#### iOS
No additional steps are required for iOS.

#### Android
For Android, you'll need to make two configuration changes:

1. Create a file `plugins/withDataBinding.js` with the following content:

```javascript
const { withAppBuildGradle } = require("expo/config-plugins");

const withDataBinding = (config) => {
return withAppBuildGradle(config, (mod) => {
if (mod.modResults.language !== "groovy") {
throw new Error("Android build.gradle is not using Groovy");
}

if (!mod.modResults.contents.includes("dataBinding true")) {
const buildFeaturesPattern = /buildFeatures\s*{\s*([^}]*?)\s*}/g;

if (mod.modResults.contents.match(buildFeaturesPattern)) {
mod.modResults.contents = mod.modResults.contents.replace(
buildFeaturesPattern,
(match, existingSettings) => `buildFeatures {
${existingSettings.trim()}
dataBinding true
}`
);
} else {
mod.modResults.contents = mod.modResults.contents.replace(
/android\s*{/,
`android {
buildFeatures {
dataBinding true
}`
);
}
}
return mod;
});
};

module.exports = withDataBinding;
```

2. Install the required Expo build properties package and update your `app.json`:

First, install the package:
```bash
npx expo install expo-build-properties
```

Then update your `app.json`:
```json
{
"expo": {
"plugins": [
"./plugins/withDataBinding",
[
"expo-build-properties",
{
"android": {
"extraMavenRepos": [
"https://jitpack.io",
"../node_modules/paymob-reactnative/android/libs"
]
}
}
]
]
}
}
```

## Using Paymob

To begin using the Paymob SDK in your React Native application, start by importing the module in your component:
Expand Down Expand Up @@ -128,7 +206,7 @@ Paymob.presentPayVC('CLIENT_SECRET', 'PUBLIC_KEY', savedBankCards);

This function call opens the Paymob payment interface, allowing users to complete their transactions securely. Make sure to replace `'CLIENT_SECRET'` and `'PUBLIC_KEY'` with your actual credentials.

Heres the updated explanation with a revised first sentence and the inclusion of the repository cloning step:
Here's the updated explanation with a revised first sentence and the inclusion of the repository cloning step:

## Example App

Expand Down