skip to Main Content

I want to develop a PayPal button, and following the API documentation, I have the following code:

import React, {useState}from 'react';
import {useDispatch} from 'react-redux';
import {useHistory} from 'react-router-dom';
import ReactDOM from 'react-dom';

import * as actionsReservations from '../../reservation/actions';
import {Errors} from '..';

const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });

const PayPalReserve = ({deposit, menu, companyId, reservationDate, periodType, diners}) => {

    const dispatch = useDispatch();
    const history = useHistory();                                                                                                                                                                     
    const [backendErrors, setBackendErrors] = useState(null);

    const createOrder = (data,actions) => {
        return actions.order.create({
            purchase_units:[
                {
                    amount:{
                        value: deposit
                    },
                },
            ],
        });
    };

    const onApprove = (data, actions) => {
        return actions.order.capture().then(response => {
            dispatch(actionsReservations.reservation(
                menu.id,
                companyId,
                reservationDate,
                periodType,
                diners,
                response.id,
                () => history.push('/reservation/reservation-completed'),
                errors => setBackendErrors(errors)
            ));
            console.log(response);
        });
      }
};

export default PayPalReserve; 

But is throwing me the following error:

Line 9:22:  'paypal' is not defined  no-undef

But if I import paypal from paypal-checkout with this line:

import paypal from 'paypal-checkout';

React throw me the following error:

"TypeError: paypal_checkout__WEBPACK_IMPORTED_MODULE_4___default.a.Buttons is undefined"

My index.html i have this in head tag:

<script defer src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_CODE"></script>

I dont know why is throwing me these errors when i don’t import paypal-checkout or when I import it. If you knew how to solve it, I would appreciate it

Thanks.

2

Answers


  1. Things will probably become easier for you if you simply use the official react-paypal-js package.

    Here is the storybook .. copying its example:

    import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
    
    <PayPalScriptProvider options={{ "client-id": "test" }}>
       <PayPalButtons
           style={{ layout: "horizontal" }}
           createOrder={(data, actions) => {
               return actions.order.create({
                   purchase_units: [
                       {
                           amount: {
                               value: "2.00",
                           },
                       },
                   ],
               });
           }}
       />;
    </PayPalScriptProvider>
    
    Login or Signup to reply.
  2. That’s an eslint err, just add window at the beginning as PayPal is a global variable injected into the window obj

    console.log(window.paypal)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search