Stripe支付元素加載緩慢-有解無憂

我有一個結帳頁面，主要包含新的Stripe 付款元素和一個 PayPal 付款按鈕（來自標準結帳集成）。按鈕加載速度足夠快，但支付元素的信用卡表單在通過 XAMPP 本地加載時需要 5 秒以上，我想如果 Google Pay 和 Apple Pay 按鈕以測驗模式呈現，這同樣適用于它們。我希望開發環境中的這種速度在快速連接的生產環境中至少需要 2-3 秒，這仍然很慢。

假設這種加載速度對于 Stripe Payment Element 來說是正常的，我可以使用什么策略來使其加載更快？

無論如何，我想至少通過添加一個在表單加載之前顯示的微調器/預加載器來加快感知加載速度，這也可以最大限度地減少表單加載時當前發生的不和諧的內容跳轉（老實說，我很驚訝 Stripe 一開始就對這個 UX 很好）。我如何將這樣的微調器集成到 Stripe 的客戶端代碼中？

這是checkout.js中的客戶端代碼，僅略微改編自 Stripe 的快速入門指南：

const stripe = Stripe(<PK_TEST_KEY>);

const fonts = [
    {
        cssSrc:
            "https://fonts.googleapis.com/css2?family=Open Sans:wght@300;400;500;600;700&display=swap",
    },
];

const appearance = {
    theme: "stripe",
    labels: "floating",
    variables: {
        colorPrimary: "#000",
        colorPrimaryText: "#fff",
        colorText: "#fff",
        fontFamily: "Open Sans, Segoe UI, sans-serif",
        borderRadius: "4px",
        fontSizeBase: "1em",
        fontSizeXs: "0.7em",
        fontWeightNormal: "400",
        fontWeightMedium: "400",
        fontWeightLight: "400",
    },
};
   
let elements;

initialize();
checkStatus();

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

// Fetches a payment intent and captures the client secret
async function initialize() {
    const { clientSecret } = await fetch("/payment/stripe", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value,
        },
    }).then((r) => r.json());

    elements = stripe.elements({ fonts, appearance, clientSecret });

    const paymentElement = elements.create("payment");
    paymentElement.mount("#payment-element");
}

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

    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            // Make sure to change this to your payment completion page
            return_url: "http://localhost/success",
        },
    });

    // This point will only be reached if there is an immediate error when
    // confirming the payment. Otherwise, your customer will be redirected to
    // your `return_url`. For some payment methods like iDEAL, your customer will
    // be redirected to an intermediate site first to authorize the payment, then
    // redirected to the `return_url`.
    if (error.type === "card_error" || error.type === "validation_error") {
        showMessage(error.message);
    } else {
        showMessage("An unexpected error occured.");
    }

    setLoading(false);
}

// Fetches the payment intent status after payment submission
async function checkStatus() {
    const clientSecret = new URLSearchParams(window.location.search).get(
        "payment_intent_client_secret"
    );

    if (!clientSecret) {
        return;
    }

    const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

    switch (paymentIntent.status) {
        case "succeeded":
            showMessage("Payment succeeded!");
            break;
        case "processing":
            showMessage("Your payment is processing.");
            break;
        case "requires_payment_method":
            showMessage("Your payment was not successful, please try again.");
            break;
        default:
            showMessage("Something went wrong.");
            break;
    }
}

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

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

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

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

// Show a spinner on payment submission
function setLoading(isLoading) {
    if (isLoading) {
        // Disable the button and show a spinner
        document.querySelector("#submit").disabled = true;
        document.querySelector("#spinner").classList.remove("hidden");
        document.querySelector("#button-text").classList.add("hidden");
    } else {
        document.querySelector("#submit").disabled = false;
        document.querySelector("#spinner").classList.add("hidden");
        document.querySelector("#button-text").classList.remove("hidden");
    }
}

uj5u.com熱心網友回復：

實作加載微調器的主要方法是在initialize()函式開始時開始設定影片，然后監聽 PaymentElement 的“就緒”事件以了解何時隱藏它。

Stripe 的示例代碼有一個提交按鈕的微調器，但不幸的是，它在應用于其他 DOM 元素時并不能真正起作用，因此您必須滾動自己的微調器，而不是直接重新使用它。但這就是想法！

https://stripe.com/docs/js/element/events/on_ready

async function initialize() {
  loaderOn(); // start showing a spinner and maybe apply `hidden` to the payment-element div
  const response = await fetch("/create-payment-intent", {
  ...
  ...

  const paymentElement = elements.create("payment");
  paymentElement.on("ready", function(){
    loaderOff(); // hide the spinner and maybe remove `hidden` from the payment-element div
  })
  paymentElement.mount("#payment-element");

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436658.html

標籤：javascript php 阿贾克斯拉拉维尔条纹支付

上一篇：如何將選定表行中的ID傳遞給獲取資料的AJAX函式

下一篇：是什么導致在Laravel8中無法在路由檔案中使用中間件方法？