Gatsby Stripe Checkout - multiple quantities - reactjs

Question

I'm following this Gatsby guide - https://www.gatsbyjs.org/tutorial/ecommerce-tutorial/
I would like to modify this code to allow the user to change the number of items they can purchase.
Following this React guide - https://reactjs.org/docs/forms.html - I am adding an <input> field to allow a quantity to be chosen.
I then want to pass the value to here - items: [{ sku: "XXXXXXXX", quantity: 1 }]
The error I get is TypeError: _this.handleInputChange is undefined on the line this.handleInputChange = this.handleInputChange.bind(this);
Any pointers would be great, thanks.
import React from "react"
const Checkout = class extends React.Component {
constructor(props) {
super(props);
this.state = {
numberOfItems: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
componentDidMount() {
this.stripe = window.Stripe("XXXXXXX")
}
async redirectToCheckout(event) {
event.preventDefault()
const { error } = await this.stripe.redirectToCheckout({
items: [{ sku: "XXXXXXXX", quantity: 1 }],
successUrl: `http://localhost:8000/thank-you`,
cancelUrl: `http://localhost:8000/`,
})
if (error) {
console.warn("Error:", error)
}
}
render() {
return (
<div>
<label>
Number to buy
<input
name="numberOfItems"
type="number"
value={this.state.numberOfItems}
onChange={this.handleInputChange} />
</label>
<button
onClick={event => this.redirectToCheckout(event)}
>
Buy Now
</button>
</div>
)
}
}
export default Checkout
Update: I went with a different solution in the end:
import React from "react"
const Checkout = class extends React.Component {
state = { count: 1 }
handleIncrement = () => {
this.setState({ count: this.state.count + 1 })
}
handleDecrement = () => {
if(this.state.count > 1){
this.setState({ count: this.state.count - 1 })
}
}
componentDidMount() {
this.stripe = window.Stripe("")
}
async redirectToCheckout(event) {
event.preventDefault()
const { error } = await this.stripe.redirectToCheckout({
items: [{ sku: "", quantity: this.state.count }],
successUrl: `http://localhost:8000/thank-you`,
cancelUrl: `http://localhost:8000/`,
})
if (error) {
console.warn("Error:", error)
}
}
render() {
return (
<div>
<button onClick={this.handleIncrement}>+</button>
<div>
{this.state.count}
</div>
<button onClick={this.handleDecrement}>-</button>
<button
onClick={event => this.redirectToCheckout(event)}
>
Buy
</button>
</div>
)
}
}
export default Checkout

Answer 1

There is no such function handleInputChange in your class.
I believe you forgot to implement it in your class, for example:
import React from 'react';
const Checkout = class extends React.Component {
constructor(props) {
super(props);
this.state = {
numberOfItems: 2,
inputValue
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(e) {
this.setState({ inputValue: e.target.value });
}
render() {
return (
<div>
<label>
Number to buy
<input
value={this.state.inputValue}
onChange={this.handleInputChange}
/>
</label>
</div>
);
}