I want to customize stripe form in my project in react - reactjs

Question

I want to create a payment form using stripe in react js and backend is in spring boot i am using formik to get form data and yup for form validation as i am new to react i need help in customizing stripe form
Right now i am doing something like this
<Formik
enableReinitialize={true}
initialValues={RecurringPaymentSchema}
validationSchema={RecurringPaymentValidationSchema}
onSubmit={({ setSubmitting, resetForm, setErrors }) => {
this.handleSubmit(resetForm, setErrors);
setSubmitting(false);
//resetForm();
}}
>
<Form>
<div className="py-2">
<div className="custom-control custom-radio">
<Field
className="custom-control-input"
name="monthly-plan"
type="radio"
value="monthly-subscription"
/>
<label className="custom-control-label" for="monthly-plan">
<strong>Monthly $9.99</strong>
<br />
<small className="text-muted">
Pay $9.99 every month and get access to all premium features.
</small>
</label>
</div>
<div className="custom-control custom-radio mt-3">
<Field
checked=""
className="custom-control-input"
name="annually-plan"
type="radio"
value="annual-subscription"
/>
<label className="custom-control-label" for="annually-plan">
<strong>Yearly $49.99</strong>
<span className="badge badge-primary ml-1">60% OFF</span>
<br />
<small className="text-muted">
Pay $49.99 every year and get access to all premium features.
</small>
</label>
</div>
</div>
<input id="api-key" type="hidden" value="${stripePublicKey}" />
<div className="form-group">
<label className="font-weight-medium" for="card-element">
Enter credit or debit card below
</label>
<div className="w-100">
{/* A Stripe Element will be inserted here. */}
<Elements stripe={stripePromise}>
<CardElement
id="card-element"
options={CARD_ELEMENT_OPTIONS}
onChange={this.handleError}
/>
</Elements>
</div>
</div>
<div className="form-group">
<Field
className="form-control"
id="email"
name="email"
placeholder="Email Address"
type="email"
/>
<p className="errors">
<ErrorMessage name="email" />
</p>
</div>
{/* Used to display Element errors. */}
<div
className="text-danger w-100"
id="card-errors"
role="alert"
></div>
<div className="form-group pt-2">
<button
className="btn btn-primary btn-block"
id="submitButton"
type="submit"
>
Pay With Your Card
</button>
</div>
</Form>
</Formik>
Now i want validation of stripe as well as my radio buttons or other form elements using yup
my schemas are
import * as Yup from 'yup';
export const RecurringPaymentSchema = {
monthlyPlan: '',
annuallyPlan: '',
email: '',
};
export const RecurringPaymentValidationSchema = Yup.object().shape({
email: Yup.string().required("Email can't be blank"),
});