capacitor-razorpay

razorpay-capacitor

razorpay-capacitor

Capacitor wrapper around Razorpay's Android and iOS SDKs

Latest Changes

• Added support for Capacitor 4 migration
• In case need to be used with Capacitor3 please install version 1.1.1

Installation

Capacitor v6:

• npm i -S https://github.com/razorpay/razorpay-capacitor.git

Capacitor v5:

• npm i -S https://github.com/razorpay/razorpay-capacitor.git#76fd7d6b59f631eb44e6ecebc9188b2425168beb

Capacitor v4:

• npm i -S https://github.com/razorpay/razorpay-capacitor.git#8faf4530bd5a701af190e64ac406ddb3ed2b1d2e

Adding Plugin For Android Integration

Add the Checkout class to the ArrayList in the MainActivity class in {{projectDir}}/android/src/main/MainActivity.java

import com.ionicframework.capacitor.Checkout;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  registerPlugin(Checkout.class);
}
}

Usage (iOS, Web, Android)

import { Checkout } from 'capacitor-razorpay';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private alertController: AlertController) {}

  async payWithRazorpay(){
    const options = {
      key: '[YOUR_KEY_ID]',
      amount: '100',
      description: 'Great offers',
      image: 'https://i.imgur.com/3g7nmJC.png',
      order_id: 'order_Cp10EhSaf7wLbS',//Order ID generated in Step 1
      currency: 'INR',
      name: 'Acme Corp',
      prefill: {
        email: '[e-mail]',
        contact: '9191919191'
      },
      theme: {
        color: '#3399cc'
      }
    };
    try {
      let data = (await Checkout.open(options));
      console.log(data.response+"AcmeCorp");

      this.presentAlert(data.response);
    } catch (error) {
      this.presentAlert(error.message); //Doesn't appear at all
    }
  }

  async presentAlert(response: string){
    // let responseObj = JSON.parse(response)
    console.log("message"+ response['razorpay_payment_id']);
    const alert = await this.alertController.create({
      message:response['razorpay_payment_id'],
      backdropDismiss: true,
    });

    await alert.present();
  }

}