I tried to implement payment gateway in my angular 8 project but not working.I followed this :https://www.devglan.com/angular/payumoney-integration-angular
If anyone know please help to find the solution.
Demo :https://stackblitz.com/edit/angular-selvam-ecommerce-task-wz3ot1?file=src%2Fapp%2Fdirectives%2Fbilling.dir.ts
There is a very simple way to integrate it.
const paymentDetails = {
payu_url: '', // add payu url
first_name: '', // user name
email: '', // user email
mobile: '', // user mobile
callback_url: '', // callback url
payu_cancel_url: '', // callback cancel url
payu_fail_url: '', // callback fail url
payu_merchant_key: '', // payu merchant key
payu_sha_token: '', // payu hash token
txnid: '', // unique txnid
plan_name: '', // name
amount: '', // amount
service_provider: '' // service
};
let paymentString = `
<html>
<body>
<form action="${paymentDetails.payu_url}" method="post" id="payu_form">
<input type="hidden" name="firstname" value="${paymentDetails.first_name}"/>
<input type="hidden" name="email" value="${paymentDetails.email}"/>
<input type="hidden" name="phone" value="${paymentDetails.mobile}"/>
<input type="hidden" name="surl" value="${paymentDetails.callback_url}"/>
<input type="hidden" name="curl" value="${paymentDetails.payu_cancel_url}"/>
<input type="hidden" name="furl" value="${paymentDetails.payu_fail_url}"/>
<input type="hidden" name="key" value="${paymentDetails.payu_merchant_key}"/>
<input type="hidden" name="hash" value="${paymentDetails.payu_sha_token}"/>
<input type="hidden" name="txnid" value="${paymentDetails.txnid}"/>
<input type="hidden" name="productinfo" value="${paymentDetails.plan_name}"/>
<input type="hidden" name="amount" value="${paymentDetails.amount}"/>
<input type="hidden" name="service_provider" value="${paymentDetails.service_provider}"/>
<button type="submit" value="submit" #submitBtn></button>
</form>
<script type="text/javascript">document.getElementById("payu_form").submit();</script>
</body>
</html>`;
const winUrl = URL.createObjectURL(
new Blob([paymentString], { type: "text/html" })
);
window.location.href = winUrl;
you can watch this video, here it describe in simple way
Related
When I try to get an HTML form from using Node.JS/Express it seems to return a undefined value as the req.body returns an empty object.
Node
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = '3000'
app.use(bodyParser.urlencoded({ extended: true}))
app.use(bodyParser.json());
app.use(express.static('public'))
app.get('/',function(req, res) {
res.sendFile( __dirname + '/signup.html')
});
app.post('/', function(req, res) {
const FirstName = req.body.firstName
const LastName = req.body.lastName
console.log(FirstName)
console.log(LastName)
});
app.listen(port, function(err) {
if (err) console.log(err)
console.log('Local port started at', port)
});
HTML
<form action="/" method="post"\>
<label for="firstName"\>First Name\</label\>
<input class="form-grid__item--field" type="text" id="firstName" placeholder="First Name"\>
<label for="lastName">Last Name</label>
<input class="form-grid__item--field" type="text" id="lastName" placeholder="Last Name">
<label for="subscriberEmail">Email</label>
<input class="form-grid__item--field" type="text" id="subscriberEmail" placeholder="Email">
<input type="submit" class="form__button" value="Sign Me Up!">
</form>
Reformatted the code several times. Looked into the html form to ensure the action and methods where in place. When over body parser documentation to try and get more context but nothing.
The id field inside input label is used for referencing the element in the DOM.
In order to pass the input as a field in the request you must give it attribute name
<input class="form-grid__item--field" type="text" id="subscriberEmail" name="subscriberEmail" placeholder="Email">
The req.body searches for the name attribute in your form. Add the name attribute and then access them via req.body.theNameOfTheAttribute
<form action="/" method="post"\>
<label for="firstName"\>First Name\</label\>
<input class="form-grid__item--field" type="text" id="firstName" placeholder="First Name"\>
<label for="lastName">Last Name</label>
<input class="form-grid__item--field" type="text" id="lastName" placeholder="Last Name">
<label for="subscriberEmail">Email</label>
<input class="form-grid__item--field" type="text" id="subscriberEmail" placeholder="Email">
<input type="submit" class="form__button" value="Sign Me Up!">
</form>
Here is the problem I have:
When validating my form I would like to :
1- Send the form information to a Webhook (to process the information) I would like it to be invisible for the user
2- Redirect the user to a confirmation page (or display a confirmation message on the form)
Here is my current form that only sends the info to the webhook:
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="submit" class="btn">RECEVOIR LE KIT COMPLET</button>
I don't know if it's adjustable with Javascript or just HTML...
Thanks for your help :)
You can change your button type to "button" and then add a handler to that button to POST the data. In the example below I modified your code to do that and use fetch to POST the data to the endpoint.
Inside the ".then" part is the callback (this does not get execited until you receive the response from the fetch). This is where you would display the dialog to the user or redirect them to another page.
<form method="post" action="https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/">
<input id="prenom" type="text" name="first_name" id="first_name" placeholder="Votre prénom" required="required" />
<input id="email" type="email" name="email" id="email" placeholder="Votre adresse e-mail" required="required" />
<button id="submit" type="button" class="btn" id="btn">RECEVOIR LE KIT COMPLET</button>
</form>
<script>
const getButton = document.getElementById('btn');
const getFirstName = document.getElementById('first_name');
const getEmail = document.getElementById('email');
fetch('https://hooks.zapier.com/hooks/catch/12195186/bzjhk97/', {
method: 'POST',
body: new URLSearchParams({
first_name: getFirstName.value,
email: email.value
})
})
.then(response => {
// Do stuff with the response
});
The geocodeAddress() function uses fetch to send a http request. Before I added "event.preventDefault()" as a parameter to the function, it would not run properly (TypeError: Network Error) as the request was being interrupted by the page reloading caused by the form being sent. However, once I added it, the form no longer gets sent. I don't think the problem lies with the php code as I have not altered it at all. What could be causing this?
I had the same error in this post before
'TypeError: NetworkError when attempting to fetch resource' on form submit ReactJS
<form action="private/database.php" method="POST" onsubmit="geocodeAddress(event.preventDefault())">
<input type="text" name="surname" placeholder="性氏" required><br>
<input type="text" name="given_name" placeholder="名字" required><br>
<label for="male">
<input type="radio" id="male" name="gender" required>
男性
</label>
<label for="female">
<input type="radio" id="female" name="gender">
女性
</label><br>
<input type="text" name="email" placeholder="電子信箱" required><br>
<input type="text" name="phone_number" placeholder="電話" required><br>
<input type="text" id="address" name="address" placeholder="地址" required><br>
<input type="hidden" id="lat" name="lat">
<input type="hidden" id="lng" name="lng">
<input type="date" name="cleaning_date" required><br>
<input type="submit" name="form_submit">
</form>
<script>
function handleErrors(res) {
if (!res.ok) {
throw Error(res.statusText);
}
return res;
}
function geocodeAddress() {
const address = document.getElementById('address').value;
fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=AIzaSyDxsdfWYv25UrruPXLqeXKVYUnD-VyReA`)
.then(handleErrors)
.then(res => res.json())
.then(data => {
console.log(data);
document.getElementById('lat').value = data.results[0].geometry.location.lat.toString();
document.getElementById('lng').value = data.results[0].geometry.location.lng.toString();
})
.catch(error => console.log(error));
}
</script>
This is a pretty simple issue. event.preventDefault() stops the default action, that the event would do, which in this case is submitting the form. This means the fetch isn't interrupted, but of course, the form doesn't submit.
In order to fix this, you have to manually submit the form after the fetch has succeeded. This can be easily done by executing event.target.submit(). (event.target references the form, so we are simply calling the submit function of the form) Here is the modified geocodeAddress function, that should do just that:
function geocodeAddress(event) {
event.preventDefault() // prevent the submit from happening immediately
const address = document.getElementById('address').value;
fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=AIzaSyDxsdfWYv25UrruPXLqeXKVYUnD-VyReA`)
.then(handleErrors)
.then(res => res.json())
.then(data => {
console.log(data);
document.getElementById('lat').value = data.results[0].geometry.location.lat.toString();
document.getElementById('lng').value = data.results[0].geometry.location.lng.toString();
event.target.submit() // trigger the submit again once the fetch has finished
})
.catch(error => console.log(error));
}
Oh and also, in the onsubmit of the form, you should just have the "geocodeAddress()".
<form action="private/database.php" method="POST" onsubmit="geocodeAddress()">
How can I display the form submitted data in another HTML Page
From 1st page (page1.html)collecting the data from users and after appending this data in the database I want to show the submitted values in another page i.e.(page4.html)
Below is my code
I have tried using res.sendFile or res.send
server.post('/addname', (req, res) => {
const user = {
timestamp: new Date,
FName: req.body.FName,
LName: req.body.LName,
Phone: req.body.Phone,
Email: req.body.email,
Contact: req.body.business,
Business: req.body.contact,
OTP: req.body.otp_field
}
res.sendFile(__dirname + '/page4.html');
//along with file rediraction, how can i send or show the "User" vaules in respactivte filed
});
<body>
<div>
<div align="center">
<form action="/addname" method="GET">
<label>Please enter below details</label><br><br>
<label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
<label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>
<label>Email Address *: </label><input type="email" name="email"><br><br>
<br><br>
<input type="submit" value="Submit" /></form>
</div>
</div>
</body>
nAs I can see in your code
<body>
<div>
<div align="center">
<form action="/addname" method="GET">
<label>Please enter below details</label><br><br>
<label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
<label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>
<label>Email Address *: </label><input type="email" name="email"><br><br>
<br><br>
<input type="submit" value="Submit" /></form>
</div>
</div>
</body>
Your form method is "GET", it should be "POST" as your API is "POST".
server.post('/addname', (req, res) => {
<form action="/addname" method="GET">
//Just change to
<form action="/addname" method="POST">
While sending and HTML file you need to send your submitted data too.
res.sendFile(__dirname + '/page4.html');
In order to save your hurdle switch to Single Page Application and use some JavaScript frame work like AngularJs, ReactJs or if not then also stick to single page and use Ajax calls for submit calls.
Else see "ejs" in place of "HTML" and use scriptlet to send and show data over HTML.
To send data to "ejs" via expressJs
res.render('show.ejs', {message});
With Ajax you can do this:
HTML
<body>
<div>
<div align="center">
<form id="form1">
<label>Please enter below details</label><br><br>
<label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
<label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>
<label>Email Address *: </label><input type="email" name="email"><br><br>
<br><br>
<input type="button" value="Submit" onClick:"submitForm()"/>
</form>
<div id="showValue"></div>
</div>
</div>
</body>
JavaScript
function submitForm() {
$.ajax({
url: '/addName',
type: 'POST',
headers: headers,
data: {
"Fname": $("#FName").val(),
"Lname": $("#LName").val(),
"email": $("#email").val()
},
success: function(result) {
//append result to your html
//Dynamic view
$("#form1").hide();
var html = '<div><span>First Name: ' + result.fName + '</span><span>Last Name: ' + result.lName + '</span></div>';
$("#showValue").html(html);
},
error: function (error) {
alert('error ',error);
}
});
}
Server side code I'm assuming you are using express.js and body-parser
app.post('/addName', (req, res) => {
//Insert into db
var body = req.body;
res.send({
fName: body.FName,
lName: body.LName
});
});
I was wondering if there is a way to show the values for the key variable?
There isn't a check for the answers, and I cannot for the life of me find out the answer. Please help:
<form method="post" action="/webwork2//Section13.3/5/"
enctype="multipart/form-data" id="problemMainForm" name="problemMainForm" onsubmit="submitAction()">
<input type="hidden" name="user" value="name" id="hidden_user" />
<input type="hidden" name="effectiveUser" value="name" id="hidden_effectiveUser" />
<input type="hidden" name="key" value="ZHaiEU4qkcpMc1m2kBaYrMvbOo5TktAY" id="hidden_key" />
</form>
This simple JavaScript function makes visible all hidden inputs on the site:
function showHiddenInputs() {
inputs = Array.from(document.getElementsByTagName('input'));
inputs.forEach((input) => {
if (input.type === 'hidden')
input.type = 'text';
})}
showHiddenInputs();
One-liner to the browser console:
inputs = Array.from(document.getElementsByTagName('input')); inputs.forEach((input) => { if (input.type === 'hidden') input.type = 'text'; })
If you wanna get value only from element with name "key", use this in console:
document.getElementsByName('key')[0].value
You can use any other number instead of 0, if there are multiple elements with name "key" or you can use this loop:
elements = Array.from(document.getElementsByName('lsd'));
elements.forEach((element) => {
if (element.type === 'hidden')
console.log(element.value);
})
console.log(document.getElementById('hidden_key').value);
console.log(document.getElementsByName('key')[0].value);
<form method="post" action="/webwork2//Section13.3/5/"
enctype="multipart/form-data" id="problemMainForm" name="problemMainForm" onsubmit="submitAction()">
<input type="hidden" name="user" value="name" id="hidden_user" />
<input type="hidden" name="effectiveUser" value="name" id="hidden_effectiveUser" />
<input type="hidden" name="key" value="ZHaiEU4qkcpMc1m2kBaYrMvbOo5TktAY" id="hidden_key" />
</form>