Skip to content

React Native Standard SDK#

Android Integration#

React Native Version 0.60+:
This document elaborates the SDK integration steps for apps running on React Native version 0.60+

Prerequisites#

Create a Wowpay Account. Generate API Keys in Dashboard. Once you are done with the integration, you can generate Live Mode API keys and replace them in the integration.

Integration Steps#

  • Step 1: Install Wowpay React Native SDK

    • Install the SDK using the following npm command in the Terminal window. If you are using Windows, please use Git Bash instead of Command Prompt window. Ensure that you run this code within your React Native project folder in Terminal window.

      $ npm install wowpay-reactnative-sdk react-native-gesture-handler react-native-webview react-native-user-agent --save

  • Step 2: Run React Native App

    • Run the React Native app. 
      npx react-native run-android

  • Step 3: Add Wowpay Checkout Options to .js File

    • To integrate the Wowpay Checkout with your React Native app, you must add the Checkout Display Options in the .js file. Open the .js file in your project folder and perform the following:

        // Import the { Wowpay,TypeEvent, withWowpay, TypeCard} module to your component.
    import { Wowpay,TypeEvent, withWowpay, TypeCard} from 'wowpay-reactnative-sdk';
    // Intinialization your wowpay SDK
    const _wowpay = new Wowpay(options);
    // Call the _wowpay.onOpen(typecard) method with the type card.
    TypeCard {
        CreditCard="CreditCard",
        eWallet="eWallet",
        FPX="OnlineBanking",
    }
    // Call this function to listener on success or on failure
    _wowpay.on(TypeEvent, (data) => {console.log(data)}) method with the type event 
    typeEvent = {
        Success,
        Failure
    }
    Sample code: 
        import * as React from 'react';
    import { View, StyleSheet, Button } from 'react-native';
    import {Wowpay,TypeEvent, withWowpay} from 'wowpay-reactnative-sdk'

    // import Toast from 'react-native-simple-toast';
    const App = () => {
    var options = {
        // language_code:'en',
        api_key: "7ef94cfb04a3dcab4e79febe36b0b0bf",
        amount: 50000, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
        currency: "MYR",
        order_id: `WP${Math.floor(100000 + Math.random() * 900000)}`,
        user_id: "10",
        customer: {
        title: "Mr",
        first_name: "Thong",
        last_name: "Tran",
        mobile: "+84989452008",
        email: "humgthongit@gmail.com",
        customer_type: "Adult",
        islead_pax: true,
        address: "Nam thanh",
        city: "Kuala Lumpur",
        postcode: "548010",
        country: "MY",
        },
        order_info: {
        item_list: [
            {
            item_amount: 25.98,
            item_code: "code",
            item_desc:
                " It has a lightweight, breathable mesh upper with orefootcables for a locked-down fit.",
            item_id: 1,
            item_name: "Nike Flex Form TR Women's Sneaker",
            item_type: 0,
            },
            {
            item_amount: 45.99,
            item_code: "code",
            item_desc:
                "Born from running culture, these men's shoes deliver the reedomof a cage-free design",
            item_id: 2,
            item_name: "ULTRABOOST UNCAGED SHOES",
            item_type: 0,
            },
        ],
        order_desc: "Test payment",
        },
    };
    const _wowpay = new Wowpay(options);
    _wowpay.on(TypeEvent.Success, (data) => {
        console.log(data, 'success');
        // Toast.show('You paymented success');
    });
    _wowpay.on(TypeEvent.Failure, (data) => {
        console.log(data, 'faile');
        // Toast.show(data.wowpay_transaction_info.paymentrs_info.provider_desc);
    });

    const onPayment = () => {
        _wowpay.onOpen('CreditCard');
    };
    const onEwallet = () => {
        _wowpay.onOpen('eWallet');
    };
    const onFpx = () => {
        _wowpay.onOpen('OnlineBanking');
    };
    return (
        <View style={styles.container}>
        <View style={styles.container}>
            <Button onPress={onPayment} title="Open payment">

            </Button>
            <Button onPress={onEwallet} title="Open eWallet">

            </Button>
            <Button onPress={onFpx} title="Open OnlineBanking">

            </Button>
            {/* <Modalize ref={modalizeRef}>
            <Text>Ok</Text>
            </Modalize> */}
        </View>
        </View>
    );
    };
    const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor:"red"
    },
    });

    export default withWowpay(App);

