While setting up, PayPal client code to test server integration, from https://developer.paypal.com/docs/archive/checkout/how-to/server-integration/
My code is as follows:
<html>
<head>
<title>TEST PAYMENT</title>
</head>
<body>
<div id="paypal-button"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
env: 'sandbox', // Or 'production'
// Set up the payment:
// 1. Add a payment callback
payment: function(data, actions) {
// 2. Make a request to your server
return actions.request.post('/api/paypal/create-payment')
.then(function(res) {
console.log(res);
// 3. Return res.id from the response
return res.id;
});
},
// Execute the payment:
// 1. Add an onAuthorize callback
onAuthorize: function(data, actions) {
// 2. Make a request to your server
return actions.request.post('/api/paypal/execute-payment', {
paymentID: data.paymentID,
payerID: data.payerID
})
.then(function(res) {
// 3. Show the buyer a confirmation message.
});
}
}, '#paypal-button');
</script>
</body>
</html>
When I open the page.
When I click the button, a modal window shows up for a second and closed with the following errors.
The checkout.js integration you're attempting to use is deprecated.
Here is the current JS SDK to call your server with: https://developer.paypal.com/demo/checkout/#/pattern/server
Related
I've adapated the client-side example from Paypal's docs and my code works fine if I add it directly to a page, but I want to create a reusable component, and when I try to do that and import the component, it just doesn't render. When I try to inspect the element in Chrome's dev tools, all I get is <div class></div>. Here is the code:
---
const clientId = import.meta.env.PAYPAL_CLIENT_ID;
---
<!-- Replace "test" with your own sandbox Business account app client ID -->
<script is:inline src={`https://www.paypal.com/sdk/js?client-id=${clientId}¤cy=USD`}></script>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<script is:inline>
paypal.Buttons({
// Sets up the transaction when a payment button is clicked
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [{
amount: {
value: '77.44' // Can also reference a variable or function
}
}]
});
},
// Finalize the transaction after payer approval
onApprove: (data, actions) => {
return actions.order.capture().then(function(orderData) {
// Successful capture! For dev/demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
const transaction = orderData.purchase_units[0].payments.captures[0];
alert(`Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all available details`);
// When ready to go live, remove the alert and show a success message within this page. For example:
// const element = document.getElementById('paypal-button-container');
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
}
}).render('#paypal-button-container');
</script>
I am trying to redirect customers to an error page for my website if their card cannot be processed. It not working and all I can get is the standard PayPal alert that says "Things don't appear to be working at the moment."
What confuses me especially is that I have a redirect page for purchase approval that IS working correctly in the onApprove function (seen below).
PayPal JavaScript SDK says this is the code to redirect customers to a customer URL:
paypal.Buttons({
onError: function (err) {
// For example, redirect to a specific error page
window.location.href = "/your-error-page-here";
}
}).render('#paypal-button-container');
This is what my onError function looks like:
onError: function (err) {
//My Redirect Page
window.location.href = "https://www.fitnessbydylan.com/error-page.html";
}
This is my full Javascript for my PayPal button.
<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":"1 MONTH DIGITAL COACHING","amount":{"currency_code":"USD","value":0.06,"breakdown":{"item_total":{"currency_code":"USD","value":0.06},"shipping":{"currency_code":"USD","value":0},"tax_total":{"currency_code":"USD","value":0.00}}}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Simulate a mouse click:
window.location.href = "http://www.fitnessbydylan.com/purchase-page.html";
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function (err) {
// My Redirect Page
window.location.href = "https://www.fitnessbydylan.com/error-page.html";
},
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
onError is only triggered when there is a technical problem with loading or using the buttons, which is a very rare situation. It is not triggered for card processing problems.
I want to accept payment in Multiple currencies & also autofill the Address/Name in PayPal form using Express Checkout method
I have tried going through various posts, paypal getting started, paypal community, but not able to find if it possible.
Currently, using Express Checkout I'm able to receive payment on changing the get parameter of the script.
<script src="https://www.paypal.com/sdk/js?client-id=valueOfClientID¤cy=GBP"> </script>
Is is possible to pass the currency & name/address details in below code?
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '24'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name);
// Call your server to save the transaction
return fetch('/paypal-transaction-complete', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
});
});
}
}).render('#paypal-button-container');
</script>
Based on the currency dynamically inject the script to the page and pass the address object as mentioned in the link
I am working with braintree paypal checkout function, i found jquery code for that, i need to place Braintree Sandbox Auth Key in jquery variable, i created account in braintree, i tried all that code, but in jquery console log it says authrization failed, can anyone please help me where can i find that code ?
Here is my sameple code
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script src="https://js.braintreegateway.com/web/3.11.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.11.0/js/paypal-checkout.min.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
var BRAINTREE_SANDBOX_AUTH = '38mqtdwp4nth5tbk';
// Render the PayPal button
paypal.Button.render({
// Pass in the Braintree SDK
braintree: braintree,
// Pass in your Braintree authorization key
client: {
sandbox: BRAINTREE_SANDBOX_AUTH,
production: '<insert production auth key>'
},
// Set your environment
env: 'sandbox', // sandbox | production
// Wait for the PayPal button to be clicked
payment: function(data, actions) {
// Make a call to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '1', currency: 'USD' }
}
]
}
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function(data, actions) {
// Call your server with data.nonce to finalize the payment
console.log('Braintree nonce:', data.nonce);
// Get the payment and buyer details
return actions.payment.get().then(function(payment) {
console.log('Payment details:', payment);
});
}
}, '#paypal-button-container');
</script>
</body>
I need to place code in this variable var BRAINTREE_SANDBOX_AUTH = '38mqtdwp4nth5tbk'; can anyone help me to resolve this issue ?
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support#braintreepayments.com.
It looks like you are setting your BRAINTREE_SANDBOX_AUTH variable to a Merchant ID, rather than a Client Token. In order to initiate the Braintree checkout, you will need to generate, then pass in a client_token.
You generate the client_token on your server, then pass it into your client-side call: braintree.client.create().
If successful, braintree.client.create() will return a client instance that you can use to create a PayPal checkout component with braintree.paypalCheckout.create().
Within the paypalCheckout component, you can configure your PayPal button using paypal.Button.render().
What is "/checkout" in the below line ?. Actually it referring localpath.
Can you please suggest me the appropriate action URL ?
Also, Can you suggest me where do I give the IPN URL / Syntax ?
<form id="myContainer" method="post" action="/checkout"></form>
<script>
window.paypalCheckoutReady = function () {
paypal.checkout.setup('<Your-Merchant-ID>', {
environment: 'sandbox',
container: 'myContainer'
});
};
</script>
[paypal Integration] https://developer.paypal.com/docs/classic/express-checkout/in-context/integration/
Thanks,
Raja K
This describes it:
A basic Express Checkout integration assumes that you are sending the
API calls from your own server using a <form> or <a>.
Essentially, your existing call to SetExpressCheckout (that would obtain a Paypal token) that you use to redirect (in the "standard" Paypal Express Checkout flow).
The linked sample should hopefully clear things up - you'll see the form action (and a link) POST (GET for the a) to some server implementation (the ip address in the sample) of SetExpressCheckout.
Hth..
I can help you with single page PayPal pay now button actually I use this one of my projects
<script src="https://www.paypal.com/sdk/js?client-id=XXXXXXXXXXXXXXXXX">
</script>
<div id="paypal-button-container"> </div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '1230'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed');
// Call your server to save the transaction
return fetch('codes/paypalapi.php?invo=123', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID,
amount: data.amount
})
});
});
}
}).render('#paypal-button-container');
</script>
change codes/paypalapi.php?invo=123 with your callback url