Razorpay redirect to particular payment method - integration

I am working on Razorpay integration in my React Native app. It is successfully integrated in app.
Right now it opens screen with all payment methods including Card, Netbanking, Wallet and UPI. What I want to achieve is to redirect user to specific payment method. Suppose if user selects Netbanking then instead of opening page with all payment method options it should be redirect to netbanking page of razorpay.
I googled it but didn't get specific flow to integrate it. Please let me know how to achieve it.
What I tried till now is as below:
var options = {
description: 'Credits towards consultation',
image: 'https://i.imgur.com/3g7nmJC.png',
currency: 'INR',
key: 'KEY',
amount: '100',
name: 'FOOO',
method:"netbanking",
//bank:"HDFC",
prefill: {
email: 'test#gmail.com',
contact: '919191919991',
name: 'Razorpay Software'
},
theme: {color: '#F37254'}
}
RazorpayCheckout.open(options).then((data) => {
// handle success
console.log("razorpay success : " + JSON.stringify(data));
alert(`Success: ${data.razorpay_payment_id}`);
}).catch((error) => {
// handle failure
console.log("razorpay success : " + JSON.stringify(error));
alert(`Error: ${error.code} | ${error.description}`);
});
Here, method:"netbanking", doesn't work. It always open initial page with all payment methods. I am using react-native-razorpay library for implementation.

If you are listing the payment methods on your page, then you can prefill the method at Razorpay based on user selection as below,
Other checkout options;
'prefill': {
'email': 'test#gmail.com',
'contact': '919191919991',
'name': 'Razorpay Software',
'method': 'netbanking', //card|upi|wallet
},
'theme': {
'color': '#F37254',
'hide_topbar': 'true', //To hide the back button
}

Related

Quasar + Feathers-Vuex: how to integrate?

I want to integrate Quasar with FeathersJS using Feathers-Vuex
Feathers-Vuex uses a pattern to:
promise to authenticate from localStorage/cookies
.then( /*start the new Vue() app */ )
I created my app with Quasar CLI 1.0.beta16-ish and looked through /src and couldn't find the main entry point for Quasar. I feel like I'm missing something.
What includes src/store/index.js?
quasar.conf.js includes this comment - where is the main.js
// app boot file (/src/boot)
// --> boot files are part of "main.js"
boot: ["axios"],
Feathers-Vuex includes a Nuxt integration guide that may solve the same problem. These packages are all new to me, and I'm excited to learn them!
Thank you!
The part of main.js is included in quasar app.js that you can find in .quasar folder. The src/store/index.js contains the Vuex Store definition. A "store" is basically a container that holds your application state.
For more detail visit - https://quasar-framework.org/guide/app-vuex-store.html https://quasar-framework.org/guide/app-plugins.html
I ended up with two things:
Adding Feathers-Vuex to my backend.
Adding this "boot file" in my Quasar project
The comments are a bread-crumb trail if I ever have to figure it out again :-)
/*
Context:
For 3rd-party API's, we us /src/boot/axios.js
For our own API's, we use FeathersClient (socket.io & REST)
https://docs.feathersjs.com/guides/basics/clients.html
https://docs.feathersjs.com/api/authentication/client.html#appconfigureauthoptions
Our FeathersClient is in `/src/lib/feathersClient.js`
and imported into `/src/store/index.js`
which is imported by Quasar's build system. /src/quasar.conf.js setting(?)
Feathers-vuex integrates Vuex with FeathersClient:
https://feathers-vuex.feathers-plus.com/auth-module.html
Feathers-Vuex proxies it's authentication/logout actions to FeathersClient
https://github.com/feathers-plus/feathers-vuex/blob/master/src/auth-module/actions.js
The parameters for these actions are here:
https://docs.feathersjs.com/api/authentication/client.html#appauthenticateoptions
In addition to this module, you can use FeathersVuex state in UI from here:
https://feathers-vuex.feathers-plus.com/auth-module.html
This module:
Create a Feathers Auth integration for Vue as a Quasar Boot Module.
// Use case: test if user is authenticated
if (Vue.$auth.currentUser()) { ... }
// Use case: get current user's email
name = Vue.$auth.currentUser("email") || "anonymous"
// Use case: Login
Vue.$auth.login({
strategy: 'local',
email: 'my#email.com',
password: 'my-password'
});
// Use case: Logout
// logs out and sends message
let p = Vue.$auth.logout();
// After logout, go home
p.then(() => {
// User data still in browser
router.push({ name: "home"});
// To clear user data, do a hard refresh/redirect - https://feathers-vuex.feathers-plus.com/common-patterns.html#clearing-data-upon-user-logout
location && location.reload(true)
});
*/
export default ({ app, router, store, Vue }) => {
// Create the API demonstrated above
const auth = {
currentUser(prop) {
let u = store.state.auth.user || false;
if (u && prop) return u[prop];
return u;
},
login(authData, quiet) {
return store
.dispatch("auth/authenticate", authData)
.then(() => {
Vue.prototype.$q.notify({
message: "Welcome back!",
type: "info"
});
})
.catch(err => {
if (!quiet) {
console.log(err);
Vue.prototype.$q.notify({
message: "There was a problem logging you in.",
type: "error"
});
}
});
},
logout(quiet) {
return store.dispatch("auth/logout").then(() => {
if (!quiet)
Vue.prototype.$q.notify({
message: "You've been logged out.",
type: "info"
});
});
},
register(authData) {}
};
// Auth from JWT stored in browser before loading the app. true => suppress token not found error
auth.login("jwt", true);
// Add API to Vue
Vue.prototype.$auth = auth;
// If you would like to play with it in the console, uncomment this line:
// console.log(auth);
// Then, in the console:
/*
temp1.login({
strategy: "local",
email: "feathers#example.com",
password: "secret"
})
*/
// If you haven't created this user, see here:
// https://docs.feathersjs.com/guides/chat/authentication.html
// For this REST api endpoint
/*
curl 'http://localhost:3001/users/' -H 'Content-Type: application/json' --data-binary '{ "email": "feathers#example.com", "password": "secret" }'
*/
};

