通过带条支付意向自定义支付流传递额外的客户详细信息

Question

我正在尝试按照本教程集成Stripe的自定义支付流：https://stripe.com/docs/payments/integration-builder

// A reference to Stripe.js initialized with your real test publishable API key.
var stripe = Stripe("pk_test..");



 var formData = {
            'email': document.getElementById("email").value,
            'cardholder-name': document.getElementById("cardholder-name").value,
            'user_id': document.getElementById("user_id").value
        };

// Disable the button until we have Stripe set up on the page
document.querySelector("button").disabled = true;
fetch("create.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(formData),

})
  .then(function(result) {
    return result.json();
  })
  .then(function(data) {
    var elements = stripe.elements();

    var style = {
      base: {
        color: "#32325d",
        fontFamily: 'Arial, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#32325d"
        }
      },
      invalid: {
        fontFamily: 'Arial, sans-serif',
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };

    var card = elements.create("card", { style: style });
    // Stripe injects an iframe into the DOM
    card.mount("#card-element");

    card.on("change", function (event) {
      // Disable the Pay button if there are no card details in the Element
      document.querySelector("button").disabled = event.empty;
      document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
    });

    var form = document.getElementById("payment-form");
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      // Complete payment when the submit button is clicked
      payWithCard(stripe, card, data.clientSecret);
    });
  });

// Calls stripe.confirmCardPayment
// If the card requires authentication Stripe shows a pop-up modal to
// prompt the user to enter authentication details without leaving your page.
var payWithCard = function(stripe, card, clientSecret) {
  loading(true);
  stripe
    .confirmCardPayment(clientSecret, {
      payment_method: {
        card: card
      }
    })
    .then(function(result) {
      if (result.error) {
        // Show error to your customer
        showError(result.error.message);
      } else {
        // The payment succeeded!
        orderComplete(result.paymentIntent.id);
      }
    });
};

/* ------- UI helpers ------- */

// Shows a success message when the payment is complete
var orderComplete = function(paymentIntentId) {
  loading(false);
  document
    .querySelector(".result-message a")
    .setAttribute(
      "href",
      "https://dashboard.stripe.com/test/payments/" + paymentIntentId
    );
  document.querySelector(".result-message").classList.remove("hidden");
  document.querySelector("button").disabled = true;
};

// Show the customer the error from Stripe if their card fails to charge
var showError = function(errorMsgText) {
  loading(false);
  var errorMsg = document.querySelector("#card-error");
  errorMsg.textContent = errorMsgText;
  setTimeout(function() {
    errorMsg.textContent = "";
  }, 4000);
};

// Show a spinner on payment submission
var loading = function(isLoading) {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("button").disabled = true;
    document.querySelector("#spinner").classList.remove("hidden");
    document.querySelector("#button-text").classList.add("hidden");
  } else {
    document.querySelector("button").disabled = false;
    document.querySelector("#spinner").classList.add("hidden");
    document.querySelector("#button-text").classList.remove("hidden");
  }
};

<form id="payment-form">
           
    <input type="hidden" id="user_id"  value="<? echo $user_id; ?>">
  <div class="form-group">
                       
                      </div>
  <label>
      
    <input id="cardholder-name" class="field is-empty" placeholder="Cardholder Name" style="height: 50px;" />
  </label>
  <label>
    <input class="field is-empty" type="email" name="email" id="email" placeholder="Your Email" style="height: 50px;" />
    
  </label>
    <label>
      <div id="card-element" class="field form-control"><!--Stripe.js injects the Card Element--></div><br><br>
      </label>
      <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Submit Payment</span>
      </button>
      <p id="card-error" role="alert"></p>
      <p class="result-message hidden">
        Payment succeeded, see the result in your
        <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.
      </p>
    </form>

require 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('sk_test_...');  
header('Content-Type: application/json');

try {
  // retrieve JSON from POST body
  $json_str = file_get_contents('php://input');
  $json_obj = json_decode($json_str);

  $email = $json_obj['email'];
  
$paymentIntent = \Stripe\PaymentIntent::create([
    'amount' => 1000,
    'currency' => 'gbp',
    'description' => $user_id,
    "receipt_email" => $email,
   "payment_method_options" => [
    "card" =>   [  "installments"  => null,
                "network" => null,
                 "request_three_d_secure" => "automatic" ]
  ],
  "payment_method_types" => ["card"] ]);

  $output = [
    'clientSecret' => $paymentIntent->client_secret,
  ];
            
  echo json_encode($output);
} catch (Error $e) {
  http_response_code(500);
  echo json_encode(['error' => $e->getMessage()]);
}

电子邮件和user_id仍然没有被传递，并且在Stripe Dashboard上返回为空。但是，正如我所说的，付款是成功的。但是，我需要将它链接到一个user_id，电子邮件。来使用它。请帮帮忙。提前道谢。

Answer 1

在您共享的片段中，$user_id和$email没有在任何地方定义，只在参数中提供。

假设您已经确认有效负载按照预期从客户端到达服务器，您是否打算设置以下内容：

$user_id = $json['user_id'];
$email = $json['email'];