Could someone check my PayPal Smart Button? - button

I'd be grateful if some kind person would glance over this PayPal SmartButton code?
I've put in the NO_SHIPPING and I'm not sure about all the brackets (){}[] and whether there should be double " or single ' inverted commas etc.
I'm OK with html, but this scripting mystifies me.
Thanks in anticipation, Steve
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&e nablefunding=venmo&currency=GBP" data-sdk-integration-source="button- factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"item for sale\nacceptM/accept43_BB1frT6.htm","amount":{"currency_code":"GBP","value":20}}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
//actions.redirect('https://www.website.com/');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>

Script SDK line is not correct, has extra spacing and a missing hyphen. You need:
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=GBP" data-sdk-integration-source="button-factory"></script>
That's simply the code the button factory would have generated for you, and it works.
For future reference most HTML/JS problems can be troubleshooted in a browser's Developer Tools, on the Console and Network and (for HTML) Inspect tabs, reloading the page once the Network tab is open for example.

Related

Integrating multiple PayPal Smart Buttons on a page [duplicate]

I'm using PayPal JS SDK payment buttons where all you do is copy the code into your HTML site and the PayPal buttons appear to initiate a checkout.
This works for only one button on the page, but I have 3 subscriptions a user can choose from (daily, weekly, monthly)
If I copy the code into my daily div area it works correctly, but then if I copy the code into the weekly div it wont appear and only the daily div PayPal button appears. But if I remove the code from the daily div the button will appear under the weekly div.
It seems I can only use button code once?
I tried modifying the code by changing the id name and function names but still no luck.
Is there a way to have multiple PayPal on my page?
Here is the generated code from PayPal:
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=test&currency=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"daily","amount":{"currency_code":"AUD","value":1}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
<br><br><br>
<p> gefwdsa</p>
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"weekly sub","amount":{"currency_code":"AUD","value":5}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
This only makes the first button appear
The SDK script,
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=AUD" data-sdk-integration-source="button-factory"></script>
Should only be loaded exactly once per page, above all the buttons.
Additionally, each button must render to a div with a unique HTML id, so this line:
<div id="paypal-button-container"></div>
And this line:
}).render('#paypal-button-container');
Both need some corresponding different/additional string suffix for each button, e.g. paypal-button-container-1 , -2 for the next buttons' etc.
Also client-id of test or sb is sandbox mode, you need a live client-id from the 'Live' section of an app in https://www.paypal.com/signin?intent=developer&returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications

Customize Embedded Zoom Meeting SDK with Component View in 2.2.0

When working with Embedded Zoom Component, the Zoom SDK return an element which you need to place it inside an html element
the problem is how to resize and position the returned component inside my code after rendering
const client = ZoomMtgEmbedded.createClient();
function getSignature(e) {
e.preventDefault();
// ... some code to get the signature
startMeetingZoomMtgEmbedded(response.signature);
}
function startMeetingZoomMtgEmbedded(signature) {
let meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
}
}
]
}
}
});
client.join({
apiKey: apiKey,
signature: signature,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
success: (success) => {
console.log('success');
},
error: (error) => {
console.log(error);
}
});
}
return (
<div className="App">
<main>
<h1>Zoom Meeting SDK Sample React</h1>
{/* For Component View */}
<div id="meetingSDKElement"></div>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
So my question is how to modify the style and the position of the component before or after the rendering of the code by the Zoom SDK.
For Resizing , You will find details in the following documentation link :
Zoom Documentation for resizing component view
For Positioning, You will find details in the following documentation link :
Zoom Documentation for positioning component view
The only way to resize camera view is editing #ZOOM_WEB_SDK_SELF_VIDEO id. So, you have to edit other classes also to make buttons, containers and etc resize like camera view does, but it is totally buggy and i don't think it is a good idea pay all this effort to a workaround, besides that, in next versions maybe they bring built in properties to do this job.
Just for example, this is the result when you change #ZOOM_WEB_SDK_SELF_VIDEO:
#ZOOM_WEB_SDK_SELF_VIDEO {
width: 720%;
height: 480%;
}
In general way, you can modify the style and position of your component by using reactive CSS styling.
In zoom way you can use (zoom web meeting SDK)
(a) "popper: {}" properties for positioning elements
(b) "viewSizes: {}" properties for default meeting canvas size
(c) for styling use "id" and "class" for reactive CSS styling
popper use:
client.init({
...
customize: {
video: {
popper: {
anchorElement: meetingSDKElement,
placement: 'top'
}
},
}
...
})
viewSizes use:
client.init({
...
customize: {
video: {
viewSizes: {
default: {
width: 1000,
height: 600,
}
}
},
}
...
})

