同时提交 Stripe 和自定义表单

Question

我有一个嵌入其中的表格和详细信息。表单由 AJAX 提交。表格的一部分是 Stripe 付款表格。当我单击但提交按钮时，我希望 Stripe 检查详细信息是否正确，但不提交费用，直到检查并提交了表单的其余部分。然后就可以提交 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
  } 
}

还有 Stripe 的东西（来自 wp-stripe 插件，但很乐意编辑它或其他）

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
}

所以我的问题是，我如何整合 Stripe 的东西和我的自定义的东西？

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

Stripe 具有广泛的 API，并且会根据处理付款时发生的情况返回各种错误代码或成功消息。例如：

（这些是 PHP 变量）

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

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

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

希望对您有所帮助。很高兴尝试并帮助回答任何问题！