我想在我的项目中自定义条纹形式作为反应

如何解决我想在我的项目中自定义条纹形式作为反应

我想在react js中使用stripe创建一个支付表单，后端在spring boot中我正在使用formik来获取表单数据和表单验证是的，因为我是react的新手我需要帮助定制stripe表单 现在我正在做这样的事情

                     <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>

现在我想使用 yup 验证条带以及我的单选按钮或其他表单元素 我的架构是

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"),});