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
Things will probably become easier for you if you simply use the official
react-paypal-js
package.Here is the storybook .. copying its example:
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)