I'm trying to integrate Paypal Plus to my store, using API Reference guide (see the screenshot). Everything is done but the paypal returns 500 error when I try to complete the checkout: UNKNOWN_INTERNAL_ERROR.
Searching through Google wasn't successful.
<script src="https://www.paypalobjects.com/webstatic/ppplusdcc/ppplusdcc.min.js" type="text/javascript"></script>
<div id="ppplusDiv" style="width: 300px; height: 502px;"></div>
<script type="application/javascript">
var ppp = PAYPAL.apps.PPP({
"approvalUrl": "https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&token=EC-25D26051FW287782J",
"placeholder": "ppplusDiv",
"mode": "sandbox",
"payerFirstName": "John",
"payerLastName": "Doe",
"payerPhone": "33927349232",
"payerEmail": "admin#example.com",
"payerTaxId": "831.899.557-00",
"payerTaxIdType": "BR_CPF",
"disableContinue": "continueButton",
"enableContinue": "continueButton",
"language": "en_US",
"country": "BR",
});
<button id="continueButton" class="ty-btn__big ty-btn__primary cm-ajax cm-checkout-place-order ty-btn" type="submit" name="dispatch[checkout.place_order]" onclick="if (!document.getElementById('product_agreements') || document.getElementById('product_agreements').checked) { ppp.doContinue(); return false;}">Разместить заказ</button>
Related
I have taken over the general administration of a business website. On the service pages, two separate instances of structured data are being loaded (the Service schema type, and the Webpage schema type).
<script type='application/ld+json'>
{
"#context": "http://schema.org/",
"#type": "Service",
"serviceType": "Service Type Here",
"alternateName": "Alternate Service Name Here",
"description": "Description Here",
"mainEntityOfPage": "https://www.WebsiteAddress.com/service-type",
"name": "Service Name"
}
</script>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"name": "Webpage Name",
"url": "https://www.WebsiteAddress.com/service-type",
"inLanguage":"en-US",
"description": "Description Here",
"publisher": {
"name": "Business Name"
}
}
</script>
Could the current setup cause conflicts with how search engines interpret the page?
As most of the tags are duplicates, would it make more sense to remove the Webpage type schema markup and add the brand tag into the Service schema?
Interested to hear opinions on this.
About your Q. The short answer is YES => It's ok to declare two types (-or- more) on the same page (No "one rule" her - it's related to page structure/content).
"duplication" -
First As most of the tags are duplicates is a wrong sentence (One time the name related to webPage object and one time for service object). If in your specific case "service name" = "page name" it's ok to use the same value (This is the true semantic meaning of your content).
WebPage & Service
WebPage is a special type:
Every web page is implicitly assumed to be declared to be of type
WebPage. https://schema.org/WebPage
If you look at this issue in the microdata approach it's easier to understand the structure/idea of the sentence above.
a.The webpage (Again - Every page assumed to be of type WebPage):
<body itemscope="" itemtype="http://schema.org/WebPage">
<h1 itemprop="name">Our services</h1>
</body>
b.The service
<div itemscope itemtype="http://schema.org/TaxiService">
<h2 itemprop="name">Drive to airport</h2>
</div>
a & b - could look like this:
<body itemscope itemtype="http://schema.org/WebPage">
<h1 itemprop="name">Our services</h1>
<div itemscope itemtype="http://schema.org/TaxiService">
<h2 itemprop="name">Drive to airport</h2>
</div>
</body>
If page name = service name - you could do something like this:
<body itemscope itemtype="http://schema.org/WebPage">
<meta itemprop="name" content="Drive to airport">
<div itemscope itemtype="http://schema.org/TaxiService">
<h1 itemprop="name">Drive to airport</h1>
</div>
</body>
Nothing wrong her.
1/2. The page name is "Drive to airport" (true):
2/2. And the service name is "Drive to airport" (true):
If the service is the main entity of webPage this outline is a good start point (Close to your Q code example):
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"name": "Our services",
"breadcrumb": "main > Our services",
"mainEntity":{
"#type": "service",
"name": "Drive to airport"
}
}
</script>
Is it possible to create a websockets subscription from a browser? We are using the branch feature/1181_websockets branch, git version 5ca6770aa401b52a31293fdcef4a9743fb1de2c4.
We made a PoC trying to subscribe a browser via websockets. We tried connecting some JS code running in the browser to the subscriptions url. The connection was established, but orion crashed when sending data from the client through the socket. Is this use case supported? Do you have a working example for it? The JS code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="send" type="button" name="button">send</button>
<script type="text/javascript">
var payload = `{"description": "One subscription to rule them all",
"subject": {
"entities": [{
"idPattern": ".*",
"type": "Room"
}],
"condition": {
"attrs": ["temperature"],
"expression": {
"q": "temperature>40"
}
}
},
"expires": "2016-04-05T14:00:00.00Z",
"throttling": 5
}`;
var ws = new WebSocket('ws://orion-url:9010/v2/subscriptions', 'ngsiv2-json');
var button = document.getElementById('send');
button.addEventListener('click', function(event) {
ws.send(payload)
});
</script>
</body>
</html>
As an alternative, we tried to create a subscription using the REST API, asking Orion to notify us via websockets. We POSTed the following JSON:
{
"description": "One subscription to rule them all",
"subject": {
"entities": [
{
"idPattern": ".*",
"type": "Room"
}
],
"condition": {
"attributes": [
"temperature"
],
"expression": {
"q": "temperature>40"
}
}
},
"notification": {
"callback": "ws://my-websocket-listener:8081"
},
"expires": "2016-04-05T14:00:00.00Z",
"throttling": 5
}
The subscription process fails and Orion returns a 422 status code with the message:
{
"error": "BadRequest",
"description": "Invalid URL"
}
Did we make any mistake in the subscription request? Is this use case supported?
Thanks!
Currently you can subscribe with your browser and receive notifications, the restriction are the following:
From WS you can create a WS or REST subscription.
From REST you cannot create a WS subscription.
Only in the REST subscriptions you can specify the callback, in WS always must be "ws://". If you create a WS subscription the creator will be the receiver.
WS subscription are deleted if a connection is closed.
Here I let a little code as example, you only need change the URL by your Orion's URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
window.WebSocket = window.WebSocket || window.MozWebSocket;
// Here change with your URL
var websocket = new WebSocket('ws://127.0.0.1:9010', 'ngsiv2-json');
websocket.onopen = function () {
$('h1').css('color', 'green');
};
websocket.onerror = function () {
$('h1').css('color', 'red');
};
websocket.onmessage = function (message) {
console.log(message.data);
console.log(message);
$('div').append(message.data + '<br/>');
};
$('#send').click(function(e) {
e.preventDefault();
if ($('#txt').val().length > 0)
{
websocket.send($('#txt').val());
$('#txt').val('');
}
});
$('#new').click(function(e) {
e.preventDefault();
var msg = "{\"verb\":\"POST\",\"url\":\"/v2/entities\", \
\"params\":{\"options\":\"keyValues\"}, \
\"payload\":{\"type\":\"1\",\"id\":\"1\",\"temp\":1}}";
$('#txt').val(JSON.stringify(JSON.parse(msg), null, 2));
});
$('#upd').click(function(e) {
e.preventDefault();
var msg = "{\"verb\":\"POST\",\"url\":\"/v2/entities/1\", \
\"params\":{\"options\":\"keyValues\"},\"payload\":{\"temp\": 1}}";
$('#txt').val(JSON.stringify(JSON.parse(msg), null, 2));
});
$('#get').click(function(e) {
e.preventDefault();
var msg = "{\"verb\":\"GET\",\"url\":\"/v2/entities/1\"}";
$('#txt').val(JSON.stringify(JSON.parse(msg), null, 2));
});
$('#del').click(function(e) {
e.preventDefault();
var msg = "{\"verb\":\"DELETE\",\"url\":\"/v2/entities/1\"}";
$('#txt').val(JSON.stringify(JSON.parse(msg), null, 2));
});
$('#sub').click(function(e) {
e.preventDefault();
var msg = "{\"verb\":\"POST\",\"url\":\"/v2/subscriptions\", \
\"payload\":{\"description\":\"My subscription\", \
\"subject\":{\"entities\":[{\"id\":\"1\",\"type\":\"1\"}], \
\"condition\":{\"attributes\":[\"temp\"],\"expression\":{\"q\":\"temp>40\"}}}, \
\"notification\":{\"callback\":\"ws://\",\"attributes\":[\"temp\"], \
\"throttling\":5},\"expires\":\"2017-04-05T14:00:00.00Z\"}}";
$('#txt').val(JSON.stringify(JSON.parse(msg), null, 2));
});
});
</script>
</head>
<body>
<h1>WebSockets test</h1>
<form>
<table border="0">
<tr>
<td colspan="2">
<textarea rows="35" cols="70" id="txt"></textarea>
</td>
</tr>
<tr>
<td>
<button id="new">New</button>
<button id="upd">Update</button>
<button id="get">Show</button>
<button id="del">Delete</button>
<button id="sub">Subcription</button>
</td>
<td align="right">
<button id="send">Send</button>
</td>
</tr>
</table>
</form>
<br/>
<p>Server:</p>
<div></div>
</body>
</html>
I'm not a JS expert... but this work to me as a test when I work in the WS for Orion
Cheers
we have a payment page on our site. We implemented it via Braintree.
The PoC is here http://petrzampach-001-site11.smarterasp.net/
The code is similar to this:
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
#using (Html.BeginForm("CreatePurchase", "Home", FormMethod.Post, new { role = "form" }))
{
<div id="paymentGate">
<div id="payment-form"></div>
</div>
<script>
braintree.setup(
"#ViewBag.BrainTreeClientToken",
"dropin", {
container: "payment-form"
});
</script>
}
So far so good. But, we dont like the pop up window when you click on the Paypal button. We would like to integrate it into our site. I asked Braintree support and they told us about v.zero. Excellent! But unfortunatelly we cannot figure this one out. No matter what we try it always opens in a pop up window.
My another PoC is here:
http://petrzampach-001-site11.smarterasp.net/home/CustomUI
The code looks like this:
<script src="https://js.braintreegateway.com/js/braintree-2.21.0.min.js"></script>
#using (Html.BeginForm("CreatePurchase", "Home", FormMethod.Post, new { role = "form", id = "payment-form" }))
{
<label for="card-number">Card Number</label>
<div id="card-number" style="border:1px solid black;height:20px;"></div>
<label for="cvv">CVV</label>
<div id="cvv" style="border:1px solid black;height:20px;"></div>
<label for="expiration-date">Expiration Date</label>
<div id="expiration-date" style="border:1px solid black;height:20px;"></div>
<div id="paypal-container"></div>
<script type="text/javascript">
braintree.setup("#ViewBag.BrainTreeClientToken", "custom", {
id: "payment-form",
hostedFields: {
number: {
selector: "#card-number"
},
cvv: {
selector: "#cvv"
},
expirationDate: {
selector: "#expiration-date"
}
},
paypal: {
container: "paypal-container",
},
onPaymentMethodReceived: function (obj) {
}
});
</script>
}
We can customize the credit card fields, but still cannot embed the Paypal login into our page.
Thank you for any advice.
Petr
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact our support team.
When using v.zero, the form for accepting PayPal credentials opens within a popup. This is so customers know they are providing their credentials to PayPal in a secure, encrypted manner and not entering their credentials on a malicious site. People that pay with PayPal expect that they can verify their credentials are only being submitted to PayPal, and implementing v.zero in this way leads to higher conversion rates, which is our motivation for implementing it this way.
There is no option to allow PayPal credentials to be entered not through a popup.
I'm having problem loading a google chart after clicking the submit button in a form. I came across many similar questions posted online but none solve my question, including this.
The structure of my code: I wrap the google chart code inside a submitHandler: function(form) , then wrap the whole submitHandler with a $("#timeuseform").validate({}), then the most outside is a $(document).ready(function(){}) .
When I remove the google chart code, everything worked fine. When I copy and paste the google chart code into submitHandler: function(form) , the whole page broke down.
here the HTML:
<head>
<meta charset="utf-8">
<title>Time Use Survey 2014</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Do you sleep, work and play more than fellow Americans?</h1>
<br>
<hr width="100%" size="3" noshade="noshade" color="#8A8A8A"/>
<br>
<form name="myForm" id="timeuseform" method="get" action="#">
1. On average, how much you sleep per day?<br>
<input type="text" name="sleep" value="" id="inputsleep"/><br><br>
<div id="sleepbox"></div><br><br>
2. On average, how much time you work on your workday (excludes travel related to work)?<br>
<input type="text" name="work" value="" id="inputwork"/><br> and you are working
<SELECT NAME="workstatus" SIZE="1" id="inputworkstatus">
<OPTION>full-time
<OPTION>part-time
</SELECT><br><br>
<div id="workbox"></div><br><br>
<input type="submit" value="Submit" id="button"/>
<INPUT TYPE="reset">
</form>
<br><br>
<div id="chart_div" style="width: 500px; height: 300px;"></div>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
and this is the JS:
$(document).ready(function(){
//form validation using jquery validation plugin
$("#timeuseform").validate({
rules: {
sleep: {
required: true,
number: true
},
work: {
required: true,
number: true
},
},
//messages to be displayed if input cannot be validated
messages: {
sleep: {
required: "Please answer this question",
number: "Your answer must be a number with maximum 1 decimal point"
},
work: {
required: "Please answer this question",
number: "Your answer must be a number with maximum 1 decimal point"
},
},
//display error messages style if input cannot be validated
errorPlacement: function(label, element) {
label.insertAfter(element);
},
wrapper: 'span',
submitHandler: function(form) {
//setting the input variables
var inputsleep = $('#inputsleep').val(),
inputwork = $('#inputwork').val();
//code for question 1 on sleep
if(inputsleep>8){
$("#sleepbox").text("You sleep too much!");
$("#sleepbox").addClass("more");
}
else{
$("#sleepbox").text("You sleep too little!");
$("#sleepbox").addClass("less");
}
//code for question 2 on work
if(inputwork>6){
$("#workbox").text("You work too much!");
$("#workbox").addClass("more");
}
else{
$("#workbox").text("You work too little!");
$("#workbox").addClass("less");
}
//code for google bar chart starts here
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data1, options);
}
}
});
});
I have uploaded both working (without google chart code) and broken (with google chart code) in my github.
Working without google chart: http://kuangkeng.github.io/keng-data-journalism/timeuseform/nochart.html
Broken with google chart: http://kuangkeng.github.io/keng-data-journalism/timeuseform/chart.html
Appreciate if anyone can guide me to fix this problem. Thanks.
Move the google.load and google.setOnLoadCallback calls outside your jQuery code. Use the callback to initialize your validator instead of using document ready:
function init () {
$("#timeuseform").validate({
// validator stuff
});
}
google.load("visualization", "1", {packages:["corechart"], callback: init});
I am trying to make a small app with items pulled from a json source and i want a form to edit each element. Each element has several attributes, name, id, description.
Here is the example but the edit form does nothing at the moment. I will later use the example to store the data in a database.
I am trying to find out the best solution to have this edit form directly on each element when pushing on edit for example. What is the best way to do it?
Thanks in advance!
script.js
var app = angular.module('myApp', []);
function Controller($scope) {
var items = [
{
"id": "1",
"name": "John",
"price": "55.33",
"description": "Lorem ipsums aute irure doln v anim id est laborum.",
"flag": "0"
},
{
"id": "2",
"name": "Mike",
"price": "68",
"description": "Loriannaj jh said ihsa djni cjipsums aute irure doln v anim id est laborum.",
"flag": "0"
},
{
"id": "15",
"name": "George",
"price": "78",
"description": "This is the description",
"flag": "1"
}
];
//Initialize the controller and the UI
$scope.items = angular.fromJson(items);
}
html
<html ng-app="myApp">
<head>
<title>Test Page</title>
<link type="text/css" rel="stylesheet" href="style.css">
<!-- Angular Staff -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header>
</header>
<section>
<div class="columns2" ng-controller="Controller">
<div style="width: 500px; display: inline-block">
<h3>ITEMS</h3>
<div ng-repeat="item in items">
<div class="user_div" >
{{item.name}}
<a style="float: right" href="#" ng-click="showEdit = ! showEdit">Edit </a>
</div>
<div class="user_data" ng-show="showDetails" >{{item.description}}</div>
<div class="user_data" ng-show="showEdit" >
<h3>Edit Item</h3>
<input value="{{item.name}}" type="text" >
<input value="{{item.description}}" type="text" >
<button ng-click="editItem({{item.id}},{{itemName}},{{itemDescription}})">Edit</button>
</div>
</div>
<br>
<pre>Items: {{items|json}}</pre> </div>
</div>
</body>
</html>
I ran into the same requirement and came up with this solution:
<tr ng-repeat="transaction in data.transactions">
...
<td>
<input ng-model="transaction.numAvailable"
ng-style="!transaction.edit && {'background-color': '#eeeeee'}"
ng-blur="saveShelf(transaction)"
ng-click="editShelf(transaction)"
class="form-control"
ng-value="transaction.numAvailable"/>
</td>
</tr>
And in my controller.js:
$scope.editShelf = function(trans){
trans.edit = true;
};
$scope.saveShelf = function(trans){
trans.edit = false;
//call service to save value
};
Basically, you have an input that looks disabled with bg-color:#eee, onclick removes the bg-color, onblur resets the bg-color. To make this work I added an 'edit=false' to my list with lodash:
_.forEach($scope.data.transactions, function(trans){
trans.edit = false;
});
You can use x-editable for inline edit. As we can't see any example , you can use this module for inline-edit.
you can create a factory like this
app.factory('userFactory', function ($http) {
var factory = {};
factory.get = function () {
return $http.get('your_rest_url', {}).then(function (resp) {
console.log('Success', resp);
}, function (err) {
console.error('ERR', err);
});
};
});
inject it to your controller
var Ctrl = function ($scope, userFactory) {
$scope.items = userFactory.get();
};
then bind the data to your form elements
<input ng-model="items.property">