IOS Integration#

React Native Version 0.60+:
This document elaborates the SDK integration steps for apps running on React Native version 0.60+

Prerequisites#

Create a Wowpay Account. Generate API Keys in Dashboard. Once you are done with the integration, you can generate Live Mode API keys and replace them in the integration.

Integration Steps#

  • Step 1: Install Wowpay React Native SDK#

    • Install the SDK using the following npm command in the Terminal window. If you are using Windows, please use Git Bash instead of Command Prompt window. Ensure that you run this code within your React Native project folder in Terminal window.

      $ npm install wowpay-reactnative-sdk react-native-gesture-handler react-native-webview react-native-user-agent --save

  • Step 2: Open podfile and update Platform Version#

    • Navigate to the ios folder and open Podfile. You can do this using the following code. 

      cd ios && open podfile

    • Change the platform version from 9.0 to 10.0 in the Podfile.

  • Step 3: Install Pods Using Cocoapods

    • Install pods after updating iOS platform. This will install all pods in the Podfile at the exact versions. 
      pod install && cd ..

  • Step 4: Run React Native App

    • Run the React Native app using this command 
      npx react-native run-android
  • Step 5: Add Wowpay Checkout Options to .js File (same as android sdk)

Flutter Standard SDK#

Prerequisites#

Create a Wowpay Account. Generate API Keys in Dashboard. Once you are done with the integration, you can generate Live Mode API keys and replace them in the integration.

Integration Steps#

Follow these steps to integrate your Flutter application with the Flutter Payment Gateway:

  • Step 1: Install Wowpay Flutter SDK#

    • Install the SDK using the following npm command in the Terminal window. If you are using Windows, please use Git Bash instead of Command Prompt window. Ensure that you run this code within your React Native project folder in Terminal window. 
      $ flutter pub add wowpay-flutter

  • Step 2: Add the Dependencies#

    • Add the below code to dependencies in your app's pubspec.yaml

    wowpay-flutter: 1.0.0
    * Get Packages * Run flutter packages get in the root directory of your app. * Update android/build.gradle * Update minSdkVersion to 19 or higher

  • Step 3: Import Package#

    • Use the below code to import the wowpay_flutter.dart file to your project. 
      import 'package:wowpay_flutter/wowpay_flutter.dart';

  • Step 4: Create Wowpay instance#

    • Code sample
    _wowpay = Wowpay(options);
Options sample:
{
"api_key": "7ef94cfb04a3dcab4e79febe36b0b0bf",
"amount": 50000,
"user_id":"10",
"currency": "MYR",
"order_id": "Test000014",
"customer": {
"title": "Mr",
"first_name": "Thong",
"last_name": "Tran",
"mobile": "+84989452008",
"email": "humgthongit@gmail.com",
"customer_type": "Adult",
"islead_pax": true,
"address": "Nam thanh",
"city": "Kuala Lumpur",
"postcode": "548010",
"country": "MY",
},
"order_info": {
"item_list": [
    {
    "item_amount": 25.98,
    "item_code": "code",
    "item_desc":
    " It has a lightweight, breathable mesh upper with orefootcables for a locked-down fit.",
    "item_id": 1,
    "item_name": "Nike Flex Form TR Women's Sneaker",
    "item_type": 0,
    }
],
"order_desc": "Test payment",
}
}

  • Step 5: Attach Event Listeners

    • The plugin uses event-based communication and emits events when payments fail or succeed.
    • The event names are exposed via the constants EVENT_PAYMENT_SUCCESS, EVENT_PAYMENT_ERROR from the Wowpay class.
    • Use the on(String event, Function handler) method on the Wowpay instance to attach event listeners.
    _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
