add paypal method
daisys77 opened this issue · comments
hi how do you add working paypal transaction to your code
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>
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.
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!
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.
Have you tried first in sandbox mode, with facilitator account provided by Paypal?
Sorry am unable to get you.
Can you share me the code via jsFIddle, Code Pen or Sandbox.io, so that i can view the issue lively?
Hi @daisys77 what to do after refresh button is clicked?
Codepen is incomplete @daisys77 , please update it, so that i can check...
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!
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 :)
Amazing patience here @sivadass. I salute you!
Thank you @mcometa :)