Cordova extension to add Rave Pay Button into your hybrid app builds

Usage no npm install needed!

<script type="module">
  import cordovaRaveyz from '';


Cordova Rave

A Cordova extension to add Rave Pay Button into your hybrid apps builds.


Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.


Ensure that you have signed up for a Rave account. If not, go here to signup for a live account or here to signup for a test account.

Ensure that you have nodejs and npm installed. If download Nodejs from here and install it.

Installing nodejs also install npm with it.

Once you have nodejs and npm installed, proceed install cordova using the command below

npm i -g cordova

NOTE: if you are a MAC or Linux user, you might need to append sudo before npm i -g cordova i.e

sudo npm i -g cordova


The following steps will get you up and running.

  1. Create a sample cordova project in your favorite directory

    NOTE: You can skip this step if you already have a cordova project

    cordova create hello com.example.hello HelloWorld

    This command will create the required directory structure for your cordova app. By default, the cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file.

  2. Test your sample project to be sure everything is working fine.

    We would be testing in the browser environment. To test on other environments check out the cordova documentation on android and ios. Run the following commands in order

    cd hello
    cordova platform add browser
    cordova run browser

    If everything works out. Life is good. Moving On

  3. Install Rave

    • Navigate into your app directory (if you aren't already there). If you are using the same directory as this documentation, do cd hello
    • Run the following commands in order
    npm install cordova-rave
    cd node_modules/cordova-rave && npm start 

    NB: If you get a warning of outdated npm dependency/DOS issue, please read this

    NOTE: Once the second command installs all the necessary dependencies, you will be prompted to enter some information. An example is shown below

    prompt: PBFPubKey:  FLWPUBK-98765445678900987698765567-X
    prompt: amount:  1
    prompt: customer_email:
    prompt: currency:  NGN
    prompt: country:  Nigeria
    prompt: custom_title:  Cordovey
    prompt: custom_description:  Testing
    prompt: redirect_url:
    prompt: payment_plan_id:  1000
    prompt: payment_options:
    prompt: subaccounts:  []
    prompt: custom_logo: logo.png
    prompt: liveMode:  yes

    PBFPubKey: This is your Rave public key and can be gotten from your rave dashboard

    amount: The amount you want to charge your customers. If omitted, A customer will be able to specify the amount

    customer_email: this is the merchant's email address

    currency: The currency you want to charge your customers in. If omitted, it defaults to NGN

    country: The merchant's country. Defaults to Nigeria

    custom_title: A title for your payment

    custom_description: Text describing what your customers are paying for

    redirect_url: This is the url that rave sends the response of your transaction to. It should be configured to handle a get request. If not supplied, no response will be sent from Rave

    payment_plan_id: If you want to bill your customers recurrently, pass in the payment plan id here. It must be an integer

    payment_options: This allows you select the payment option you want for your users.

    subaccounts: This is an array of objects containing the subaccount IDs to split the payment into.

    custom_logo: Link to the Logo image.

    liveMode: This determines if you want to use the live apis (yes) or the test apis (no). It is required

  4. Generate rave.js. While you're still in node_modules/cordova-rave directory, run:

    npm run build

    This ultimately creates a rave.js file into your www directory.

  5. Link rave.js file to index.html in www directory

    Add the following script tag just before your closing script tag

    <script type="text/javascript" src="rave.js"></script>

    Voila!!!! With rave.js now linked, you can call the function below (as you please), passing in an object containing the properties listed above. An example is shown below

        'PBFPubKey': 'FLWPUBK-54567898978675645342334567-X',
        'amount': '0',
        'currency': 'NGN',
        'country': 'NG',
        'customer_email': '',
        'customer_firstname': 'Jon',
        'customer_lastname': 'Snow',
        'pay_button_text': 'Pay now',
        'custom_title': '',
        'custom_description': '',
        'redirect_url': '',
        'custom_logo': '',
        'txref': 'CD-102297-RV098299'

    Below is an example of what your index.html may look like

    <!DOCTYPE html>
        Licensed to the Apache Software Foundation (ASF) under one
        or more contributor license agreements.  See the NOTICE file
        distributed with this work for additional information
        regarding copyright ownership.  The ASF licenses this file
        to you under the Apache License, Version 2.0 (the
        "License"); you may not use this file except in compliance
        with the License.  You may obtain a copy of the License at
        Unless required by applicable law or agreed to in writing,
        software distributed under the License is distributed on an
        KIND, either express or implied.  See the License for the
        specific language governing permissions and limitations
        under the License.
            Customize this policy to fit your own app's needs. For more guidance, see:
            Some notes:
                * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
                * is required only on Android and is needed for TalkBack to function properly
                * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                    * Enable inline JS: add 'unsafe-inline' to default-src
            <meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Hello World</title>
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">Connecting to Device</p>
                    <p class="event received">Device is Ready</p>
                <button class="btn btn-primary" type="button" onclick="pay()">Pay Now</button>
                <script type="text/javascript" src="cordova.js"></script>
                <script type="text/javascript" src="js/index.js"></script>
                <script type="text/javascript" src="rave.js"></script>
                    function pay(){
                            'PBFPubKey': 'FLWPUBK-ba0a57153f497c03bf34a9e296aa9439-X',
                            'amount': '1',
                            'currency': 'NGN',
                            'country': 'NG',
                            'customer_email': '',
                            'customer_firstname': 'Jon',
                            'customer_lastname': 'Snow',
                            'pay_button_text': '',
                            'custom_title': '',
                            'custom_description': '',
                            'redirect_url': '',
                            'custom_logo': '',
                            'txref': 'CD-102297-RV098299'
  6. Run app

    Before you test the app. Cordova doesn't allow navigation to external urls inside the app by default hence you may need to:

    • Add <allow-navigation href="*"> to your config.xml
    • Replace the meta tag that sets your Content-Security-Policy with this
    <meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' * ; style-src 'self' 'unsafe-inline' *">

    Now run:

    cordova run browser


Here are a few things to note

  1. If you set liveMode to no then ensure that you're using your rave sandbox api keys i.e public and secret key
  2. If you set liveMode to yes then ensure that you're using your rave live api keys i.e public and secret key

Support :

  • For any bugs about this module, please feel free to report here.
  • And you are welcome to fork and submit pull requests.


This project is licensed under the MIT License - see the file for details