使用Braintree集成PayPal Vault时，因验证错误导致弹窗闪退

我正按照Braintree官方文档实现PayPal Vault功能，智能按钮已正常加载，但点击按钮后弹窗短暂出现随即消失，抛出来自GraphQL API的验证错误，涉及click_initiate_payment_reject和graphql_GetCheckoutDetails_error接口。

错误信息 #

{
    "err": "VALIDATION_ERROR",
    "timestamp": "1724693655645",
    "referer": "www.paypal.com",
    "sdkCorrelationID": "f395631bb6ff4",
    "sessionID": "uid_3241e173e4_mtc6mju6mzc",
    "clientID": "the_client_id",
    "env": "production",
    "sdkVersion": "5.0.456",
    "buttonSessionID": "uid_d28c9cfc45_mtc6mjy62ty",
    "buttonCorrelationID": "f673894a76983",
    "clientMetadataId": "uid_3241e173e4_mtc6mju6mzc",
    "token": "BA-0JW4754512875071C"
}

实现代码 #

"use client";

import { useEffect, useState } from "react";

declare global {
    interface Window {
        paypal: any;
        braintree: any;
    }
}

const PayPalButton = () => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const loadPayPalScript = () => {
            return new Promise((resolve, reject) => {
                if (window.paypal) {
                    resolve(window.paypal);
                    return;
                }

                const paypalScript = document.createElement("script");
                paypalScript.src = `https://www.paypal.com/sdk/js?client-id=${process.env.PAYPAL_CLIENT_ID}&vault=true`;
                paypalScript.async = true;

                paypalScript.onload = () => resolve(window.paypal);
                paypalScript.onerror = () => reject(new Error("PayPal SDK could not be loaded."));

                document.body.appendChild(paypalScript);
            });
        };

        const loadBraintreeScripts = () => {
            return new Promise((resolve, reject) => {
                if (window.braintree) {
                    resolve(window.braintree);
                    return;
                }

                const braintreeScript = document.createElement("script");
                braintreeScript.src = "https://js.braintreegateway.com/web/3.103.0/js/client.min.js";
                braintreeScript.async = true;

                braintreeScript.onload = () => {
                    const paypalCheckoutScript = document.createElement("script");
                    paypalCheckoutScript.src = "https://js.braintreegateway.com/web/3.103.0/js/paypal-checkout.min.js";
                    paypalCheckoutScript.async = true;

                    paypalCheckoutScript.onload = () => resolve(window.braintree);
                    paypalCheckoutScript.onerror = () => reject(new Error("Braintree PayPal Checkout script could not be loaded."));

                    document.body.appendChild(paypalCheckoutScript);
                };
                braintreeScript.onerror = () => reject(new Error("Braintree script could not be loaded."));

                document.body.appendChild(braintreeScript);
            });
        };

        const initializeBraintree = async () => {
            try {
                await loadPayPalScript();
                await loadBraintreeScripts();

                const { braintree, paypal } = window;

                braintree.client.create({
                    authorization: process.env.BRAINTREE_AUTH_TOKEN
                }).then((clientInstance: any) => {
                    return braintree.paypalCheckout.create({
                        client: clientInstance,
                    });
                }).then((paypalCheckoutInstance: any) => {
                    setLoading(false); // Stop the loader once everything is set up
                    return paypal.Buttons({
                        createOrder: () => {
                            return paypalCheckoutInstance.createPayment({
                                flow: "vault",
                                currency: 'USD',
                                intent: 'capture'
                            });
                        },
                        onApprove: (data: any, actions: any) => {
                            return paypalCheckoutInstance.tokenizePayment(data).then((payload: any) => {
                                console.log("Payment Tokenized", payload);
                            });
                        },
                        onCancel: () => {
                            console.log("Payment Canceled");
                        },
                        onError: (err: any) => {
                            console.log("payment Error")
                            console.log(err)
                            console.error("Payment Error!", err);
                        },
                    }).render("#paypal-button");
                }).catch((err: any) => {
                    console.error("Error!", err);
                    setLoading(false); // Stop the loader even if there's an error
                });
            } catch (error) {
                console.error("Script loading error:", error);
                setLoading(false);
            }
        };

        initializeBraintree();
    }, []);

    return (
        <div id="paypal-button"></div>
    );
};

export default PayPalButton;

内容的提问来源于stack exchange，提问作者Ebrahim Khalil Amid