Trying to implement Worldpay integration. The docs at https://online.worldpay.com/docs/take-card-details-templates mention a token. I have tested the page and I dont get any token. Wandering how i can get this token.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="payment2.aspx.cs" Inherits="payment2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src= "https://cdn.worldpay.com/v1/worldpay.js">
</script>
<script type='text/javascript'>
window.onload = function () {
Worldpay.setClientKey('T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04');
Worldpay.reusable = false;
Worldpay.useTemplate('payment-form', 'my_payment_section', 'inline');
}
</script>
</head>
<body>
<form action="/complete" id="payment-form" method="post">
<!— all other fields you want to collect, e.g. name
and shipping address -->
<div id='my_payment_section'></div>
<div>
<input type="submit" value="Place Order" />
</div>
</form>
</body>
</html>
When the window.onload executes, it puts the WorldPay card capture form on your page. By the looks of it, you haven't disabled their Save Payment button, so are you trying to use your own submit button?? If you are trying to use your submit button, then you should add the onclick attribute to submit the worldpay template.
<input type="submit" value="Place Order" />
<form action="/complete" id="payment-form" method="post">
<div id="my_payment_section"></div>
<div>
<input id="submitCard" onclick="Worldpay.submitTemplateForm()" value="Confirm Payment" />
</div>
</form>
Once the form submits, worldpay.js takes over, and it will handle the sensitive card information, validate it and if all is ok, it will replace the cardDetails div with a single hidden input field which is the token.
If that all happens correctly, with no errors, after the token input has been placed in the DOM, the form will submit to your action "/complete", and the token will be part of the submitted values of the form.
Hope that helps.
Your script is missing the callback to generate the token in useTemplate()
See: https://developer.worldpay.com/jsonapi/docs/template-form
The callback generates the hidden input with the token value for you which posts to worldpay.
your script should be:
<script type='text/javascript'>
window.onload = function() {
Worldpay.useTemplateForm({
'clientKey':'T_C_a453a70e-c5e6-4618-9c7b-96f787f0fa04',
'form':'paymentForm',
'paymentSection':'paymentSection',
'display':'inline',
'reusable':false,
'callback': function(obj) {
if (obj && obj.token) {
var _el = document.createElement('input');
_el.value = obj.token;
_el.type = 'hidden';
_el.name = 'token';
document.getElementById('paymentForm').appendChild(_el);
document.getElementById('paymentForm').submit();
}
}
});
}
</script>
You also need the onclick="Worldpay.submitTemplateForm()" attribute on your submit too.
Related
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I'm following the IdentityServer3 jsGettingStarted sample github sample
But I'm trying to do so using MVC.
(The IdentityServer itself is in a separate project and solution as per the sample documentation.)
Providing the index.html page is via a Controller-Action, which is fine.
The login popup "popup.html" which is actually "popup.cshtml" is also via a Controller action and it also displays, but it won't close and display the user credentials in the index page as shown in the Sample.
But putting a few alerts in, .. the user is definitely logged in.
I also tried moving the popup.html into the root of the project (as .html and not as .cshtml and changing the server's Client.cs' RedirectUris to reflect that change) but without success.
Is it because of the cshtml pages being served from my controller actions ?
The documentation says that this should display by calling the display function, but the "manager.events.addUserLoaded" function is not firing, which calls the display function.
I am using VS2017 MVC5 with Framework 4.8.
Thanks
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/oidc-client.js"></script>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS Application</a>
</div>
</div>
</nav>
<div class="container main-container">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline list-unstyled requests">
<li>Home</li>
<li><button type="button" class="btn btn-default js-login">Login</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">User data</div>
<div class="panel-body">
<pre class="js-user"></pre>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
// helper function to show data to the user
function display(selector, data)
{
if (data && typeof data === 'string')
{
data = JSON.parse(data);
}
if (data)
{
data = JSON.stringify(data, null, 2);
}
alert("selector=" + data);
$(selector).text(data);
}
var settings = {
authority: 'https://localhost:44302', // The url of the IdentityServer
client_id: 'js',
popup_redirect_uri: 'http://localhost:44888/Account/Popup',
response_type: 'id_token token',
scope: 'openid profile email',
filterProtocolClaims: true
};
var manager = new Oidc.UserManager(settings);
var user;
manager.events.addUserLoaded(function (loadedUser)
{
alert("userManager");
user = loadedUser;
display('.js-user', user);
});
$('.js-login').on('click', function ()
{
manager
.signinPopup()
.catch(function (error)
{
console.error('error while logging in through the current window or popup', error);
});
});
</script>
By creating a standalone project rather than trying to do it in already established project, I managed to get it to work. There were clashes in the scripts and css we were already using.
I am using ADAL.js(which calls Azure Active Directory) as javascript library for verifying the user. I am using the following code for this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js"></script>
<script>
var endpoints = {
"https://management.core.windows.net": "https://management.core.windows.net"
};
var config = {
clientId: 'e333d3fe-a73a-4476-8121-8a57f9a972ca',
endpoints: endpoints,
};
var authContext = new AuthenticationContext(config);
authContext.handleWindowCallback();
function onSuccessLogin(error, token, msg) {
console.log("Inside Call back");
if (!!token) {
console.log("Log-in to Azure successfully done", token);
}
else {
console.log("Error while log-in to Azure", error);
}
if (!!authContext._user) {
console.log("You are connected to Azure ")
}
}
function login() {
authContext.popUp = true;
authContext.callback = onSuccessLogin;
authContext.login();
// authContext.handleWindowCallback();
var user = authContext.getCachedUser();
console.log(user);
};
function logout () {
authContext.logout();
};
</script>
<input id="Button1" type="button" value="clickme" onclick="clickme()" />
<input id="Button3" type="button" value="login" onclick="login()" />
<input id="Button2" type="button" value="logout" onclick="logout()" />
// These are the text-boxes whose value I want to retain.
First name:<br>
<input id=fname" type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input id="lname" type="text" name="lastname" value="Mouse">
</body>
</html>
These are few issue with this code in Edge, although everything is working fine in chrome:
Why the onSuccessLogin() is not always called on edge?
Why the pop window for log-in is not appearing always?
Sometime after entering the credential the pop won't close.
What worked for me is:
set the config.callback and popUp=true before calling AuthenticationContext(config)
Also you should not call handleWindowCallback() if the URL does not contain a #. The code should be:
if (authenticationContext.isCallback(window.location.hash)) {
authenticationContext.handleWindowCallback();
I suggest that you have a look and adapt the following sample I tested and worked in Edge (and of course Chrome) in both cases (with and without popup):
https://github.com/Azure-Samples/active-directory-dotnet-webapi-onbehalfof-ca/blob/master/TodoListSPA/app.js
(the configuration is in https://github.com/Azure-Samples/active-directory-dotnet-webapi-onbehalfof-ca/blob/master/TodoListSPA/appconfig.js)
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});
Does anyone know how to create a simple calculator using CEWPs or Form Web Parts on SharePoint 2007? Basically all I need is two fields for input and a submit button which uses the 2 input fields in a function and then gives the answer.
Sounds simple but everything I've tried (using html and javascript) produces an error in SharePoint, even if it works in a normal html page!!
Thanks in advance,
Karl
<HTML>
<HEAD>
<TITLE>Saves Calculator</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function CalculateSaves(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = ((((A * B)/60)/60)/7.33)/19;
}
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
</SCRIPT>
</HEAD>
<BODY>
<P><FONT SIZE="+2">Saves Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>Time in Seconds: <INPUT TYPE=TEXT VALUE="30" NAME="input_A" SIZE=10> Activities: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Calculate Saves" name="AddButton" onClick="CalculateSaves(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="Reset" name="ClearButton" onClick="ClearForm(this.form)"></P>
<P>Saves = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P>
</FORM>
</BODY>
</HTML>
I had the same problem.
Move the html and javascript to a notepad file, save as .html
Upload to document library
Add a Page Viewer webpart to your page, and link it to the html file saved within the library
This should now work.