I wrote a simple PHP script to make PayPal popup payment button :
<!-- Load the required checkout.js script -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>
<!-- Load the required Braintree components. -->
<script src="https://js.braintreegateway.com/web/3.87.0/js/client.min.js?"></script>
<script src="https://js.braintreegateway.com/web/3.87.0/js/paypal-checkout.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
<?php
require_once 'vendor/lib/Braintree.php';
$access_token = 'access_token$sandbox$...3';
$gateway = new Braintree\Gateway([
'accessToken' => $access_token,
]);
$clientToken = $gateway->clientToken()->generate();
?>
paypal.Button.render({
braintree: braintree,
client: {
//production: '<?= $clientToken ?>',
sandbox: '<?= $clientToken ?>'
},
env: 'sandbox',
style: {
shape: 'rect',
color: 'blue',
layout: 'horizontal',
label: 'pay',
},
payment: function (data, actions) {
return actions.braintree.create({
flow: 'checkout', // Required
amount: 10.00, // Required
currency: 'USD', // Required
intent: 'sale',
enableShippingAddress: false
});
},
onAuthorize: function (payload) {
$.ajax({
url : 'verify.php',
type : 'POST',
data: {
"payment_method_nonce": payload.nonce
},
success : function (result) {
alert(result);
},
error : function () {
alert(result);
}
});
},
}, '#paypal-button');
</script>
<div id="paypal-button"></div>
All steps (including settle) are working but the problem is that I have some JS errors with code 401 from PayPal server because of Client Id as below :
https://pasteboard.co/PABp8HzbdfhB.png
Failed to load resource: the server responded with a status of 401 ()
I searched in PayPal & Braintree docs but couldn't find how to pass my client id. All manuals are about older versions of SDK!
So what's the solution?
Link a PayPal sandbox account in the Braintree gateway settings, Processing.
Related
I am integrating Smart Payment Buttons in my website, before it works properly, but earlier today, I am getting these errors
I loaded paypal SDK before I even loaded the paypal.Buttons().render() function which is inside my paypal.js file
<script src="https://www.paypal.com/sdk/js?client-id=<MY_CLIENT_ID_HERE>¤cy=PHP"></script>
<script type="text/javascript" src="paypal.js"></script>
this is the content of my paypal.js file
paypal.Buttons({
createOrder : function(data, actions){
return actions.order.create({
purchase_units : [{
amount : {
value : amount_to_pay
}
}],
application_context: {
shipping_preference: "NO_SHIPPING",
},
country_code : "PH"
})
},
style: {
color: 'gold',
shape: 'rect',
label: 'buynow',
size: 'responsive',
branding: true
},
onApprove: function(data, actions) {
// Capture the funds from the transaction
return actions.order.capture().then(function(details) {
return fetch('/pay-with-pp', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID,
product_id : product_id,
_token : token
})
}).then(function(res){
alert('Payment has been made! Please see the delivery status on orders page!');
window.location.href = redirect_url
});
});
},
}).render('#paypal-button-container');
I analyzed the errors carefully and found out the solution.
I added a data-namespace attribute to the script tag that loads the SDK
<script src="https://www.paypal.com/sdk/js?client-id=AaJMejIDjhumOr48XsycjfvQegxAku1dHdrA0DNfkqFSg7bFFkpJTnnwyaLIGUFsPijWx1g51gxp9F-5¤cy=USD" data-namespace="paypal_sdk"></script>
then use the value of data-namespace in my paypal.js file
so instead of
paypal.Buttons().render()
i used
paypal_sdk.Buttons().render()
and it works!
(I got this error in ReactJs)
Make sure you're loading the <script> tags properly - to which I mean, don't delay their loading by adding things like the defer attribute, otherwise paypal.Buttons() is called before the script tags are called, hence the error.
I don't know if 2 years down the line since this question was asked whether my answer will be at all helpful.
Hello I am using Express checkout for my one of project. This is first time i am working with paypal.
I have following code.
var CREATE_PAYMENT_URL = '<?php echo site_url().'/cart/' ?>create-payment';
var EXECUTE_PAYMENT_URL = '<?php echo site_url().'/cart/' ?>execute-payment';
paypal.Button.render({
env: 'sandbox', // sandbox | production
intent:'authorize',
style: {
size: 'medium', // small | medium | large | responsive
shape: 'rect', // pill | rect
tagline: false
},
funding: {
allowed: [paypal.FUNDING.CREDIT]
},
client: {
sandbox: '<?php echo $this->config->item('clientId'); ?>',
},
payment: function (data, actions) {
return paypal.request.post(CREATE_PAYMENT_URL).then(function(data) {
return data.id;
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function (data, actions) {
return paypal.request.post(EXECUTE_PAYMENT_URL, {
paymentID: data.paymentID,
payerID: data.payerID
}).then(function() {
alert('payment completes!');
});
},
}, '#paypal-button-container');
Now i want to pay through server side api call. I searched a lot but not getting proper documents for it. I don't know how to pay through server side api.
Don't know what is wrong with documents. They are never adding proper information for integration.
How I can get the transaction id using checkout.js paypal express checkout.
I have implemented the new paypal express checkout method. I have implemented the below code for this:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
var EXECUTE_PAYMENT_URL = 'http://192.168.4.198:8083/paypalexpress/success_ipn.php';
var xhr = new XMLHttpRequest({mozSystem: true});
paypal.Button.render({
env: 'sandbox', // sandbox | production
client: {
sandbox: 'AYbCnvobq09Ptmsd1TRp3019CMrSTyaAmrHNv6ox0jl86H9OZFmGCPqHqqfPtqpTYTiIuy_e5UGnclMw',
//production: '<insert production client id>'
},
commit: true,
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '10', currency: 'USD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return paypal.request.post(EXECUTE_PAYMENT_URL, {
paymentID: data.paymentID,
payerID: data.payerID
}).then(function() {
return actions.payment.get().then(function(data) {
console.log(data);
});
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</body>
</html>
It's working fine for success payment, but I am having an issue to get Payer information and txt_id after success full payment in my PHP file for update the record in the database.
How I can go with the REST API?
Please assist me if anyone have done this REST API method.
I think you can not get transaction ID using checkout.js. The only way to get transaction ID is by using IPN.
I have implemented the new paypal express checkout. I want to pass my success_ipn.php URL and cancelled.php URL to checkout.js.
I have done lots of google and as well as official doc Paypal DOC.
Below is my file code:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
var EXECUTE_PAYMENT_URL = 'http://example.com/success_ipn.php';
paypal.Button.render({
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'My Sandbox Client ID here.',
//production: '<insert production client id>'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '0.01', currency: 'USD' }
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
return paypal.request.post(EXECUTE_PAYMENT_URL, {
paymentID: data.paymentID,
payerID: data.payerID
}).then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</body>
</html>
It's working fine, but how I can pass my IPN file URL and Cancel URL.
After do some more google on this I can get only below variables not transactions ID etc.:
paymentID: data.paymentID,
payerID: data.payerID
Please help me out this guys.
After the tried too and do google on this I have found the solution.
The paypal has deprecated the Express Checkout - NVP/SOAP after the checckout.js newest version. So, GetExpressCheckoutDetails and DoExpressCheckoutPayment is deprecated as well.
Now, all work will be done on the Rest API.
Below is update code how we can get the Payer information and transaction details in json format. After get the json response we can update our database record as well using aJax.
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<div id="paypal-button-container"></div>
<script>
var EXECUTE_PAYMENT_URL = 'http://example.com/success_checkout.php';
paypal.Button.render({
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: '',
//production: '<insert production client id>'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '10', currency: 'USD' },
custom: 'custom value here'
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(payment) {
//debugger;
console.log(payment);
var txn_id = payment.cart;
var bookID = payment.transactions[0].custom;
var currency = payment.transactions[0].amount["currency"];
var amount = payment.transactions[0].amount["total"];
var payerID = payment.payer.payer_info["payer_id"];
var pstatus = payment.payer.status;
var successUrl = EXECUTE_PAYMENT_URL+'?txn_id='+txn_id+'&bookID='+bookID+'¤cy='+currency+'&amount='+amount+'&payerID='+payerID+'&pstatus='+pstatus;
//console.log(newUrl);
window.location.replace(successUrl);
});
},
onCancel: function(data, actions) {
var cancelUrl = "http://example.com/cancelled.php";
//console.log(newUrl);
window.location.replace(cancelUrl);
}
}, '#paypal-button-container');
</script>
And you will get response in the success_checkout.php like below:
<?php
echo '<pre>' print_r($_REQUEST);
// do your stuff here
header('Location: thanks.php');
?>
Hope this will help to other developers.
I have integerated PayPal Client Side REST to my website. I have used the sample code provided from link below:
https://developer.paypal.com/demo/checkout/#/pattern/client
This code below worked over a month, however today it shows below error
Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment
failed with 400 error
{
"name": "MALFORMED_REQUEST",
"message": "Incoming JSON request does not map to API request",
"information_link": "https://developer.paypal.com/webapps/developer/docs/api/#MALFORMED_REQUEST",
"debug_id": "a26904ff6211a"
}
my code follows:
<div id="paypal-button-container" class="info"></div><script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
// Render the PayPal button
paypal.Button.render({
// Set your environment
env: 'production', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: '<?=SANDBOXPAYPAL?>',
production: '<?=PAYPAL_TOKEN?>'
},
// Set to 'Pay Now'
commit: true,
// Wait for the PayPal button to be clicked
payment: function() {
$('#card').attr('checked',true);
// Make a client-side call to the REST api to create the payment
return paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{
amount: { total: '12.99', currency: 'GBP' }
}
]
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function(data, actions) {
jQuery.ajax({
type: "POST",
url: "ipn.php",
data: data,
success: function(data){
}
});
return actions.payment.execute().then(function() {
document.querySelector('#paypal-button-container').innerText = 'Payment Complete!';
});
}
}, '#paypal-button-container');
</script>
Your code does not quite match the example, but I am also using the client-sdie API from a Laravel Shoping Cart I am building, I use AJAX to push the payment data back to my system this way:
onAuthorize:function(data, actions)
{
console.log("onAuthorize()");
console.log("Dumping DATA");
console.log(data);
console.log("Dumping ACTIONS");
console.log(actions);
return actions.payment.execute().then(function(payment)
{
console.log("payment.execute called");
document.querySelector('#paypal-button-container').innerText = 'Payment Complete!';
console.log("Dumping payment:");
console.log("CART: "+payment['cart']);
console.log(payment);
var values = encodeURIComponent(JSON.stringify(payment));
$.ajaxSetup({headers:{'X-CSRF-TOKEN':'{{ $token }}' } } );
ajaxRequest= $.ajax({ url: "/ajax/payment", type: "post",data:values });
ajaxRequest.done(function(response, textStatus, jqXHR)
{
var result = $.parseJSON(response);
console.log(result);
});
});
},
/ajax/payment is my capture script i'm developing at present but it does record all the data from the purchase.. hope it helps.