Vue-cashfree-sdk NPM

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/vue-cashfree-sdk@3.0.0/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);
}
```