如何将Stripe Payment集成到WordPress自定义模板中？

Question

我创建了一个包含表单的自定义模板。我正在尝试通过数据条进行付款，并且已按照WordPress文档使用了ajax并正确实施。 下面是代码，我如何实现

这是我的template.php

<form id="purchaseForm" method="post">
   <i class="form-icon fa fa-location-arrow"></i>
   <h2 class="wow fadeInUp mt10">Let's Grow Together</h2>

    <div id="error-message"></div>

    <div class="form-fields">
        <div class="form-group">
       <label>First Name</label>
       <input type="text" name="fname" id="fname" value="" class="form-control">
    </div>
    <div class="form-group">
       <label>Last Name</label>
       <input type="text" name="lname" id="lname" value="" class="form-control">
    </div>
    <div class="form-group">
       <label>Zipcode</label>
       <input type="number" name="zipcode" id="zipcode" value="" class="form-control">
    </div>
    <div class="form-group">
       <label>Email Id</label>
       <input type="email" name="email" id="email" value="" class="form-control">
    </div>
    <div class="form-group">
       <label>Phone</label>
       <input type="number" name="phone" id="phone" value="" class="form-control">
    </div>
    <div class="form-group">
       <label>Card Number</label>
       <input type="number" name="card-number" id="card-number" value="" class="form-control">
    </div>
    <div class="form-group">
        <select name="month" id="month" class="form-control">
            <option value="01">01</option>
            <option value="02">02</option>
        </select>
    </div>
    <div class="form-group">
        <label>Expiry Year</label>
        <input type="number" name="year" id="year" value="" class="form-control">
    </div>
    <div class="form-group">
       <label>CVC</label>
       <input type="number" name="cvc" id="cvc" value="" class="form-control">
    </div>
<!-- wordpress ajax form hook -->
    <input type="hidden" name="action" value="purchase_workbook">
  </div>

   <div class="form-submit">
      <button type="button" name="pay_now" id="submit-btn" class="btn download-button" onClick="stripePay(event);" >Send and Get an Access</button>
   </div>
</form>

这是我的脚本在同一文件中，即template.php

<script type="text/javascript">

/*STRIPE JS*/
function cardValidation () {
    var valid = true;
    var fname = jQuery('#lname').val();
    var lname = jQuery('#fname').val();
    var zipcode = jQuery('#zipcode').val();
    var phone = jQuery('#phone').val();
    var email = jQuery('#email').val();
    var cardNumber = jQuery('#card-number').val();
    var month = jQuery('#month').val();
    var year = jQuery('#year').val();
    var cvc = jQuery('#cvc').val();

    jQuery("#error-message").html("").hide();

    if (fname.trim() == "") {
        valid = false;
    }
    if (email.trim() == "") {
        valid = false;
    }
    if (cardNumber.trim() == "") {
        valid = false;
    }
    if (month.trim() == "") {
        valid = false;
    }
    if (year.trim() == "") {
        valid = false;
    }
    if (cvc.trim() == "") {
        valid = false;
    }

    if(valid == false) {
        jQuery("#error-message").html("All Fields are required").show();
    }

    return valid;
}

Stripe.setPublishableKey('MY_PUBLIC_KEY');

function stripeResponseHandler(status, response) {
    if (response.error) {
        //enable the submit button
        jQuery("#submit-btn").show();
        jQuery( "#loader" ).css("display", "none");
        //display the errors on the form
        jQuery("#error-message").html(response.error.message).show();
    } else {
        //get token id
        var token = response['id'];
        //insert the token into the form
        jQuery("#purchaseForm").append("<input type='hidden' name='stripeToken' value='" + token + "' />");

        $form = jQuery('#purchaseForm');

        jQuery.ajax({
            type: 'POST',
            url: "<?php echo admin_url('admin-ajax.php'); ?>",
            data: $form.serialize(),
            success: function(data){
              alert('success');
              jQuery( "#loader" ).css("display", "none");
              console.log(data);
            }
        });

    }
}
function stripePay(e) {
    e.preventDefault();
    var valid = cardValidation();

    if(valid == true) {
        // jQuery("#submit-btn").hide();
        jQuery( "#loader" ).css("display", "inline-block");
        Stripe.createToken({
            number: jQuery('#card-number').val(),
            cvc: jQuery('#cvc').val(),
            exp_month: jQuery('#month').val(),
            exp_year: jQuery('#year').val()
        }, stripeResponseHandler);

        //submit from callback
        return false;
    }
}

</script>

这是我在function.php中的功能

function purchase_workbook_submit() {

    include_once( $_SERVER['DOCUMENT_ROOT'].'/wp-config.php' );
    include_once( get_template_directory_uri().'/libs/stripe/Stripe.php' );
    global $wpdb;
    $publishable_key    = "PUBLIC_KEY";
    $secret_key     = "SECRET_KEY";

    if(isset($_POST['stripeToken'])){

        Stripe::setApiKey($secret_key);
        $description    = "Invoice #".rand(99999,999999999);
        $amount         = 100;
        $tokenid        = $_POST['stripeToken'];

        $charge = Stripe_Charge::create([ 
                "amount"        => $amount,
                "currency"      => "usd",
                "source"        => $tokenid,
                "description"   => $description
            ]);

        exit(json_encode( $charge ));   
    }

    exit(json_encode('Server error!'));
}


add_action( 'wp_ajax_purchase_workbook', 'purchase_workbook_submit' );
add_action( 'wp_ajax_nopriv_purchase_workbook', 'purchase_workbook_submit' );

ajax调用给出以下消息作为响应， The site is experiencing technical difficulties.

有人可以帮助我解决此问题吗？预先感谢。