src/components/CheckoutComponent.js
// Custom component to wrap the PayPalButtons and handle currency changes
Custom component to wrap the PayPalButtons and handle currency changes
Custom component to wrap the PayPalButtons and handle currency changes
function Checkout(props) {
  const [paid, setPaid] = useState(false)
  let history = useHistory();
  const amount = props.subtotal;
  const currency = "USD";
  const style = { "layout": "vertical" };
  const { dispatchEvent, productsInCart } = useContext(AppContext);
  const PaymentSuccessful = () => {
    if (paid) {
    return (
      <Container>
        <Row>
          <p>Thank you for ordering. Your item will be roasted, packaged, and shipped within 5 business days.</p>
        </Row>
        <Row>
          {}
          <Col>
            <p>Want to make another order?</p>
          </Col>
          <Col>
            <Button
              color='warning'
              onClick={() => handleRenavigate()}
            >Browse our offerings</Button>
          </Col>
        </Row>
      </Container>
    )
    }else return null;
  }
  const handleRenavigate = () => {
    history.push('/products')
  }
  const ButtonWrapper = ({ currency, showSpinner }) => {
    const [{ options, isPending }, dispatch] = usePayPalScriptReducer();
    useEffect(() => {
      dispatch({
        type: "resetOptions",
        value: {
          ...options,
          currency: currency,
        },
      });
    }, [currency, showSpinner]);
    const onApprove = (data, actions) => {
      return actions.order.capture().then((details) => {
        const paymentData = {
          payerID: data.payerID,
          orderID: data.orderID
        }
        console.log('Payment successful: ', paymentData)
        setPaid(true)
      });
    }
    const createOrder = (data, actions) => {
      return actions.order
        .create({
          purchase_units: [
            {
              description: +'itemDynamicallyDefinedDoIConcatThemHere??',
              amount: {
                currency_code: currency,
                value: amount,
              },
            },
          ],
        })
        .then((orderId) => {
          return orderId;
        });
    }
    return (<>
      {(showSpinner && isPending) && <div className="spinner" />}
      {!paid ?
        <PayPalButtons
          style={style}
          disabled={false}
          forceReRender={[amount, currency, style]}
          createOrder={(data, actions) => createOrder(data, actions)}
          onApprove={(data, actions) => onApprove(data, actions)}
        />
        : null}
    </>
    );
  }
  return (
    <PayPalScriptProvider
      options={{
        "client-id": process.env.REACT_APP_PAYPAL_CLIENT_ID,
        components: "buttons",
        currency: "USD"
      }}
    >
      <ButtonWrapper
        currency={currency}
        showSpinner={false}
      />
      <PaymentSuccessful />
    </PayPalScriptProvider>
  );
}
function Checkout ( props ) { const [ paid , setPaid ] = useState ( false ) let history = useHistory ( ) ; const amount = props . subtotal ; const currency = "USD" ; const style = { "layout" : "vertical" } ; const { dispatchEvent , productsInCart } = useContext ( AppContext ) ; const PaymentSuccessful = ( ) => { if ( paid ) { return ( < Container > < Row > < p > Thank you for ordering. Your item will be roasted, packaged, and shipped within 5 business days. < / p > < / Row > < Row > { } < Col > < p > Want to make another order? < / p > < / Col > < Col > < Button color = 'warning' onClick = { ( ) => handleRenavigate ( ) } > Browse our offerings < / Button > < / Col > < / Row > < / Container > ) } else return null ; } const handleRenavigate = ( ) => { history . push ( '/products' ) } const ButtonWrapper = ( { currency , showSpinner } ) => { const [ { options , isPending } , dispatch ] = usePayPalScriptReducer ( ) ; useEffect ( ( ) => { dispatch ( { type : "resetOptions" , value : { ... options , currency : currency , } , } ) ; } , [ currency , showSpinner ] ) ; const onApprove = ( data , actions ) => { return actions . order . capture ( ) . then ( ( details ) => { const paymentData = { payerID : data . payerID , orderID : data . orderID } console . log ( 'Payment successful: ' , paymentData ) setPaid ( true ) } ) ; } const createOrder = ( data , actions ) => { return actions . order . create ( { purchase_units : [ { description : + 'itemDynamicallyDefinedDoIConcatThemHere??' , amount : { currency_code : currency , value : amount , } , } , ] , } ) . then ( ( orderId ) => { return orderId ; } ) ; } return ( < > { ( showSpinner && isPending ) && < div className = "spinner" / > } { ! paid ? < PayPalButtons style = { style } disabled = { false } forceReRender = { [ amount , currency , style ] } createOrder = { ( data , actions ) => createOrder ( data , actions ) } onApprove = { ( data , actions ) => onApprove ( data , actions ) } / > : null } < / > ) ; } return ( < PayPalScriptProvider options = { { "client-id" : process . env . REACT_APP_PAYPAL_CLIENT_ID , components : "buttons" , currency : "USD" } } > < ButtonWrapper currency = { currency } showSpinner = { false } / > < PaymentSuccessful / > < / PayPalScriptProvider > ) ; }
Custom component to wrap the PayPalButtons and handle currency changes
Custom component to wrap the PayPalButtons and handle currency changes
// need to add an address thing too, submits to email and firebase // dispatchEvent('RESET_CART', []) //this is causing an error :( 'Maximum update depth exceeded.' /* reset page */ // i had this outside of checkout b4, not 100% sure itll work now // add venmo options // usePayPalScriptReducer can be use only inside children of PayPalScriptProviders // This is the main reason to wrap the PayPalButtons in a new component // alert('Transaction completed by ' + details.payer.name.given_name); // {<PaymentSuccessful />} // idk what this is // Your code here after create the order // fundingSource={undefined} // onError= https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#onerror // <div style={{ maxWidth: "750px", minHeight: "200px" }}> // </div>