Syncing a paper-input with firebase using polymer

How is this for a solution for syning the data from a paper input to a firebase database.
properties: {
teamid: {
type: String,
value: null
},
formid: {
type: String,
value: null
},
metaName: {
type: String,
value: null,
observer: '_updateMetaName'
}
},
_updateMetaName: function(metaName) {
var path = 'formModel/' + this.teamid + '/' + this.formid + '/meta/name';
firebase.database().ref(path).set(metaName);
},
The data metaName comes from a a paper-input element
<paper-input value="{{metaName}}"></paper-input>
I'm using an observer over the on-change attribute because I hate the idea that a user must move out of an input for it to persist.
I've also chosen not to use PolymerFire because i dosen't have some features I need and its not production ready.
I also don't like the idea that the observer runs multiple times before any data has been changed. And that should, i thought, break it but its working to my surprise.
What other options do I have?
Are their any disadvantages to my current solution?
One disadvantage is that every keystroke fires off a request to Firebase, which could be inefficient (a waste of CPU and bandwidth).
To address this, you could debounce the callback with this.debounce(jobName, callback, wait), as shown in the following demo.
HTMLImports.whenReady(_ => {
"use strict";
Polymer({
is: 'x-foo',
properties : {
metaName: {
type: String,
value: 'Hello world!',
observer: '_metaNameChanged'
}
},
_setFirebaseMetaName: function(metaName) {
var path = 'formModel/' + this.teamid + '/' + this.formid + '/meta/name';
//firebase.database().ref(path).set(metaName);
console.log('metaName', metaName);
},
_metaNameChanged: function(metaName) {
this.debounce('keyDebouncer',
_ => this._setFirebaseMetaName(metaName),
500);
}
});
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-input label="Meta Name" value="{{metaName}}"></paper-input>
</template>
</dom-module>
</body>
codepen
I've decided to go with on-keyup="_updateViewDesc" to stop a error occurring when multiple clients have the same page open. Using observers, when some data updates, it triggers the observer on all the connected clients. Causing characters to go missing.

Froala add custom pre code button

I'm trying to create a code button with the Froala editor which can basicly do the same thing as here on SO by pressing CNTRL+K. Now I think I have two choices.
The first one is to edit the froala-editor.js file, because Froala already has a 'code' button which only adds the <pre> tags. If I could somehow get it to also add the <code> tag, problem solved. Unfortunately I didn't get this to work.
The second option is to create a custom button, so far I have this piece of code:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
It works somehow, but it's buggy and produces strange html like so:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
Any help with getting this done for either option one or two would be greatly appreciated.
If you upgrade to version 1.2.3 that is available on Github your code should work https://github.com/froala/wysiwyg-editor. It's not necessary to save/restore selection.
LATER EDIT:
Here is a jsFiddle for it http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '​') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}

CasperJS captureSelector does not capture selector, captures whole page

I have a dashboard in Google Analytics.
I want to only capture a certain part of the dashboard using CasperJS.
No matter what I've tried it captures the entire page.
What I'm I doing wrong here?
This is the HTML hierarchy that I find when I inspect the Google Analytics dashboard:
<div id="ID-view">
<div class="_GAeH" id="ID-dashboard">
<div id="ID-layout">
<div class="_GARW ">
<div class="_GAoA">
<!-- more <div>s with the content -->
</div>
</div>
</div>
</div>
</div>
CasperJS code snippet:
var casper = require('casper').create();
casper.start('https://www.google.com/analytics/web/the/rest/of/the/url/', function() {
this.fill('form#gaia_loginform', { 'Email': 'user', 'Passwd':'pass' }, true);
});
casper.waitForSelector('.ID-row-4-0-0', function() {
casper.page.paperSize = {
height: '11in',
width: '8.5in',
orientation:'portrait',
border: '0.4in'
};
// NONE of these work the way I think they should
// this.captureSelector('ga.pdf','#ID-view');
// this.captureSelector('ga.pdf','#ID-dashboard');
// this.captureSelector('ga.pdf','#ID-layout');
this.captureSelector('ga.pdf','._GAoA');
// this.captureSelector('ga.pdf','._GARW'); // <-- this one fails, capture height is messed up
},
function() {
this.echo("Timeout reached");
});
casper.run();
Try this:
this.captureSelector('ga.pdf','div._GAoA', {quality: 100});
If you cant take the screenshot of the element _GAoA please share the output of your casperjs scrpit.
Good luck.

Resources