sivadass / react-shopping-cart

Easily integrate React Shopping Cart into your existing website without using Redux.

Home Page:https://sivadass.github.io/react-shopping-cart/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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

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 envprop 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!