Patch array of values to Reactive Form

I have a JSON response coming back from the server that is an assessment object with an array of questions. I need to path the values to my reactive form. This patch value function is working when there is only 1 question:
this.caseAssessmentForm.patchValue({
ID: assessment.templateID,
name: assessment.name,
type: assessment.typeName,
status: "Not Started",
description: assessment.description,
questions: {
questionScore: '',
questionAnswer: '',
questionGoal: assessment.templateQuestions[0].goal,
questionName: assessment.templateQuestions[0].name
}
});
The problem is that once there are multiple questions returning, I can't patch the value as an array. I've tried using questions: this.FormBuiler.array([]), but I still can't figure out how to dynamically patch the values. Does anyone have any ideas?
What you need to do is to iterate the incoming array, push each object as a FormGroup to an formArray. So the build could have an empty form array:
this.caseAssessmentForm = this.fb.group({
// more fields here...
questions: this.fb.array([])
})
...where fb is referring to FormBuilder.
When you get your data, you iterate it and push formgroups to that formarray questions, so:
...
this.caseAssessmentForm.patchValue({
ID: assessment.templateID,
name: assessment.name,
type: assessment.typeName,
status: "Not Started",
description: assessment.description,
});
this.patchFormArray(); // call this to populate formarray!
...
patchFormArray() {
let ctrl = <FormArray>this.caseAssessmentForm.controls.questions;
this.assesment.templateQuestions.forEach(question => {
ctrl.push(this.fb.group({
questionScore: '',
questionAnswer: '',
questionGoal: question.goal,
questionName: question.name
}))
})
}

How to use Smooch postbacks?

I can't seem to find any documentation on how to actually use the postabck feature. Does it call functions on the server? What does ti do with the pasees value?
%[Button label here](postback:PAYLOAD_HERE) // What is the payload?
The payload is actually whatever you want!
Postback buttons can be used as triggers to your webhook. When a user taps on your postback button, a payload will be sent to your webhook with the following data:
{
"trigger": "postback",
"postbacks":[{
...
"action": {
"_id": "571530ee4fae94c32b78b170",
"type": "postback",
"text": "Read more",
"payload": "YOUR_PAYLOAD_HERE" // <---- your payload!
}
}],
...
}
For complete payload see this reference: http://docs.smooch.io/rest/#webhooks-payload
On your side, you could have automated messages, event scheduling or anything you want.
A simple payload could be TELL_ME_JOKE and on your backend, you could fetch your database for a joke, then send a message through the Smooch API to reply back.
Another payload could be RESERVE_MONDAY. When the user taps that button, your webhook receives RESERVE_MONDAY. Then you could use that value to know what to do next (call into your application to reserve that time slot).
Here's a simple Node.js implementation:
const express = require('express');
const SmoochCore = require('smooch-core');
const smoochApi = new SmoochCore({
keyId: 'some-key',
secret: 'some-secret',
scope: 'app'
});
express.Router().post('/smooch/webhooks', (req, res) => {
const smoochPayload = req.body.postbacks[0].action.payload;
const userId = req.body.appUser._id;
if (smoochPayload === 'TELL_ME_JOKE') {
smoochApi.conversations.sendMessage(userId, {
text: 'A cow walks into a bar...',
role: 'appMaker'
});
} else if (smoochPayload === 'RESERVE_MONDAY') {
CalendarController.reserve(userId, 'monday');
}
res.end();
});
Using the payload also allows you to use different button labels, but keep the same payload (ie. different translations).
Note: it could be anything even JSON if you want!
I hope this can help you!
The payload is what you want your bot to return. I'm not sure if my way of describing it is the best since I'm new at this. Think of it this way - If you have a button labeled %[Yes](postback:YES), then when the user clicks on the button that says yes, it will be just like they typed the word "yes."

