Stripe：從 HTML 到 Checkout-Sessions PHP 的元數據

Question

我使用 Stripe 中的示例 ( https://github.com/stripe-samples/checkout-single-subscription/tree/master/server/php ) 創建訂閱。 我不太明白的是，如何通過 script.js 將元數據從我的 index.html 傳遞到 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']]);

謝謝你。

Answer 1

您在fetch調用的 JSON 主體中所做的添加在我看來是正確的。 如果您嘗試根據某些輸入動態設置'name'和'premium'值，請查看之前的答案以獲取一些獲取輸入值的方法。

Stripe：從 HTML 到 Checkout-Sessions PHP 的元數據

問題描述

1 個解決方案

解決方案1
0 2020-12-24 14:33:30

Stripe：從 HTML 到 Checkout-Sessions PHP 的元數據

問題描述

1 個解決方案

解決方案1 0 2020-12-24 14:33:30

解決方案1
0 2020-12-24 14:33:30