Search code examples
reactjspaypal

Configure multiple values for fundingSource in PayPalButtons | react-paypal-js

Is there any way to set multiple values for fundingSource prop in PayPalButtons(react-paypal-js) fundingSource prop is a string type and hence we cannot pass an array. I tried below and it is not working.

<PayPalButtons
            style={style}
            disabled={false}
            forceReRender={[amount, currency, style]}
            fundingSource={"paypal", "card"}
        />

We can implement two PayPalButtons like below. but is there any other better solution?

<>
<PayPalButtons
                style={style}
                disabled={false}
                forceReRender={[amount, currency, style]}
                fundingSource={"paypal"}
            />
<PayPalButtons
                style={style}
                disabled={false}
                forceReRender={[amount, currency, style]}
                fundingSource={"card"}
            />
</>
Solution

  • If you need to specify specific funding sources, the solution is indeed to render multiple (standalone) buttons. Make sure there's sufficient margin between them, I've used this CSS to mimic a vertical stack:

    <style> .paypal-buttons { margin-bottom:8px; } </style>

    If you only need to disable certain ones from showing up as part of a smart stack, you can use the disable-funding parameter in the script provider instead.