html smart buttons not working after inserting sandbox client id on <script src=sdk ...
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
html smart buttons not working after inserting sandbox client id on <script src=sdk ...
I set up smart buttons on my site, and tested it out. After realizing I'm not receiving any payments I found the integration guide where I was able to get my
client ID on sandbox. Once I got it I inserted it in my <script src > tag, now not only am I not getting the payment but the buttons are not launching the form now. I need help making these smart buttons work. Can some one please look at my code?
<html>
<head>
<title>Payment</title>
<link rel="stylesheet" media="screen and (min-width: 0px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="medium.css">
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="large.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
</head>
<body>
<div id="responsive-block">
<p style="text-align: center; font-size: 20px;">Put your name here:</p>
<div id="smart-button-container">
<div style="text-align: center"><label for="description"> </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
<p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
<div style="text-align: center"><label for="amount"> </label><input name="amountInput" type="number" id="amount" value="" ><span> USD</span></div>
<p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a price</p>
<div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
<p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
<div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=Af1IlBFvduDHptOzJQMuEdNGwcepCLLUlF6I8w9dhVkZnAZByo5eJ0RRVfge..." data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
var description = document.querySelector('#smart-button-container #description');
var amount = document.querySelector('#smart-button-container #amount');
var descriptionError = document.querySelector('#smart-button-container #descriptionError');
var priceError = document.querySelector('#smart-button-container #priceLabelError');
var invoiceid = document.querySelector('#smart-button-container #invoiceid');
var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');
var elArr = [description, amount];
if (invoiceidDiv.firstChild.innerHTML.length > 1) {
invoiceidDiv.style.display = "block";
}
var purchase_units = [];
purchase_units[0] = {};
purchase_units[0].amount = {};
function validate(event) {
return event.value.length > 0;
}
paypal.Buttons({
style: {
color: 'gold',
shape: 'rect',
label: 'paypal',
layout: 'vertical',
},
onInit: function (data, actions) {
actions.disable();
if(invoiceidDiv.style.display === "block") {
elArr.push(invoiceid);
}
elArr.forEach(function (item) {
item.addEventListener('keyup', function (event) {
var result = elArr.every(validate);
if (result) {
actions.enable();
} else {
actions.disable();
}
});
});
},
onClick: function () {
if (description.value.length < 1) {
descriptionError.style.visibility = "visible";
} else {
descriptionError.style.visibility = "hidden";
}
if (amount.value.length < 1) {
priceError.style.visibility = "visible";
} else {
priceError.style.visibility = "hidden";
}
if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
invoiceidError.style.visibility = "visible";
} else {
invoiceidError.style.visibility = "hidden";
}
purchase_units[0].description = description.value;
purchase_units[0].amount.value = amount.value;
if(invoiceid.value !== '') {
purchase_units[0].invoice_id = invoiceid.value;
}
},
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: purchase_units,
});
},
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>';
// Or go to another URL: actions.redirect('thank_you.html');
});
},
onError: function (err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
</body>
</html>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The "client_id" in your code example doesn't look correct, there are three dots at the end of the id.
client-id=Af1IlBFvduDHptOzJQMuEdNGwcepCLLUlF6I8w9dhVkZnAZByo5eJ0RRVfge...
Check the "client_id" again and copy / paste the correct value into your button code, save the change and test.
Thanks !
Was my post helpful? If so, please give me a kudos!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi, it actually looks like that because that's how it gets formatted when I post the question I made a live app and copied the client id which is this:
AYoikNQng4Q5wQ_lQLlTofrvwY8OHlDOH51vj9pgdwGSw_TFw-lBoK4Pj9VQSvkkj6g-soXlIYXWF6Kx
and it's still not working it's like as soon as I replace the "sb" with the client id the buttons stop working and I made sure that my account has a card and bank confirmed still not getting any payments. I'm getting so tired of it, I need this payment page working Asap.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Checked the "client_id" you shared and this looks valid, but when attempting to use it within some code, the button is closing as soon as it's pressed.
Checked the account associated with the "client_id" and it currently has an active limitation and this is why the button is not working, as the account is unable to receive payments.
Login to your account and resolve the account limitation and once resolved, re-attempt using the button and it should work fine.
https://www.paypal.com/us/smarthelp/article/why-is-my-paypal-account-limited-faq1758
Thanks !
Was my post helpful? If so, please give me a kudos!
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- What is my rate with these numbers? I thought it was 2.9% plus .30 (Sandbox) in Sandbox Environment
- HTTP GET /api/orders results in Status 403 Forbidden in Sandbox Environment
- At the payment checkout I can't display in a frame because it set 'X-Frame-Options' to 'sameorigin in Sandbox Environment
- How can I create a platform in Live like in Sandbox? in Sandbox Environment
- Server returned HTTP response code: 400 in Sandbox Environment