Question

我有一个表格和细节嵌入其中。表格由AJAX提交。表单的一部分是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查看更多内容。

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

同时提交条带和自定义表单

1 个答案: