Comments (27)
You can replace Proceed to checkout button with Paypal Button
Sharing the code from Paypal Demo below:
<!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>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
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: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
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) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
</body>
from react-shopping-cart.
from react-shopping-cart.
from react-shopping-cart.
Sorry I was busy yesterday.
I have created a new brach here for paypal-checkout.
Just switch to paypal-checkout checkout branch by git checkout paypal-checkout
in terminal.
And then update the branch by git pull origin paypal-checkout
. You will have the paypal checkout button like the one below.
from react-shopping-cart.
from react-shopping-cart.
Head over to Paypal and create an App and it will give you the client ID for Sandbox and Production modes. Just enter the id's in Headers.js
and change the env mode to 'Production' in like below:
<PaypalExpressBtn
className={this.state.cart.length > 0 ? "" : "disabled"}
client={client}
currency={"INR"}
total={this.props.total}
env="production"
/>
That's it!
from react-shopping-cart.
from react-shopping-cart.
from react-shopping-cart.
In the Header.js file, search for <PaypalExpressBtn>
and then add new line after total={this.props.total} in the line number 222.
env="production"
If you don't pass the env
prop, it will be by default set to 'sandbox' mode.
That's why there is no env
prop in the <PaypalExpressBtn/>
now.
from react-shopping-cart.
from react-shopping-cart.
Have you tried first in sandbox mode, with facilitator account provided by Paypal?
from react-shopping-cart.
from react-shopping-cart.
Sorry am unable to get you.
from react-shopping-cart.
from react-shopping-cart.
Can you share me the code via jsFIddle, Code Pen or Sandbox.io, so that i can view the issue lively?
from react-shopping-cart.
from react-shopping-cart.
Hi @daisys77 what to do after refresh button is clicked?
from react-shopping-cart.
from react-shopping-cart.
Codepen is incomplete @daisys77 , please update it, so that i can check...
from react-shopping-cart.
And am closing this issue, as it goes beyond the feature request. Am happy to help you via email, which is available in my profile. Send me the updated codepen link to my personal email.
Don't mistake me, thanks!
from react-shopping-cart.
from react-shopping-cart.
You can use sendgrid to send emails, but i haven't tried it. Am really not aware of it.
Keep doing and break things, reach me if you feel i can help you. Am happy to help anytime!
Thanks trying my this project :) Good luck :)
from react-shopping-cart.
from react-shopping-cart.
from react-shopping-cart.
from react-shopping-cart.
Amazing patience here @sivadass. I salute you!
from react-shopping-cart.
Thank you @mcometa :)
from react-shopping-cart.
Related Issues (20)
- Why bind class methods HOT 4
- Demo not working? HOT 1
- Unable to run shopping cart in localhost HOT 7
- Avoid error: toLowerCase() doesn't exist for undefined and/or similar errors
- missing script: start HOT 1
- Support local storage ? HOT 2
- Can we use react-redux for State Management? HOT 1
- Upload images
- bug need fix HOT 2
- Blank page on IE 11 HOT 2
- CSRF question
- Products not loading while trying to run the project locally HOT 1
- typo error while adding product in quick view
- sum error in shopping cart
- Image upload
- Mathematical Error while adding and Subtracting the product.
- Installation fails HOT 1
- Couldn't install node modul HOT 1
- post a license for this software HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-shopping-cart.