Feels like it should be possible to create an order with multiple items using standard buttons generated on the Paypal site. Clearly I'm missing something and would appreciate any assistance or information. Below is my page source code and the error message received when pressing the Pay button.
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=MY_SANDBOX_CLIENT_ID&enable-funding=venmo¤cy=USD&debug..."></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
style: {
color: 'blue',
shape: 'rect',
label: 'pay',
},
// Sets up the transaction when a payment button is clicked
createOrder: function(data, actions) {
return actions.order.create({
"intent": "CAPTURE",
"payer": {
"name": {
"given_name": "John",
"surname": "Doe"
},
"address": {
"address_line_1": "123 nowhere lane",
"address_line_2": "Apt 2",
"admin_area_2": "Sacramento",
"admin_area_1": "CA",
"postal_code": "93423",
"country_code": "US"
},
"email_address": "sb_test_email_address#business.example.com",
"phone": {
"phone_type": "MOBILE",
"phone_number": {
"national_number": "12312342343"
}
}
},
"purchase_units": [
{
"description": "My Purchases",
"amount": {
"currency_code": "USD",
"value": "12.00",
"breakdown": {
"item_total": {
"currency_code": "USD",
"value": "12.00"
},
"shipping": {
"currency_code": "USD",
"value": "0"
},
"tax_total": {
"currency_code": "USD",
"value": "0"
}
}
},
"items": [
{
"name": "Item 1",
"unit_amount": {
"currency_code": "USD",
"value": "6.00"
},
"quantity": "1"
},
{
"name": "Item 2",
"unit_amount": {
"currency_code": "USD",
"value": "6.00"
},
"quantity": "1"
}
]
}
]
});
},
// Finalize the transaction after payer approval
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
window.location.href = "Thanks.html";
});
},
onCancel: function(data) {
//payment cancelled
alert("Payment Cancelled");
},
onError: function(err) {
alert("Error Message: " + err);
}
}).render('#paypal-button-container');
</script>
</div>
The error message I get is shown in this image. Any help or guidance would be greatly appreciated.
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/TD8kw.png
After reformatting the Orders create request payload in your question for legibility and testing just the payload at the demo site, it worked without issue (screenshot below).
You can also find a reference example in step 6 of 'Add and modify the code' in the current documentation.
I have a problem while using fancytree.
After checking one or more items, drag and drop, the font color of the moved item has been changed
$(function() {
// Attach the fancytree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the fancytree() function:
$("#tree").fancytree({
extensions: ["dnd5", "multi", "table"],
checkbox: true,
// debugLevel: 1,
source: [{
"title": "Books",
"expanded": true,
"folder": true,
"children": [{
"title": "Art of War",
"type": "book",
"author": "Sun Tzu",
"year": -500,
"qty": 21,
"price": 5.95
},
{
"title": "The Hobbit",
"type": "book",
"author": "J.R.R. Tolkien",
"year": 1937,
"qty": 32,
"price": 8.97
},
{
"title": "The Little Prince",
"type": "book",
"author": "Antoine de Saint-Exupery",
"year": 1943,
"qty": 2946,
"price": 6.82
},
{
"title": "Don Quixote",
"type": "book",
"author": "Miguel de Cervantes",
"year": 1615,
"qty": 932,
"price": 15.99
}
]
},
{
"title": "Music",
"folder": true,
"children": [{
"title": "Nevermind",
"type": "music",
"author": "Nirvana",
"year": 1991,
"qty": 916,
"price": 15.95
},
{
"title": "Autobahn",
"type": "music",
"author": "Kraftwerk",
"year": 1974,
"qty": 2261,
"price": 23.98
},
{
"title": "Kind of Blue",
"type": "music",
"author": "Miles Davis",
"year": 1959,
"qty": 9735,
"price": 21.90
},
{
"title": "Back in Black",
"type": "music",
"author": "AC/DC",
"year": 1980,
"qty": 3895,
"price": 17.99
},
{
"title": "The Dark Side of the Moon",
"type": "music",
"author": "Pink Floyd",
"year": 1973,
"qty": 263,
"price": 17.99
},
{
"title": "Sgt. Pepper's Lonely Hearts Club Band",
"type": "music",
"author": "The Beatles",
"year": 1967,
"qty": 521,
"price": 13.98
}
]
},
{
"title": "Electronics & Computers",
"expanded": true,
"folder": true,
"children": [{
"title": "Cell Phones",
"folder": true,
"children": [{
"title": "Moto G",
"type": "phone",
"author": "Motorola",
"year": 2014,
"qty": 332,
"price": 224.99
},
{
"title": "Galaxy S8",
"type": "phone",
"author": "Samsung",
"year": 2016,
"qty": 952,
"price": 509.99
},
{
"title": "iPhone SE",
"type": "phone",
"author": "Apple",
"year": 2016,
"qty": 444,
"price": 282.75
},
{
"title": "G6",
"type": "phone",
"author": "LG",
"year": 2017,
"qty": 951,
"price": 309.99
},
{
"title": "Lumia",
"type": "phone",
"author": "Microsoft",
"year": 2014,
"qty": 32,
"price": 205.95
},
{
"title": "Xperia",
"type": "phone",
"author": "Sony",
"year": 2014,
"qty": 77,
"price": 195.95
},
{
"title": "3210",
"type": "phone",
"author": "Nokia",
"year": 1999,
"qty": 3,
"price": 85.99
}
]
},
{
"title": "Computers",
"folder": true,
"children": [{
"title": "ThinkPad",
"type": "computer",
"author": "IBM",
"year": 1992,
"qty": 16,
"price": 749.90
},
{
"title": "C64",
"type": "computer",
"author": "Commodore",
"year": 1982,
"qty": 83,
"price": 595.00
},
{
"title": "MacBook Pro",
"type": "computer",
"author": "Apple",
"year": 2006,
"qty": 482,
"price": 1949.95
},
{
"title": "Sinclair ZX Spectrum",
"type": "computer",
"author": "Sinclair Research",
"year": 1982,
"qty": 1,
"price": 529
},
{
"title": "Apple II",
"type": "computer",
"author": "Apple",
"year": 1977,
"qty": 17,
"price": 1298
},
{
"title": "PC AT",
"type": "computer",
"author": "IBM",
"year": 1984,
"qty": 3,
"price": 1235.00
}
]
}
]
},
{
"title": "More...",
"folder": true,
"lazy": true
}
],
activate: function(event, data) {},
lazyLoad: function(event, data) {
data.result = [{
"title": "Sub item",
"lazy": true
}, {
"title": "Sub folder",
"folder": true,
"lazy": true
}]
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(1).text(node.key);
$tdList.eq(2).text(!!node.folder);
},
dnd5: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
autoExpandMS: 1000,
multiSource: true, // drag all selected nodes (plus current node)
// focusOnClick: true,
// refreshPositions: true,
dragStart: function(node, data) {
// allow dragging `node`:
data.dataTransfer.dropEffect = "move";
return true;
},
// dragDrag: function(node, data) {
// data.node.info("dragDrag", data);
// data.dataTransfer.dropEffect = "copy";
// return true;
// },
dragEnter: function(node, data) {
data.node.info("dragEnter", data);
data.dataTransfer.dropEffect = "link";
return true;
},
// dragOver: function(node, data) {
// data.node.info("dragOver", data);
// data.dataTransfer.dropEffect = "link";
// return true;
// },
dragEnd: function(node, data) {
data.node.info("dragEnd", data);
},
dragDrop: function(node, data) {
// This function MUST be defined to enable dropping of items on the tree.
//
// The source data is provided in several formats:
// `data.otherNode` (null if it's not a FancytreeNode from the same page)
// `data.otherNodeData` (Json object; null if it's not a FancytreeNode)
// `data.dataTransfer.getData()`
//
// We may access some meta data to decide what to do:
// `data.hitMode` ("before", "after", or "over").
// `data.dataTransfer.dropEffect`, `.effectAllowed`
// `data.originalEvent.shiftKey`, ...
//
// Example:
var dataTransfer = data.dataTransfer,
sourceNodes = data.otherNodeList,
event = data.originalEvent,
copyMode = event.ctrlKey || event.altKey;
if (copyMode) {
$.each(sourceNodes, function(i, o) {
o.copyTo(node, data.hitMode, function(n) {
delete n.key;
n.selected = false;
n.title = "Copy of " + n.title;
});
});
} else {
$.each(sourceNodes, function(i, o) {
o.moveTo(node, data.hitMode);
});
}
node.debug("drop", data);
node.setExpanded();
}
}
});
});
.fancytree-drag-source {
font-style: oblique;
}
.fancytree-drag-source.fancytree-drag-remove {
opacity: 0.5;
}
/* Prevent scrolling while DND */
ul.fancytree-container {
/*
height: 200px;
overflow: auto;
*/
/* position: inherit;*/
}
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test D'n'D - Fancytree</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://wwwendt.de/tech/fancytree/src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="https://wwwendt.de/tech/fancytree/src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.dnd5.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.multi.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.table.js"></script>
</head>
<body class="example">
<h1>Example: extended drag'n'drop sample</h1>
<div class="description">
This sample shows how to
<ul>
<li>implement drag'n'drop with multiple selected nodes
<li>allow modifier keys <kbd>Ctrl</kbd> or <kbd>Alt</kbd> to force copy instead of move operations
</ul>
</div>
<div>
<label for="skinswitcher">Skin:</label>
<select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<!--<p class="description">
Standard tree:
</p>
<div id="tree"></div>-->
<p class="description">
Table tree:
</p>
<table id="tree">
<colgroup>
<col width="*"/>
<col width="200px"/>
<col width="100px"/>
</colgroup>
<thead>
<tr>
<th></th>
<th>Key</th>
<th>Folder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p class="droppable">
Droppable.
</p>
</body>
This may be related to a bug that is closed with v2.30.
I´m trying to display a dynamic value (from backend) inside the inner radius of a pie donut chart (typically a percentage value).
Can you help me?
thanks
You can add a label into allLabels. The other option is to add the label after the chart initiated:
chart.addListener("init", function (e) {
e.chart.addLabel(...);
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"innerRadius": "40%",
"gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
"dataProvider": [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}],
"balloonText": "[[value]]",
"valueField": "litres",
"titleField": "country",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#FFFFFF",
"fontSize": 16
},
"allLabels": [{
"y": "47%",
"align": "center",
"size": 20,
"bold": true,
"color": "#555",
"text": "30%"
}],
"export": {
"enabled": true
}
});
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>
<html>
<head>
<script type="text/javascript">
$("#tree").jstree({
"core" : {
"themes" : {
"responsive": false
},
"check_callback" : true,
'data': [
{
"id": "10",
"text": "Parent Node",
"children": [
{
"id": "101",
"text": "Initially selected",
"state": {
"selected": true
}
},
{
"id": "20",
"text": "Custom Icon"
},
{
"id": "30",
"text": "Initially open",
"state": {
"opened": true
},
"children": [
{
"id": "301",
"text": "Another node"
}
]
},
{
"id": "40",
"text": "Another Custom Icon"
},
{
"id": "50",
"text": "Disabled Node",
"state": {
"disabled": true
}
},
{
"id": "60",
"text": "Sub Nodes",
"children": [
{
"id": "601",
"text": "Item 1"
},
{
"id": "602",
"text": "Item 2"
},
{
"id": "603",
"text": "Item 3"
},
{
"id": "604",
"text": "Item 4"
},
{
"id": "605",
"text": "Item 5"
}
]
}
]
}
]},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},
"plugins" : [ "checkbox", "state", "types" ]
});
$("#tree").on("changed.jstree", function (e, data) {
for(var i=0;i<data.checked.length;i++) {
document.getElementById("Content").value +=data.instance.get_node(data.checked[i]).text+",";
}
})
</script>
<body>
<div id="tree">
</div>
<textarea id="Content" name="Content" rows="10"></textarea>
</body>
</html>
https://drive.google.com/file/d/0B4PAmUA35G8FTEtvakdPazlPdGs/view?pli=1
I checked four node in this tree, I want to display on textarea.
"Parent Node, Intially selected, Custom Icon, Initially open, Another node"
How to get all checked node text?
Try this:
function getAllSelectedNodesText(jsTree) {
// this returns ids of all selected nodes
var selectedNodes = jsTree.jstree("get_selected");
var allText = [];
// Go through all selected nodes to get text (jquery)
$.each(selectedNodes, function (i, nodeId) {
var node = jsTree.jstree("get_node", nodeId);
allText.push(node.text); // Add text to array
});
return allText.join(); // This will join all entries with comma
}
You can call it like this:
var allSelectedText = getAllSelectedNodesText($("#tree"));
Useful links:
http://www.jstree.com/api/#/?q=(&f=get_selected([full])
http://www.jstree.com/api/#/?q=(&f=get_node(obj [, as_dom])
i want to bind child nodes to two different kendo ui controls , but my Kendo Data source fetches the data from service in single call ,
var viewModel = kendo.observable {
dataSource : new kendo.data.DataSource({
transport: {
read: {
url: '/data/auras',
dataType: "json",
type: 'GET',
}
},
schema: {
/////////
},
});
}
My JSON response result looks like this
[
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters": {
"batter": [
{
"id": "1001",
"type": "Regular"
},
{
"id": "1002",
"type": "Chocolate"
},
{
"id": "1003",
"type": "Blueberry"
},
{
"id": "1004",
"type": "Devil's Food"
}
]
},
"topping": [
{
"id": "5001",
"type": "None"
},
{
"id": "5002",
"type": "Glazed"
},
{
"id": "5005",
"type": "Sugar"
},
{
"id": "5007",
"type": "Powdered Sugar"
},
{
"id": "5006",
"type": "Chocolate with Sprinkles"
},
{
"id": "5003",
"type": "Chocolate"
},
{
"id": "5004",
"type": "Maple"
}
]
}
]
Here I have to bind batter ( is child Element) to One Gridview && topping ( is child Element) to another Gridview ,
You could use schema.parse to split your JSON result into two lists. Something like:
var batters = new kendo.data.DataSource({
data: []
});
var toppings = new kendo.data.DataSource({
data: []
});
var allData = new kendo.data.DataSource({
transport: {
read: {
url: '/data/auras',
dataType: "json",
type: 'GET',
}
},
schema: {
parse: function (data) {
batters.data(data[0].batters.batter);
toppings.data(data[0].toppings);
return data;
}
},
});
allData.fetch();
var viewModel = kendo.observable({
batters: batters,
toppings: toppings
});