同時提交條紋和自定義表單

Question

我有一個表單和細節嵌入它。該表單由AJAX提交。表單的一部分是條形付款表單。當我點擊但提交按鈕時，我希望Stripe查看詳細信息是否正確，但不是提交收費，直到表格的其餘部分已經過檢查並提交。然後可以提交條紋付款。

這裏是我的表單提交代碼（寫我自己，大規模簡化）：

JS：

$(".booking-form").submit(function(e) { 
    e.preventDefault(); 
    // JavaScipt form validation stuff. If all correct, submit form via AJAX 
    var data = $(".form").serialize(); 
    $.post(bookingDetails.ajaxurl, data, function(response) { 
    if (response['data'] == "success") { 
     // Show some stuff to the user that confirms the submission, etc 
    } 
    }); 
}); 

PHP：

function sendData() { 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $to = "email@domain.com"; 
    $subject = "New email"; 
    $message = "New Email contents"; 

    if ((!empty($name)) && (!empty($email))) { // check that fields have data before submitting 
    $mail = mail($to, $subject, $message, $headers); 
    wp_send_json_success("success"); // yes, this site runs on WordPress 
    } 
} 

和條狀的東西（從WP - 但很高興編輯它或其他）

JS：

function stripeResponseHandler(status, response) { 
    if (response.error) { 
    $(".payment-errors").show().html(response.error.message); 
    } else { 
    var form$ = $("#wp-stripe-payment-form"); 
    var token = response['id']; 
    form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />"); 

    var newStripeForm = form$.serialize(); 

    $.ajax({ 
     type : "post", 
     dataType : "json", 
     url : ajaxurl, 
     data : newStripeForm, 
     success: function(response) { 
     $('.wp-stripe-details').prepend(response); 
     } 
    }); 
    } 
} 

$("#wp-stripe-payment-form").submit(function(event) { 
    event.preventDefault(); 
    $(".wp-stripe-notification").hide(); 
    var amount = $('.total-vat').val() * 100; //amount you want to charge 
    Stripe.createToken({ 
     name: $('.wp-stripe-name').val(), 
     number: $('.card-number').val(), 
     cvc: $('.card-cvc').val(), 
     exp_month: $('.card-expiry-month').val(), 
     exp_year: $('.card-expiry-year').val() 
    }, stripeResponseHandler); 
    if (paymentSuccessful) { 
    console.log("the payment was successful"); 
    } 
    return false; // prevent the form from submitting with the default action 
} 

所以我的問題是，我如何整合條紋的東西和我的自定義的東西？

Answer 1

我找到了答案;這裏是我如何將自己的表單信息和Stripe的付款數據結合在一起，並與AJAX同時處理。

的PHP：

\Stripe\Stripe::setApiKey("YOUR_SECRET_KEY"); 

function wp_stripe_charge($amount, $card, $email) { 
    $charge = array(
    'card' => $card, 
    'amount' => $amount, 
    'currency' => 'gbp', 
    'receipt_email' => $email 
); 

    $response = \Stripe\Charge::create($charge); 

    return $response; 
} 

function sendData() { 
    // add any variables which you passed from the form here 
    $total = $_POST['total-vat']; 
    $amount = str_replace('$', '', $total) * 100; 
    $card = $_POST['stripeToken']; 
    try { 
    $payment = wp_stripe_charge($amount, $card, $bEmail); 
    } catch(\Stripe\Error\Card $e) { 
    $payment = false; 
    $errorJSON = $e->getJsonBody(); 
    $error = $errorJSON['error']; 
    } 

    // do a whole load of stuff to submit my own form, including checking if order was successful, etc 

    $return = array(); // add whatever data to this to return to the JavaScript 

    echo json_encode($return); 
} 

中的JavaScript：

$(".booking-form").submit(function(event) { 
    event.preventDefault(); 
    // do any validation checks or other actions here 
    var amount = $('.total-vat').val() * 100, //amount you want to charge 
     name = $('.booking-name').val(); 
    Stripe.createToken({ 
     name: name, 
     number: $('.card-number').val(), 
     cvc: $('.card-cvc').val(), 
     exp_month: $('.card-expiry-month').val(), 
     exp_year: $('.card-expiry-year').val(), 
     address_line1: $(".booking-address-1").val(), 
     address_line2: $(".booking-address-2").val(), 
     address_city: $(".booking-city").val(), 
     address_state: $(".booking-county").val(), 
     address_zip: $(".booking-postcode").val() 
    }, stripeResponseHandler); 
    return false; 
}); 


function stripeResponseHandler(status, response) { 
    if (response.error) { 
    $(".payment-errors").show().html(response.error.message); 
    } else { 
    var token = response['id']; 
    $(".stripe-payment-form").append("<input type='hidden' name='stripeToken' value='" + token + "' />"); 
    formSubmission(); // if form has no errors and Stripe has verified it too, go ahead with making payment 
    } 
} 

function formSubmission() { 
    var data = $(form).serialize(); // plus any other data that may be held in a variable or something here 
    $.post(ajaxUrl, data, function(response) { 
    // add your response messages, actions etc here 
    } 
}); 

條紋具有廣泛的API，並返回各種錯誤代碼或基於當被處理的支付發生了什麼成功的消息。例如：

（這些是PHP變量）

$payment->status == "succeeded"/"failed" 
$payment->id 

$error['code'] == 'card_declined'/'incorrect_cvc'/'expired_card'/'processing_error' 

您可以更在https://stripe.com/docs/api查看。

希望有所幫助。樂於嘗試並幫助回答任何問題！