Stripe: Meta Data from HTML to Checkout-Sessions PHP

Question

I use the samples ( https://github.com/stripe-samples/checkout-single-subscription/tree/master/server/php ) from Stripe to create a subscription. What I don't really understand, how can I pass metadata from my index.html over script.js to the create-checkout-session.php.

I thought I just add data attributes to the 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>

then I have to read them somehow out in the script.js. But that I don't really figure out how.

// 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);
        });
      });
  });

by that I receive them in the 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']]);

Thank You.

Answer 1

What you've done adding to the JSON body of the fetch call looks right to me. If you're trying to set the 'name' and 'premium' values dynamically from some input, then take a look at this previous answer for some approaches for getting input values.

Stripe: Meta Data from HTML to Checkout-Sessions PHP

Question

1 answers

solution1
0 2020-12-24 14:33:30

Stripe: Meta Data from HTML to Checkout-Sessions PHP

Question

1 answers

solution1 0 2020-12-24 14:33:30

solution1
0 2020-12-24 14:33:30