So I've been trying to create a payment method wherein the user selects the desired payment method using radio buttons. Unfortunately, the button is somehow misplaced.
Here is my code:
<FormContainer>
<CheckoutSteps step1 step2 step3></CheckoutSteps>
<h1>Payment Method</h1>
<Form onSubmit={submitHandler}>
<Form.Group>
<Form.Label as='legend'>Select Method</Form.Label>
</Form.Group>
<Col>
<Form.Check
type='radio'
label='PayPal or Credit Card'
id='PayPal'
name='paymentMethod'
value='PayPal'
onChange={(e) => setPaymentMethod(e.target.value)}
></Form.Check>
<Form.Check
type='radio'
label='Stripe'
id='Stripe'
name='paymentMethod'
value='Stripe'
onChange={(e) => setPaymentMethod(e.target.value)}
></Form.Check>
</Col>
<br></br>
<Button type='submit' variant='primary'>
Continue
</Button>
</Form>
</FormContainer>
</>
The button appears on the rightmost side. Using react-bootstrap 2.5
