I have trouble with this Paypal smart buttons. Even it it looks simple as I imagine :) can't get it to work.
I have three items, side by side in separate divs and want to add paypal smart buttons under each item but only different price.
When I put this paypal code under first, it is working like a charm.
<div id="paypal-button-container"></div>
<!-- <script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR" data-sdk-integration-source="button-factory"></script> -->
<script src="https://www.paypal.com/sdk/js?client-id=ARcbGj17hMo1yw4nEMDB5E-Y7W00gbie9F_zb0m--XCOjKWo4jIddFV9N5UzbluK-if61HLUVs0rQ7zC¤cy=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'pay',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '13.88'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
window.open('www.google.ba');
});
}
}).render('#paypal-button-container');
</script>
But when I put same code with changed money value it only shows that second one, and also when I put under third item it shows only that one.
I tried to render.('#custompaypalbutton') - to change class of button div where it shows up but nothing changed.
Am I missing something?
Do I maybe need different paypal app (REST Api) for every button that will generate new ID?
<script src="https://www.paypal.com/sdk/js... must only be loaded once per page
Each button should .render('...') to its own container element
Related
I have an accordion with some items. Now I want to show a paypal pay button in each accordion item. I am using the paypal JS SDK. So for it is working just for the first open accordion item. There the paypal button is shown, I can click on it and paypal modal is opening to login and pay.
I have created a file where I have added the "paypal-button-container" and included a PHP file with the paypal JS script:
<?php
include_once ('method/paypal_accordion.php');
?>
<div id="paypal-button-container"></div>
In the included file 'method/paypal_accordion.php' I have the paypal script with the variables for the payment:
<script>
// Loop over each funding source/payment method
var FUNDING_SOURCES = [
paypal.FUNDING.PAYPAL
];
FUNDING_SOURCES.forEach(function(fundingSource) {
// Initialize the buttons
var button = paypal.Buttons({
fundingSource: fundingSource,
createOrder: function (data, actions) {
return actions.order.create({
application_context: {
brand_name: 'my-page.com',
locale: 'en_gb',
shipping_preference: 'SET_PROVIDED_ADDRESS',
},
intent: 'CAPTURE',
payer: {
email_address: '<?php echo $email; ?>',
...
onApprove: function (data, actions) {
return actions.order.capture().then(function (orderData) {
...
});
},
How can the paypal button be shown on every opened accordion item?
Currently I just see the paypal div there, but no button:
<div id="paypal-button-container"></div>
Should I reload the DOM or is there an event in the accordion to do that?
Or should I use a button with a form or some AJAX?
Each div where you want to render a PayPal button must have a unique id
Each time you invoke paypal.Buttons({...}) and call .render('#some-id-goes-here'), the selector to render in should be one of those ids.
I created Smart paypal button and got this code
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '13.88'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
I am wondering, is there function to open specific url after successful payment to add in onApprove function after alert? Will it work like that?
Will window.open() work in this case?
You want to use location.assign. The syntax:
location.assign(url);
You could use "location.replace()".
You can additionally get the order id from the details object and use that as a get parameter in the redirect url. This allows you to verify the transaction on the next page, preventing the user from just directly calling the "success" url.
I have the following tokenisation credit card application, and I wish to print the output from google developer tools onto the UI.
Below is a copy of of my index.html
You enter the credit card details, exp date and cvv numbers onto the UI. You then hit submit.
The card is tokenised and produces a json message of the token.
<html>
<body>
<form onsubmit="return false;">
<div id="securepay-ui-container"></div>
<button onclick="mySecurePayUI.tokenise();">Submit</button>
<button onclick="mySecurePayUI.reset();">Reset</button>
</form>
<script id="securepay-ui-js" src="https://payments-stest.npe.auspost.zone/v3/ui/client/securepay-ui.min.js"></script>
<script type="text/javascript">
var mySecurePayUI = new securePayUI.init({
containerId: 'securepay-ui-container',
scriptId: 'securepay-ui-js',
clientId: 'xxx',
merchantCode: '5AR0055',
card: {
allowedCardTypes: ['visa', 'mastercard'],
showCardIcons: false,
onCardTypeChange: function(cardType) {
// card type has changed
},
onBINChange: function(cardBIN) {
// card BIN has changed
},
onFormValidityChange: function(valid) {
// form validity has changed
},
onTokeniseSuccess: function(tokenisedCard) {
console.log(tokenisedCard)
// card was successfully tokenised or saved card was successfully retrieved
},
onTokeniseError: function(errors) {
// tokenization failed
}
},
style: {
backgroundColor: 'rgba(135, 206, 250, 0.1)',
label: {
font: {
family: 'Arial, Helvetica, sans-serif',
size: '1.1rem',
color: 'darkblue'
}
},
input: {
font: {
family: 'Arial, Helvetica, sans-serif',
size: '1.1rem',
color: 'darkblue'
}
}
},
onLoadComplete: function () {
// the UI Component has successfully loaded and is ready to be interacted with
},
onTokeniseSuccess: function(tokenisedCard)
{
}
});
</script>
</body>
</html>
Upon submitting my tokenised card, the following output is rendered in Google Developer Tools.
{"merchantCode":"5AR0055",
"token":"1421556973257552",
"scheme":"visa",
"bin":"444433",
"last4":"111",
"expiryMonth":"12",
"expiryYear":"24",
"createdAt":"2020-07-01T21:49:36.895+10:00"}
How do I print this output onto my UI (refer to my attachment, output.png)
You need to set your tokenisedCard variable value within some HTML element innerHTML property, and since you want to print JSON you would probably go for a pre tag.
Below the card form, add this elementary HTML:
<pre id="tokenInfoPlaceholder"></pre>
Then in your onTokeniseSuccess method, replace (or feel free to keep it up) console.log(tokenisedCard) with:
document.querySelector('#tokenInfoPlaceholder').innerHTML = JSON.stringify(tokenisedCard, null, 2);
The stringify JSON method takes a third parameter to insert white spaces to improve readability.
When a user presses the enter key on my site the PayPal Express modal pops up. I need to prevent this happening.
I am using client-side PayPal Express (checkout.js).
I have tried $("#paypal-button").blur()
What I need is a way to prevent the box popping up, by setting a JavaScript variable (some way to validate).
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: 35, currency: 'USD' }, description: name + " " + email, custom: 'New York'
}
]
},
You can add the blur method to the button in onCancel and onAuthorize processing like so;
onCancel: function(data, actions) {
$("#paypal-button").blur()
},
onAuthorize: function(data, actions) {
$("#paypal-button").blur();
return actions.payment.execute().then(function(payment) {
});
}
This should remove focus from the button after the modal is closed
I am working with paypal and I need to render multiple paypal express checkout buttons in my table.
I followed a solution I found in this link
and here's what I did.
document.querySelectorAll('.btn-paypal').forEach(function(){
var dis = $(this);
var amount = dis.data('amount');
paypal.Button.render({
env: 'sandbox',
style: {
label: 'checkout',
size: 'medium', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | black
},
client: {
sandbox: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-w6Q9rX2BdH1',
production: '<insert production client id>'
},
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: amount, currency: 'JPY' }
}
]
}
});
},
commit: true,
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(paymentDetails) {
console.log(paymentDetails)
swal({
title: "Confirm Payment!",
text: "Confirm the amount of ¥"+paymentDetails.transactions[0].amount.total,
type: "info",
confirmButtonClass: "btn btn-danger",
confirmButtonText: "Yes! Continue Payment",
showCancelButton: true,
cancelButtonText: "No! Cancel Transaction"
},
function(){
$('.ajax-loading').show();
return actions.payment.execute().then(function(){
alert('Payment Success');
})
});
});
},
onError: function(err) {
$('.ajax-loading').hide();
swal('Ooops!','Paypal failed to load. Please click the paypal button again!','error');
console.log(err);
}
}, dis);
})
when I try to run this code I get no button displayed in the table and an error appears in the console saying, Uncaught Error: Document is ready and element [object Object] does not exist
What is my error here? Please help.
Thanks!
I have a single Paypal button, but had the same error. The HTML example states
<div id="paypal-button"></div>
Braintree manual
while the script is in a separate file. It seems that the div element is not yet rendered while the script is loading.
I simply moved the script inside the div element and now the button appears. Make sure the script does not load elsewhere prior this point.
If you are using a js framework like Vue for example, just load it first in the mounted hook and it should work.