AngularJS 1.4 - CRUD - Not able to add dummy JSON data

I am trying to simple CRUD in AngularJS 1.4 and here is the link.
http://plnkr.co/edit/N7GOW17PaUGEYSgz1zut?p=preview
When I try to add a employee in the JSON string using below code it is not working.
$scope.employees.push($scope.employee);
Reference: I followed this tutorial which uses older version of AngularJS
https://www.youtube.com/watch?v=5uhZCc0j9RY
Controllers are not singletons, they are initiated each time a page is loaded that requests them. Your addController is actually updating your employees value, but then $location.path() is navigating back to the listController, which is re-running and resetting your employees.
One solution to this issue comes with the use of a service. Instead of defining employes on $scope, you can create a service which holds these contents. Services are singletons, and can be injected into any controller which needs access to these properties.
crudApp.service('employeeService', function(){
this.employees = [{
name: 'Jay',
city: 'London',
age: '36'
}, {
name: 'Mohan',
city: 'Chennai',
age: '44'
}];
});
crudApp.controller('listController', function($scope, employeeService) {
$scope.employees = employeeService.employees;
});
crudApp.controller('addController', function($scope, $location, employeeService) {
$scope.employee = {
name: "",
city: "",
age: ""
};
$scope.add = function() {
employeeService.employees.push($scope.employee);
$location.path('/');
};
});
http://plnkr.co/edit/HkCrmu1IFqnoyn62bPUt?p=preview
It is adding the employee. The problem is that after adding the employee, you are reloading the page, which effectively reloads the application and resets the initial state. Since you are working with an in-memory list, changes are lost. If you don't have a database, consider using local storage.

why is html5 form input saying required when optional

So I have a html5 form with input fields. Lets say the fields are first name, last name, phone, email, and address.
Now first, last, and address are required while phone and email are optional. I know that the backend has this configured properly. However on the html5 form it will not let me submit without phone or email otherwise it returns a 400 error.
If I remove the optional from the html5 form, it will let me submit it or I can put in a value=" " and will submit also. I can even tag the fields with CSS3 using :required and :optional and it will show appropriately but still won't let me submit.
Now I obviously can't just remove the optional from the html because some users may need those fields but I also don't want to send a default value of " " or "n/a" for users who don't need them. Am I just doing something wrong here or what? I don't get what is going on.
edit 2: This is a node.js api using Hapi.js with Joi validation, request, and couchdb.
edit: I know that 400 is a server error but if I post with a curl omitting the optional ones it goes through fine. It also goes through fine when I remove the optional ones from the html which is why it doesn't make sense. Here is the validation code server side for the api.
handler: function(req, res) {
request({
method: 'POST',
uri: 'https://127.0.0.1:6984/banned',
jar: cookieJar,
strictSSL: false,
json: {
firstn: req.payload.firstn,
lastn: req.payload.lastn,
licno: req.payload.licno,
phone: req.payload.phone,
email: req.payload.email,
address: req.payload.address,
description: req.payload.description
}
},
function(err, resp, body) {
if (err) { res(err) };
if (resp.statusCode === 401) {
res(resp.statusCode + ' Please log in.');
}
else if (resp.statusCode === 201) {
res(body);
}
});
},
validate: {
payload: {
firstn: Joi.string().required(),
lastn: Joi.string().required(),
licno: Joi.string().optional(),
phone: Joi.string().optional(),
email: Joi.string().optional(),
address: Joi.string().optional(),
description: Joi.string().required()
}
}
So a friend helped me figure it out. What is happening is that required or not the html form is sending with a value of "" if no data is put in. That is not " ", "null", "undefined" just "". This is not a valid value for the server so it throws the 400 error. The code that fixed it was by checking if the payload exists before validating and sending it through.