Giter VIP home page Giter VIP logo

ionic-rave's Introduction

Ionic 3 Rave

This Ionic 3 Module let's you add Rave Pay Button into your Cordova/Phonegap apps builds.

Installation


The Rave Ionic 3 Module adds support for spinning up the Rave modal on IOS and Android. It uses the Rave Standard endpoint and has done all the hard work for you. All you need to is add the necessary file and call the appropriate functions.

  1. Follow the official Rave documentation on how to create an account if you don't have one yet.
  2. Create a dummy project. For example ionic start myapp blank
  3. Install the Module
$ cd myapp
$ npm install --save rave-ionic3
$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save @ionic-native/in-app-browser
  1. Add the module to your AppModule
  2. Ensure that you have set up a redirect url to handle the response sent from rave. See here for guide lines on how to set up your redirect url
  3. See Usage

Usage


import { Rave, RavePayment, Misc } from 'rave-ionic3';
import { InAppBrowser, InAppBrowserEvent, InAppBrowserObject } from '@ionic-native/

constructor(
  private rave: Rave, 
  private ravePayment: RavePayment, 
  private misc: Misc,
  private iab: InAppBrowser,
  ) { }

...


this.rave.init(PRODUCTION_FLAG, "YOUR_PUBLIC_KEY")
      .then(_ => {
        var paymentObject = this.ravePayment.create({
          customer_email: "[email protected]",
          amount: 2000,
          customer_phone: "234099940409",
          currency: "NGN",
          txref: "rave-123456",
          meta: [{
              metaname: "flightID",
              metavalue: "AP1234"
          }]
      })
        this.rave.preRender(paymentObject)
          .then(secure_link => {
            secure_link = secure_link +" ";
            const browser: InAppBrowserObject = this.rave.render(secure_link, this.iab);
            browser.on("loadstop")
                .subscribe((event: InAppBrowserEvent) => {
                  if(event.url.indexOf('https://your-redirect-url') != -1) {
                    if(this.rave.paymentStatus(url) == 'failed') {
                      this.alertCtrl.create({
                        title: "Message",
                        message: "Oops! Transaction failed"
                      }).present();
                    }else {
                      this.alertCtrl.create({
                        title: "Message",
                        message: "Transaction successful"
                      }).present();
                    }
                    browser.close()
                  }
                })
          }).catch(error => {
            // Error or invalid paymentObject passed in
          })
      })

Instance Members

Rave

init(PRODUCTION_FLAG, PUBLIC_KEY)

You must call the init method with the PRODUCTION_FLAG set to true or false and your PUBLIC KEY. If your production flag is set to true, you will need to pass in your live public key otherwise, you pass in your sandbox public key

  • Returns: Promise

preRender(validatedPaymentObject) You must preconnect to Rave to obtain a secure link that will enable you to load the payment UI. Prior to calling this method you must have called RavePayment.create() to validate your payment object.

  • Returns: Promise

render(paymentLink) Start the Rave UI to collect payment from user.

  • Returns: InAppBrowserObject

Use the InAppBrowserObject returned to close the modal once the transaction completes by binding to the loadend event and checking for your redirect url as was shown above.

paymentStatus(url) Get's the status of the transaction and returns it as a string. The status could either be success or ````failed```.

Parameter(s)

  • url: this is the url gotten from the inappbroswer event event.url

  • Returns: String

You should use the returned status to determine whether or not you shoud show a success or error message to your users.

NOTE: IOS users may still need to rely on the Done button at the bottom left of the opened.

Rave Payment

create(paymentObject) You must validate the paymentObject you want to use to load the Rave payment UI. See https://developer.flutterwave.com/docs/rave-inline-1 for more documentation of the parameters.

  • Returns: Object (either an error or your validated payment object)

amount() The amount of the payment

email() The customer's email

txref() The transaction reference of the payment

currency() The currency of the payment

License


Released under MIT License

Contributions


Pull requests and new issues are welcome. See CONTRIBUTING.md for details.

ionic-rave's People

Contributors

jake-parkers avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.