Giter VIP home page Giter VIP logo

Comments (27)

sivadass avatar sivadass commented on June 19, 2024

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.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

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.

screen shot 2018-03-29 at 10 53 23 pm

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

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.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

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 envprop in the <PaypalExpressBtn/> now.

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

Have you tried first in sandbox mode, with facilitator account provided by Paypal?

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

Sorry am unable to get you.

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

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.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

Hi @daisys77 what to do after refresh button is clicked?

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

Codepen is incomplete @daisys77 , please update it, so that i can check...

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

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.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

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.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

daisys77 avatar daisys77 commented on June 19, 2024

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

from react-shopping-cart.

mcometa avatar mcometa commented on June 19, 2024

Amazing patience here @sivadass. I salute you!

from react-shopping-cart.

sivadass avatar sivadass commented on June 19, 2024

Thank you @mcometa :)

from react-shopping-cart.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.