admin 管理员组

文章数量: 1086019

I'm using the PayPal React TypeScript SDK for accepting payment on the frontend.

My React component is defined as follows:

import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
import React, { Suspense } from "react";

interface PayPalCheckoutProps {
    currencyCode: string;
    totalAmount: string;
    handleApprove: (data: any) => Promise<void>;
    handleError: (error: any) => void;
}

const PayPalCheckout: React.FC<PayPalCheckoutProps> = ({ currencyCode, totalAmount, handleApprove, handleError }) => {
    return (
        <PayPalScriptProvider options={{ clientId: import.meta.env.VITE_PAYPAL_CLIENT_ID, currency: currencyCode }}>
            <Suspense fallback={<div>Loading PayPal...</div>}>
                <PayPalButtons
                    style={{ layout: "vertical" }}
                    createOrder={(_data, actions) => {
                        return actions.order.create({
                            intent: "CAPTURE",
                            purchase_units: [
                                {
                                    amount: {
                                        currency_code: currencyCode,
                                        value: totalAmount,
                                    },
                                    shipping: {}, // No shipping details
                                },
                            ],
                            application_context: {
                                shipping_preference: "NO_SHIPPING",
                            },
                        });
                    }}
                    onApprove={async (data, actions) => {
                        if (!actions.order) {
                            return Promise.reject(new Error("Order object is undefined"));
                        }

                        try {
                            await actions.order.capture();
                            await handleApprove(data);
                        } catch (err: any) {
                            handleError(err);
                        }
                    }}
                    onError={handleError}
                />
            </Suspense>
        </PayPalScriptProvider>
    );
};

export default PayPalCheckout;

It's implemented on my checkout page like this:

<div className={"justify-center items-center flex"}>
    <PayPalCheckout
        currencyCode={currencyCode}
        totalAmount={totalAmount}
        handleApprove={handleApprove}
        handleError={handleError}
    />
</div>

In development mode (npm run dev), when I click on the "Debit or Credit Card" button provided by the PayPalScriptProvider on the frontend...

... it expands correctly downwards as follows:

However, if I compile my project to production using Vite via e.g. tsc -b && vite build --base=./, I get no warnings and it completes successfully. After serving the frontend via npm serve -s dist and clicking the same "Debit or Credit Card" button, it does not expand properly:

I also noticed that the buttons appear a bit bigger in production compared to development.

Questions:

  • Why is the appearance of the buttons not the same in development and production? My CSS is the same and does not use any conditional logic (I use Tailwind CSS v4.0). Disabling minifying CSS etc. did not help.
  • Why does the "Debit or Credit Card" form not expand properly in production? In both cases my CLIENT_ID is the same for now. This form issue makes it hard to use the form since only a small window of the form is visible at a time. Jumping downwards can be done with tabbing but it's very user friendly. Maybe there is a bug with the way the JavaScript is compiled for production? Is there any way I can track this issue down further? Using chunking or not did not matter either but I prefer to use chunking rather than not.

vite.config.ts:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// /config/
export default defineConfig({
    plugins: [react(), tailwindcss()],
    server: {
        port: 3000
    },
})

本文标签： javascriptreactpaypaljs does not expand guest checkout properly in productionStack Overflow

版权声明：本文标题：javascript - react-paypal-js does not expand guest checkout properly in production - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744067070a2527796.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。