Stripe：从 HTML 到 Checkout-Sessions PHP 的元数据答案

【问题标题】：Stripe: Meta Data from HTML to Checkout-Sessions PHPStripe：从 HTML 到 Checkout-Sessions PHP 的元数据
【发布时间】：2021-04-02 23:24:13
【问题描述】：

我使用 Stripe 的示例 (https://github.com/stripe-samples/checkout-single-subscription/tree/master/server/php) 创建订阅。我不太明白，如何将 index.html 中的元数据通过 script.js 传递到 create-checkout-session.php。

我以为我只是在 index.html 中添加数据属性：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Stripe</title>
    <meta name="description" content="A demo of Stripe Payment Intents" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <script src="https://js.stripe.com/v3/"></script>
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="sr-root">
      <div class="sr-main" style="display: flex;">
        <div class="sr-container">
          <section class="container">
            <button id="basic-plan-btn" data-partner="name" data-package="basic">USD 6.90</button>
          </section>
          <section class="container">
            <button id="pro-plan-btn" data-partner="name" data-package="premium">USD 11.90</button>
          </section>
        </div>
      </div>
    </div>
  </body>
</html>

然后我必须以某种方式在 script.js 中读出它们。但我真的不知道怎么做。

// Create a Checkout Session with the selected plan ID
var createCheckoutSession = function(priceId) {
  return fetch("/fileadmin/restaurant/stripe/create-checkout-session.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      priceId: priceId,
      partner: 'name',
      package: 'premium'
    })
  }).then(function(result) {
    return result.json();
  });
};

// Handle any errors returned from Checkout
var handleResult = function(result) {
  if (result.error) {
    var displayError = document.getElementById("error-message");
    displayError.textContent = result.error.message;
  }
};

/* Get your Stripe publishable key to initialize Stripe.js */
fetch("/fileadmin/restaurant/stripe/config.php")
  .then(function(result) {
    return result.json();
  })
  .then(function(json) {
    var publishableKey = json.publishableKey;
    var basicPriceId = json.basicPrice;
    var proPriceId = json.proPrice;

    var stripe = Stripe(publishableKey);
    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("basic-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(basicPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });

    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("pro-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(proPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });
  });

我在 create-checkout-session.php 中收到它们

<?php
require_once 'shared.php';
$domain_url = $config['domain'];
$checkout_session = \Stripe\Checkout\Session::create([
    'success_url' => $domain_url . 'success.php?session_id={CHECKOUT_SESSION_ID}',
    'cancel_url' => $domain_url . 'canceled.php',
    'payment_method_types' => ['card'],
    'mode' => 'subscription',
    'allow_promotion_codes' => true,
    'line_items' => [[
      'price' => $body->priceId,
      'quantity' => 1,
    ]],
    'subscription_data' => ['trial_period_days' => 60],
    'metadata' => [
        'partner' => $body->partner,
        'package' => $body->package
    ],
]);
echo json_encode(['sessionId' => $checkout_session['id']]);

谢谢。

【问题讨论】：

标签： javascript php stripe-payments

【解决方案1】：

您在fetch 调用的 JSON 正文中添加的内容对我来说是正确的。如果您尝试通过某些输入动态设置 'name' 和 'premium' 值，请查看 this previous answer 了解获取输入值的一些方法。

【讨论】：