Integrating Phonepe Payment SDK with Expo

Integrating Phonepe Payment SDK  with Expo

Photo by rupixen.com on Unsplash

In this blog we will solving the issue of linking through expo. The Phonepe document only has React Native integration but by following this blog you can integrate with Expo also.

First go to root of the projects directory

npx expo install @expo/config-plugins 
#or
npm expo install @expo/config-plugins
mkdir plugins
cd plugins

Create PhonepePlugin.js

//PhonepePlugin.js
const { withProjectBuildGradle } = require('@expo/config-plugins');

const withMyPlugin = (config) => {
    return withProjectBuildGradle(config, (config) => {
        if (config.modResults.language === 'groovy') {
            if(!config.modResults.contents.includes("phonepe.mycloudrepo.io")) {
                // to avoid multiple occurence
                config.modResults.contents = modify(config.modResults.contents)
            }
        } else {
            throw new Error("Can't add maven repository to the build.gradle because the project is using the 'kts' language.");
        }
        return config;
    });
};

function modify (str) {
    // Find the first occurrence of "google()"
    const firstIndex = str.indexOf("google()");

    // Check if the first occurrence is found
    if (firstIndex !== -1) {
        // Find the second occurrence starting from the index after the first occurrence
        const secondIndex = str.indexOf("google()", firstIndex + 1);

        // Check if the second occurrence is found
        if (secondIndex !== -1) {
            const result = str.slice(0, secondIndex + 8) + `
            maven {
                url  "https://phonepe.mycloudrepo.io/public/repositories/phonepe-intentsdk-android"
           }
            ` + str.slice(secondIndex + 8);
            return result;
        }
    }

    // Return the original string if not found
    return str;
}




module.exports = withMyPlugin;

In app.json file

{
  "expo": {
    //rest of the config
    "plugins": ["./plugins/PhonepePlugin"],

}

Then link the libraries with the project

expo prebuild 
npx expo prebuild --clean # may remove some files in android/ if u havent modified in android/ u are good\

Note : Only works on virtual device,

Have a cup of tea and enjoy the rest of the day!

Did you find this article valuable?

Support JOY SAM RAJ by becoming a sponsor. Any amount is appreciated!