The handlers would be defined in the class as:
void _handlePaymentSuccess(PaymentSuccessResponse response) {
// Do something when payment succeeds
}
void _handlePaymentError(PaymentFailureResponse response) {
// Do something when payment fails}
To clear event listeners, use the clear method on the Wowpay instance.
_wowpay.clear(); // Removes all listeners

  • Step 6: Open Checkout follow type card

        _wowpay.open(typecard);
    TypeCard {
        CreditCard="CreditCard",
        eWallet="eWallet",
        FPX="OnlineBanking",
    }

    Sample#

        _wowpay.open(TypeCard.CreditCard);

Web JS Standard SDK#

Prerequisites#

Create a Wowpay Account. Generate API Keys in Dashboard. Once you are done with the integration, you can generate Live Mode API keys and replace them in the integration.

Integration Steps#

Follow these steps to integrate your Flutter application with the Web JS Payment Gateway:

  • Step 1: Pass Order Id and Other Options to the Checkout#

    • Copy-paste the form parameters as options in your HTML code: 
      <div id="container-wowpay"></div>
<script src="https://dt18ria0o1of5.cloudfront.net/wowpay.js"></script>
<script>
    var styleObject = {
        bases: {
        container: {
            border: "1px solid pink",
        },
        submit: {
            backgroundColor: "black",
            height: "50px",
        },
        },
        cardName: {
        label: {
            fontSize: "15px",
        },
        input: {
            backgroundColor: "red",
            fontSize: "20px",
        },
        error: {
            input: {
            border: "blue",
            },
            label: {
            color: "yellow",
            },
        },
        },
        cardNumber: {
        label: {
            fontSize: "18px",
        },
        input: {
            backgroundColor: "red",
        },
        error: {
            input: {
            border: "blue",
            },
            label: {
            color: "yellow",
            },
        },
        },
    };
    var options = {
        // language_code:'en',
        api_key: "7ef94cfb04a3dcab4e79febe36b0b0bf",
        amount: 50000, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
        currency: "MYR",
        order_id: `WP${Math.floor(100000 + Math.random() * 900000)}`,
        onPaymentSuccess: (res) => {
        alert("on success");
        console.log(res, "on success");
        },
        onPaymentFailure: (res) => {
        alert("on fail");
        console.log(res, "on failed");
        },
        user_id: "10",
        customer: {
        title: "Mr",
        first_name: "Thong",
        last_name: "Tran",
        mobile: "+84989452008",
        email: "humgthongit@gmail.com",
        customer_type: "Adult",
        islead_pax: true,
        address: "Nam thanh",
        city: "Kuala Lumpur",
        postcode: "548010",
        country: "MY",
        },
        order_info: {
        item_list: [
            {
            item_amount: 25.98,
            item_code: "code",
            item_desc:
                " It has a lightweight, breathable mesh upper with orefootcables for a locked-down fit.",
            item_id: 1,
            item_name: "Nike Flex Form TR Women's Sneaker",
            item_type: 0,
            },
            {
            item_amount: 45.99,
            item_code: "code",
            item_desc:
                "Born from running culture, these men's shoes deliver the reedomof a cage-free design",
            item_id: 2,
            item_name: "ULTRABOOST UNCAGED SHOES",
            item_type: 0,
            },
        ],
        order_desc: "Test payment",
        },
    };
    var createCreditCard = new WowPay({...options})
    .create("CreditCard")
    .mount("container-wowpay");
    </script>

  • Step 2: Handle Payment Success and Failure#

        onPaymentSuccess: function (response){
        alert(response.wowpay_order_id);
        alert(response.wowpay_signature)
    }
    onPaymentFailure: function (response){
        alert(response.wowpay_order_id);
        alert(response.wowpay_signature)
    }