Home How to render only paypal button and hide debit card button, using @paypal/react-paypal-js, in react project

Questions

How to render only paypal button and hide debit card button, using @paypal/react-paypal-js, in react project

May 24, 2023

I am now developing some shopping project using React.
And I have some issue on paypal payment gateway.
Here is how my payment gateway looks like.
Paypal Payment gate way.
It renders two buttons (paypal, and debit card)
But I only want to render the paypal button.
Here is my code snippets for this.

import {
  PayPalButtons,
  usePayPalScriptReducer,
} from "@paypal/react-paypal-js";

<Box>
  <PayPalButtons
    style={{ layout: "vertical" }}
    className="paypal-buttons"
    createOrder={(data, actions) => onCreateOrder(data, actions)}
    onApprove={(data, actions) => onApproveOrder(data, actions)}
  />
</Box>

Could you help me?
Thanks.

I tried to change the css as diplay: none
but that is rendered inside iFrame.
So I can’t do it.

>Solution :

Lucky Shark.
I saw your issue.
That can be solved by using

fundingSource

props in PayPalButtons.

So you can import FUNDING objects from @paypal/react-paypal-js.

import { FUNDING } from "@paypal/react-paypal-js";

and update your code like this.

<PayPalButtons
  style={{ layout: "vertical" }}
  className="paypal-buttons"
  createOrder={(data, actions) => onCreateOrder(data, actions)}
  onApprove={(data, actions) => onApproveOrder(data, actions)}
  fundingSource={FUNDING.PAYPAL}
/>

I hope this will help you.
Best.