Блог

Я хочу создать пользовательскую форму (для имени, электронной почты, адреса и т.д.) С помощью stripe, но я не знаю, как получить данные формы, которые можно использовать в моем файле php. Несколько лет назад можно было легко отправлять все с помощью метода post,но сейчас я не могу понять, как можно настроить данную форму.

Код JS:

 fetch("../create.php", {
 method: "POST",
 headers: {
"Content-Type": "application/json"
},
 body: JSON.stringify(purchase)
 })
.then(function(result) {
  return result.json();
 })
.then(function(data) {
  var elements = stripe.elements();

var card = elements.create("card", { style: style });
card.mount("#card-element");

card.on("change", function (event) {
  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();
    const name = form.querySelector('#name');
  payWithCard(stripe, card, data.clientSecret);
 });
});
 

PHP:

 <?php

require 'vendor/autoload.php';

StripeStripe::setApiKey('sk_test:my_api_key');

function calculateOrderAmount(array $items): int {
   return 1400;
}

header('Content-Type: application/json');

try {
  $json_str = file_get_contents('php://input');
  $json_obj = json_decode($json_str);

  $paymentIntent = StripePaymentIntent::create([
  'amount' => calculateOrderAmount($json_obj->items),
  'currency' => 'usd',
  ]);

  $output = [
  'clientSecret' => $paymentIntent->client_secret,
  ];

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

HTML:

  <form id="payment-form">
  <div id="card-element"><!--Stripe.js injects the Card Element--></div>
  <button id="submit">
    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text">Pay now</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>
 

С асинхронными потоками платежей вам необходимо обрабатывать больше клиентских потоков платежей, чтобы поддерживать такие функции, как SCA и 3D Secure. Обычно это означает отправку информации на ваш сервер с помощью асинхронных вызовов JavaScript, а не с помощью HTML-формы.

Вы упомянули поля формы, такие как имя, адрес электронной почты и т.д. в вашем вопросе, но код, которым вы поделились, не содержит ничего подобного, поэтому трудно дать ответ, специфичный для вашей ситуации. Вместо этого я могу дать некоторые основные рекомендации…

Если у вас на странице есть HTML-элемент, подобный этому:

 <input id="email" type="email">
 

Вы можете получить значение этого ввода, используя JavaScript, как это:

 var email = document.querySelector('#email').value;
 

Затем вы можете отправить его на свой сервер асинхронно, используя такой код:

 fetch("server.php", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        email: email
    })
}).then(/*...*/);
 

Затем server.php вы можете сделать что-то подобное, чтобы получить значение электронной почты:

 <?php
$rawBody = @file_get_contents('php://input');
$body = json_decode($body, true);
$email = $body['email'];
 

Вы, конечно, должны добавить обработку ошибок, проверку ввода на стороне сервера и т. Д., Но это основные строительные блоки.