通过Ajax填充结帐表单时，不显示Razorpay结帐按钮

Question

我正在尝试通过Ajax将razorpay结帐表格附加到身体上。在这种情况下，不会显示“结帐”按钮。

我可以在页面上创建razorpay结帐按钮，但无法通过Ajax实现

<form class="card" action="payment" method="post" id="contactForm">
       <div class="col s12">


       <div class="input-field col s12">
        <i class="material-icons prefix">account_circle</i>
        <input id="name" type="text" name="name" class="validate" required>
        <label for="icon_prefix">Name</label>
      </div>

      <div class="input-field col s12">
        <i class="material-icons prefix">email</i>
        <input id="email" type="email" name="email" class="validate" required>
        <label for="icon_prefix" data-error="Please provide a valid email address, or we wont be able to reply.">* Email</label>
      </div>

       <div class="input-field col s12">
        <i class="material-icons prefix">phone</i>
        <input id="phone" type="text" name="phone" class="validate" required>
        <label for="icon_prefix" >* Phone number</label>
      </div>

      <div class="input-field col s12">
        <i class="material-icons prefix">Plan</i>
        <input  type="text" name="price" value="<?php echo $f3->get('price'); ?>" readonly>
        <input type="hidden" name="plan_id" value="<?php echo $f3->get('plan_id'); ?>">
        <label for="icon_prefix">*Price</label>
      </div>

      <div class="input-field col s12">
        <i class="material-icons prefix">add_location</i>
        <input   name="address"  type="text" class="validate" required>

        <label for="icon_prefix">*Address</label>
      </div>

       <input type="hidden" name="razor_order_id" value="<?php echo $f3->get('order_id'); ?>">


      <input type="submit" name="submit" value="Proceed to checkout" class="blue lighten-2 btn right">

    </div>

    </form>

当我按照Ajax代码工作提交表单时

<script>

  $(document).ready(function()
  {
        $(document).on('submit','#contactForm',function(e)
        {

          e.preventDefault();

          $.ajax({

          url:'submit-purchase',
          type:'POST',
          data:$('#contactForm').serialize(),
          success:function(data)
          {


          $('body').append(data);


         },
         error:function()
         {

             alert("Error");
         }


          });
          });


  });

</script>

ajax目标是

$f3->route('POST /submit-purchase',
                function($f3) {

                    echo "<form action='https://www.example.com/payment/success/' method='POST'>
                        <script id='fast_form'
                            src='https://checkout.razorpay.com/v1/checkout.js'
                            data-key='key id'
                            data-amount='5555555'
                            data-currency='INR'
                            data-order_id='".$_POST['razor_order_id']."'
                            data-buttontext='Pay with Razorpay'
                            data-name='Telma'
                            data-description='A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami'
                            data-image='https://example.com/your_logo.jpg'
                            data-prefill.name='Gaurav Kumar'
                            data-prefill.email='gaurav.kumar@example.com'
                            data-theme.color='#F37254'></script>

                        <input type='hidden' custom='Hidden Element' name='hidden'>
                        </form>";




                    }
            );

我正在使用fatfree框架。

当ajax工作时，结帐表单会附加到正文中。可以看到它正在发生，但是表单没有结帐按钮