Open rjmead23 opened 2 years ago
up please, same error
Has anyone else experienced this issue and found a solution for it? @Maaattqc - Were you able to figure out the problem with this?
@rjmead23 i still dont know :/
@rjmead23 i still dont know :/
Has anyone else experienced this issue and found a solution for it? @Maaattqc - Were you able to figure out the problem with this?
I fixed the billing part by disabling billing in the products of chec. There is a toggle option when you edit your product items on their website to require billing address. I now am only having the issue of my customer {} object being empty.
I could fix the issue. I'm sure there are better solutions but I'm a react.js beginner so that's as good as I can do it.
I'm setting the values of the input fields like we did for the dropdowns. Check it out here: https://github.com/kwyjibo089/ecommerce/blob/master/src/components/CheckoutForm/CustomTextField.jsx
This also means I had to update the AddressForm: https://github.com/kwyjibo089/ecommerce/blob/master/src/components/CheckoutForm/AddressForm.jsx
I'm using useState to save firstname, lastname etc
@rjmead23 did you find any fix for it
fixing this issue, you must disable/toggle off the REQUIRE BILLING ADDRESS on all of your products in your commercejs account because you don't the fields for billing address you only have fields for names and shipping address
I'm about 3/4 of the way through the video and really enjoying it so far. I'm struggling with the ShippingData part. For some reason it doesn't look like the FormInput fields are being set in shippingData request payload to api.chec - As you can see its an empty object below
{,…} customer: {} fulfillment: {shipping_method: "ship_p6dP5gbmYon7kA"} line_items: [{id: "item_7RyWOwmK5nEa2V", product_id: "prod_Kvg9l61n0d51bB", name: "Robin Hood",…},…] payment: {gateway: "stripe", stripe: {payment_method_id: "pm_1KhaFELTXNlEjoivg8TNLkUu"}} shipping: {name: "Primary", county_state: "IA", country: "US"}
{"status_code":422,"error":{"message":"The given data was invalid.","type":"unprocessable_entity","errors":{"customer.email":["The Email field is required when customer.id is not present."],"shipping.street":["The Shipping street address field is required when customer.id is not present."],"shipping.town_city":["The Shipping town\/city field is required when customer.id is not present."]}},
Only the fields that have a set like SetShippingCountries are being passed to the ShippingData.. The other values that come from the onSubmit are not being populated - The fields shown below do not pass into customer or shipping.
`
Here's my AddressForm.jsx `import React, { useState, useEffect } from 'react'; import { InputLabel, Select, MenuItem, Button, Grid, Typography, } from '@material-ui/core';
import { useForm, FormProvider } from 'react-hook-form'; import { Link } from 'react-router-dom';
import { commerce } from '../../lib/commerce'; import FormInput from './CustomTextField';
const AddressForm = ({ checkoutToken, test }) => { const [shippingCountries, setShippingCountries] = useState([]); const [shippingCountry, setShippingCountry] = useState(''); const [shippingSubdivisions, setShippingSubdivisions] = useState([]); const [shippingSubdivision, setShippingSubdivision] = useState(''); const [shippingOptions, setShippingOptions] = useState([]); const [shippingOption, setShippingOption] = useState(''); const methods = useForm();
const countries = Object.entries(shippingCountries).map(([code, name]) => ({ id: code, label: name, }));
const subdivisions = Object.entries(shippingSubdivisions).map( ([code, name]) => ({ id: code, label: name, }) );
const options = shippingOptions.map((so) => ({ id: so.id, label:
${so.description} - (${so.price.formatted_with_symbol})
, }));const fetchShippingCountries = async (checkoutTokenId) => { const { countries } = await commerce.services.localeListShippingCountries( checkoutTokenId );
};
const fetchSubdivisions = async (countryCode) => { const { subdivisions } = await commerce.services.localeListSubdivisions( countryCode );
};
const fetchShippingOptions = async ( checkoutTokenId, country, // region = null stateProvince ) => { const options = await commerce.checkout.getShippingOptions( checkoutTokenId, { country, stateProvince } );
};
useEffect(() => { fetchShippingCountries(checkoutToken.id); }, []);
useEffect(() => { if (shippingCountry) fetchSubdivisions(shippingCountry); }, [shippingCountry]);
useEffect(() => { if (shippingSubdivision) fetchShippingOptions( checkoutToken.id, shippingCountry, shippingSubdivision ); }, [shippingSubdivision]);
return ( <>
); };
export default AddressForm; ` Here's my PaymentForm.jsx
`import React from 'react'; import { Typography, Button, Divider } from '@material-ui/core'; import { Elements, CardElement, ElementsConsumer, } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js';
import Review from './Review';
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY);
const PaymentForm = ({ checkoutToken, backStep, nextStep, shippingData, onCaptureCheckout, }) => { const handleSubmit = async (event, elements, stripe) => { event.preventDefault();
};
return ( <>
); };
export default PaymentForm; `
Here's my app.js
`import React, { useState, useEffect } from 'react'; import { commerce } from './lib/commerce'; import { Products, Navbar, Cart, Checkout, PageNotFound } from './components'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
const App = () => { const [products, setProducts] = useState([]); const [cart, setCart] = useState({}); const [order, setOrder] = useState({}); const [errorMessage, setErrorMessage] = useState('');
const fetchProducts = async () => { const { data } = await commerce.products.list(); setProducts(data); };
const fetchCart = async () => { setCart(await commerce.cart.retrieve()); };
const handleAddToCart = async (productId, quantity) => { const item = await commerce.cart.add(productId, quantity);
};
const handleUpdateCartQty = async (productId, quantity) => { const { cart } = await commerce.cart.update(productId, { quantity });
};
const handleRemoveFromCart = async (productId) => { const { cart } = await commerce.cart.remove(productId);
};
const handleEmptyCart = async () => { const { cart } = await commerce.cart.empty();
};
const refreshCart = async () => { const newCart = await commerce.cart.refresh();
};
const handleCaptureCheckout = async (checkoutTokenId, newOrder) => { try { console.log(
HandleCaptureCheckout Function entered
); const incomingOrder = await commerce.checkout.capture( checkoutTokenId, newOrder ); setOrder(incomingOrder); console.log(This is neworder ${newOrder}
); console.log(This is incomingOrder ${incomingOrder}
);};
useEffect(() => { fetchProducts(); fetchCart(); }, []);
//console.log(products); // console.log(cart);
return (
); };
export default App; `
Here's my App.js
import React, { useState, useEffect } from 'react'; import { InputLabel, Select, MenuItem, Button, Grid, Typography, } from '@material-ui/core';
import { useForm, FormProvider } from 'react-hook-form'; import { Link } from 'react-router-dom';
import { commerce } from '../../lib/commerce'; import FormInput from './CustomTextField';
const AddressForm = ({ checkoutToken, test }) => { const [shippingCountries, setShippingCountries] = useState([]); const [shippingCountry, setShippingCountry] = useState(''); const [shippingSubdivisions, setShippingSubdivisions] = useState([]); const [shippingSubdivision, setShippingSubdivision] = useState(''); const [shippingOptions, setShippingOptions] = useState([]); const [shippingOption, setShippingOption] = useState(''); const methods = useForm();
const countries = Object.entries(shippingCountries).map(([code, name]) => ({ id: code, label: name, }));
const subdivisions = Object.entries(shippingSubdivisions).map( ([code, name]) => ({ id: code, label: name, }) );
const options = shippingOptions.map((so) => ({ id: so.id, label:
${so.description} - (${so.price.formatted_with_symbol})
, }));const fetchShippingCountries = async (checkoutTokenId) => { const { countries } = await commerce.services.localeListShippingCountries( checkoutTokenId );
};
const fetchSubdivisions = async (countryCode) => { const { subdivisions } = await commerce.services.localeListSubdivisions( countryCode );
};
const fetchShippingOptions = async ( checkoutTokenId, country, // region = null stateProvince ) => { const options = await commerce.checkout.getShippingOptions( checkoutTokenId, { country, stateProvince } );
};
useEffect(() => { fetchShippingCountries(checkoutToken.id); }, []);
useEffect(() => { if (shippingCountry) fetchSubdivisions(shippingCountry); }, [shippingCountry]);
useEffect(() => { if (shippingSubdivision) fetchShippingOptions( checkoutToken.id, shippingCountry, shippingSubdivision ); }, [shippingSubdivision]);
return ( <>
); };
export default AddressForm;