Vue Cashfree SDK for Web

This Cashfree SDK is built on VueJs

Features

This sdk lets you do the payment from frontend web app.

Installing

Package manager

Using npm:

$ npm install vue-cashfree-sdk

Using yarn:

$ yarn add vue-cashfree-sdk

Once the package is installed, you can import the library using import:

import VueCashfree from "vue-cashfree-sdk";

CDN

Using jsDelivr CDN :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-cashfree-sdk.common.min.js"></script>

Example

<template>
  <div id="app">
    <VueCashfree
      :initialiseKey="initialiseKey"
      @onSuccess="onSuccess"
      @onFailure="onFailure"
      :orderToken="orderToken"
      env="development"
    />
    <button @click="makePayment()">Make Payment</button>
  </div>
</template>

<script>
  import VueCashfree from "vue-cashfree-sdk";
  export default {
    name: "App",
    components: {
      VueCashfree,
    },
    data() {
      return {
        orderToken: "",
        initialiseKey: false,
      };
    },
    methods: {
      async makePayment() {
        this.orderToken = "session_AhQng5UfYM7SEER";
        this.initialiseKey = false;
        setTimeout(() => {
          this.initialiseKey = true;
        }, 1);
      },
      onSuccess(res) {
        console.log("res", res);
      },
      onFailure(err) {
        console.log("err", err);
      },
    },
  };
</script>

Default values of props and methods

| Property | Type | Default value | Options | | :-----------: | :-----: | :---------------------------------: | :---------------------------------: | | initialiseKey | Boolean | False | True,False | | env | String | development | development, production | | orderToken | String | Provided by Cashfree | Provided by Cashfree Order | | onSuccess | Method | Triggers when payment is successful | Triggers when payment is successful | | onFailure | Method | Triggers when payment is failure | Triggers when payment is failure |

Props and Methods on details :

Props :

• initialiseKey (required): This prop triggers the sdk by changing the value from false to true

  this.initialiseKey = false;
  setTimeout(() => {
    this.initialiseKey = true;
  }, 1);

• env (optional): This prop determines cashfree sdk will be in development or production version. Its default value isdevelopment.If its value set to production then cashfree sdk will work in production mode.

  <VueCashfree
    :initialiseKey="initialiseKey"
    @onSuccess="onSuccess"
    @onFailure="onFailure"
    :orderToken="orderToken"
    env="development"
  />

• orderToken (required): When cashfree payment is initiated a payment_session_id is provided by cashfree. payment_session_id will be found in cashfree order initiate response.

  this.orderToken = "session_AhQng5UfYM7SEER"; // This is payment_session_id. Provided by cashfree.

Methods :

• onSuccess (required): This method is triggered when payment is successful.

  onSuccess(res) {
    console.log("res", res);
  }

• onFailure (required): This method is triggered when payment is failure.

  onFailure(err) {
    console.log("err", err);
  }

License

The MIT License

Designed and developed by Devraj github