Изменение количества товара во встроенных компонентах Stripe ⇐ Php

[Anonymous]

Я успешно реализовал Stripe, используя API встроенных компонентов. Как я правильно понимаю, для максимальной безопасности продукты устанавливаются заранее на сервере-сайте. Это абсолютно разумно для многостраничного процесса оформления заказа.
Однако теперь у меня есть панель управления с уже присутствующими пользовательскими данными, где клиент может выбрать из списка всего два продукта и добавить их в свое бронирование. Кнопка оплаты Stripe расположена прямо под списком. Для всего остального я использовал шаблон из документации Stripe.
checkout.html

Код: Выделить всё

  










Product 1 ($10)


Product 2 ($20)



Email



[h4]Payment[/h4]




Pay now

checkout.js

Код: Выделить всё

const stripe = Stripe("pk_test_***");

let checkout;
let actions;
initialize();
const emailInput = document.getElementById("email");
const emailErrors = document.getElementById("email-errors");

const validateEmail = async (email) => {
const updateResult = await actions.updateEmail(email);
const isValid = updateResult.type !== "error";

return { isValid, message: !isValid ? updateResult.error.message : null };
};

document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);

// Fetches a Checkout Session and captures the client secret
async function initialize() {
const promise = fetch('/create.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
})
.then((r) => r.json())
.then((r) => r.clientSecret);

const appearance = {
theme: 'stripe',
};
checkout = stripe.initCheckout({
clientSecret: promise,
elementsOptions: { appearance },
});

checkout.on('change', (session) => {
// Handle changes to the checkout session
});

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
actions = loadActionsResult.actions;
const session = loadActionsResult.actions.getSession();
document.querySelector("#button-text").textContent = `Pay ${
session.total.total.amount
} now`;
}

emailInput.addEventListener("input", () => {
// Clear any validation errors
emailErrors.textContent = "";
emailInput.classList.remove("error");
});

emailInput.addEventListener("blur", async () =>  {
const newEmail = emailInput.value;
if (!newEmail) {
return;
}

const { isValid, message } = await validateEmail(newEmail);
if (!isValid) {
emailInput.classList.add("error");
emailErrors.textContent = message;
}
});

const paymentElement = checkout.createPaymentElement();
paymentElement.mount("#payment-element");
}

async function handleSubmit(e) {
e.preventDefault();
setLoading(true);

const email = document.getElementById("email").value;
const { isValid, message } = await validateEmail(email);
if (!isValid) {
emailInput.classList.add("error");
emailErrors.textContent = message;
showMessage(message);
setLoading(false);
return;
}

const { error } = await actions.confirm();

showMessage(error.message);

setLoading(false);
}

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

function showMessage(messageText) {
const messageContainer = document.querySelector("#payment-message");

messageContainer.classList.remove("hidden");
messageContainer.textContent = messageText;

setTimeout(function () {
messageContainer.classList.add("hidden");
messageContainer.textContent = "";
}, 4000);
}

create.php

Код: Выделить всё

Как можно изменить количество продуктов Платежного намерения в этой среде?
Заранее большое спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... components