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

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.