I'm trying to integrate paytm merchant payment gateway. To get the Payment page I have method
getCheckoutPage() {
this.vendor.checkout(this.data.money, this.totalGST, this.TotalAmount).subscribe(
res => {
console.log(res);
this.paymentButtonHtml = this.domSantizer.bypassSecurityTrustHtml(res);
}
);
}
response is like below
response
<html>
<head>
<title>Merchant Check Out Page</title>
</head>
<body>
<br>
<br>
<center><h1>Your transaction is being processed!!!</h1></center>
<center><h2>Please do not refresh this page...</h2></center>
<form method="post" action="https://securegw-stage.paytm.in/theia/processTransaction" name="f1" style="visibility: hidden;">
<table border="1">
<tbody>
<input type="hidden" name="REQUEST_TYPE" value="DEFAULT" />
<input type="hidden" name="MID" value="XXXXXXXXXXXXXXXXX" />
<input type="hidden" name="ORDER_ID" value="xxxxxxx" />
<input type="hidden" name="CUST_ID" value="426" />
<input type="hidden" name="INDUSTRY_TYPE_ID" value="Retail" />
<input type="hidden" name="CHANNEL_ID" value="WAP" />
<input type="hidden" name="TXN_AMOUNT" value="40.12" />
<input type="hidden" name="WEBSITE" value="xxxxxxxxxxxx" />
<input type="hidden" name="CALLBACK_URL" value="http://api.xxxxxxxxx.com/api/payment/status" />
<input type="hidden" name="MOBILE_NO" value="xxxxxxxxxx" />
<input type="hidden" name="CHECKSUMHASH" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
</tbody>
</table>
<script type="text/javascript">
document.f1.submit();
</script>
</form>
</body>
</html>
and html is
<p [innerHTML]="this.paymentButtonHtml"></p>
but the page is always showing only
Your transaction is being processed!!!
Please do not refresh this page...
after this is text the payment page is rendering. I'm stuck here from past 2 hours. could any one help me sove this problem. thanks in adavance
Related
I have a form and 3 buttons on it: Preview, reset and submit. And I want a new window to pop up when I click on the preview. Unfortunately, it also pops up when I send it
<html lang="cs-cz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<link rel="stylesheet" href="styly.css">
<form name="submit" method="POST" action="preview.php" id="formID" onsubmit="target_popup(this)" >
<form name="submit" method="POST" action="mailer.php" >
<div class="box">
<h1>ODVOZY</h1>
<p class="info"><input type="text" name="name" class="textfield1" placeholder="Jméno a příjmení"/></p>
<p class="info"><input type="text" name="adress" class="textfield1" placeholder="Adresa"/></p>
<p class="info"><input type="text" name="contact" class="textfield1" placeholder="Kontakt"/></p>
<p class="info"><input type="text" name="model" class="textfield1" placeholder="Typ zboží"/></p>
<p class="info"><input type="datetime-local" name="date" class="textfield1" placeholder="Date"/></p>
<select name="money" class="info1" name="money" method="post">
<option value="Vyber způsob platby">Vyber způsob platby</option>
<option value="Placeno">Placeno</option>
<option value="Platit doma">Platit doma</option>
<option value="Placeno jen odvoz">Placeno jen odvoz</option>
<option value="Jiné (viz poznámky)">Jiné (viz poznámky)</option>
</select>
<select name="city" class="info1" name="city" method="post" >
<option value="Vyber pobočku">Vyber pobočku</option>
<option value="Dvůr Králové n/L">Dvůr Králové n/L</option>
<option value="Hořice">Hořice</option>
</select>
<textarea name="message" class="info1" type="text" cols="20" rows="5"placeholder="Poznámka"></textarea>
<p> </p>
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
<script src="script.js"></script>
</div>
</form> </form>
</body>
</html>
Here is the Javascript, can you please tell me where it is going wrong
var myForm = document.querySelector("#formID");
if(myForm === "#formID" ){
myForm.onsubmit = function() {
var w = window.open('about:blank','Popup_Window','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left = 312,top = 234');
this.target = 'Popup_Window';
}
;
Your code is really badly formatted and I see a lot of issues here
</form> </form>
for instance.
BTW you have
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
Do you want to submit the form when you click the preview button?
Otherwise change the type ( input type="button" instead of submit).
Add a function on the click and change the js consequently.
<input type="button" name="preview" onclick="openPopup()">
/// JS
function openPopup(){
var w = window.open('about:blank','...
}
Below is my code snippet where I am passing my nab username and password for payment integration. How can I hide those password and username? I am using post method.
<apex:form id="register" onsubmit="return showPaymentOptions();">
<input type="hidden" id="courseIdT" name="courseIdT" value="testcourse" />
<input type="hidden" id="nabnameT" name="nabnamet" value="test"/>
<input type="hidden" id="nabpwdT" name="nabpwdT" value="testpwd" />
<input type="hidden" id="amtT" name="amtT" value="testamt" />
<input type="hidden" id="rdctUrlT" name="rdctUrlT" value="testurl" />
I want to hide the parameters nabnameT and nabpwdT.
Thanks
I'm trying to get a preview box update with form data when you click on a checkbox. But it doesn't work for array values.
Here's the code:
<script>
function FillPreview(f) {
if(f.update.checked == true) {
f.preview_name.value = f.post_title.value;
f.preview_description.value = f._ecp_custom_13.value;
f.preview_date.value = f.EventStartDate.value;
f.preview_venue_name.value = f.venue[Venue].value;
f.preview_venue_address.value = f.venue[Address].value;
f.preview_venue_city.value = f.venue[City].value;
f.preview_venue_state.value = f.venue[Province].value;
f.preview_phone.value = f.organizer[Phone].value;
f.preview_website.value = f.organizer[Website].value;
}
}
</script>
The following form HTML is just a summary. I'm actually using The Community Events Add-on to The Events Calendar plugin for Wordpress.
<form name="eventForm">
<input type="text" name="post_title" />
<input type="text" name="_ecp_custom_13" />
<input type="text" name="EventStartDate" />
<input type="text" name="venue[Venue]" />
<input type="text" name="venue[Address]" />
<input type="text" name="venue[City]" />
<input type="text" name="venue[Province]" />
<input type="text" name="venue[Zip]" />
<input type="text" name="organizer[Phone]" />
<input type="text" name="organizer[Website]" />
</form>
And the preview box HTML
<div id="preview">
<h2>Print Preview</h2>
<input type="text" class="preview-date" name="preview_date" />
<div class="preview-category" name="preview_category"></div>
<input type="text" class="preview-name" name="preview_name" />
<input type="text" class="preview-time" name="preview_time" />
<input type="text" class="preview-venue-name" name="preview_venue_name" />
<input type="text" class="preview-venue-address" name="preview_venue_address" />
<input type="text" class="preview-venue-city" name="preview_venue_city" />
<input type="text" class="preview-venue-state" name="preview_venue_state" />
<input type="text" class="preview-venue-zip" name="preview_venue_zip" />
<input type="text" class="preview-description" name="preview_description" />
<input type="text" class="preview-phone" name="preview_phone" />
<input type="text" class="preview-website" name="preview_website" />
</div>
<div>
<input type="checkbox" id="update" name="update" onclick="FillPreview(this.form)" />
</div>
My problem is that the array values are undefined while the other values (title, description, etc.) work just fine. Like I said before, the form code is actually from The Community Events Add-on to Wordpress's "The Events Calendar" plugin, so anybody who knows that plugin well will be more helpful.
I grabbed the javascript from this link. I tested that on my submit event page by itself and it worked just fine. As you can see I'm an absolute script kiddie. Any help would be greatly appreciated.
I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/
update 0
got this error message: Uncaught ReferenceError: $ is not defined
update 0
update 1 newest Source
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reservations</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<center><h1>Reservations</h1></center>
<div class="wrapper">
<p> You can start over at the beginning here. </p>
<big>Reserve some courts online </big> <br />
<script type="text/javascript" language="JavaScript">
$( document ).keypress(function() {
$("#timeStamp span").text("Timestamp is no-longer correct");
});
</script>
<form action="" method="post" >
<input type="hidden" name="ID" value="Rogers"></input>
<input type="hidden" name="weekday" value="Tuesday"></input>
<input type="hidden" name="nowweekday" value="1"></input>
<input type="hidden" name="month" value="September"></input>
<input type="hidden" name="nowmonth" value="9"></input>
<input type="hidden" name="day" value="18"></input>
<input type="hidden" name="year" value="2012"></input>
<input type="hidden" name="startTime" value="[15, 0]"></input>
<input type="hidden" name="endTime" value="[20L, 0L]"></input>
<input type="hidden" name="court" value="court1"></input>
<input type="hidden" name="court" value="court2"></input>
<h1>Tuesday, September 18, 2012 at Rogers Neighborhood Club</h1>
<div class="timeStamp" ><h1 id="timeStamp">15:07:24.657430<span></span></h1></div> <br />
update 1 newest Source
I have a timestamp on a page that is created on page load.
I want to alter the adjoining text label of the time stamp to indicate that the timestamp is no longer correct when there is a keyDown anywhere in the window.
Can that be done easily with javascript?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reservations</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<center><h1>Reservations</h1></center>
<div class="wrapper">
<p> You can start over at the beginning here. </p>
<big>Reserve some courts online </big> <br />
<script type="text/javascript" language="JavaScript">
$("*").keypress(function() {
$("#timeStamp").text("Modified");
});
</script>
<form action="" method="post" >
<input type="hidden" name="ID" value="Rogers"></input>
<input type="hidden" name="weekday" value="Tuesday"></input>
<input type="hidden" name="nowweekday" value="1"></input>
<input type="hidden" name="month" value="September"></input>
<input type="hidden" name="nowmonth" value="9"></input>
<input type="hidden" name="day" value="18"></input>
<input type="hidden" name="year" value="2012"></input>
<input type="hidden" name="startTime" value="[14, 30]"></input>
<input type="hidden" name="endTime" value="[20L, 0L]"></input>
<input type="hidden" name="court" value="court1"></input>
<input type="hidden" name="court" value="court2"></input>
<h1>Tuesday, September 18, 2012 at Rogers Neighborhood Club</h1>
<div class="timeStamp" id="timeStamp"><h1>text14:49:30.274646</h1></div> <br />
Yes, like so:
Assuming you're using jQuery and have the timestamp HTML like this:
<p id="timeStamp">2012-09-18 20:08 <span></span></p>
<!-- the span is where the message will be inserted -->
...and the jQuery code itself:
$( document ).keypress(function() {
$("#timeStamp span").text("Timestamp is no-longer correct");
});
Change your body element like this : <body onload="document.body.focus()" onkeyup="key()">... It will execute the key function everytime a key is pressed. Do everything you want there..