Bindings to a javascript object prop with named arguments and default values

I am trying to bind to this PayPal library and I am unsure how to bind to the options prop of the component while using named arguments and not requiring all the props to be required without using optionals.

<PayPalButton
    amount="10.99"
    options={{vault: true}}
/>

I have no idea how to type out the binding for the options prop.

Thanks in advance!

1 Like

I think you were able to do this sometime after posting, right?

Yes, this is becoming a popular theme here thanks to your help in Discord @yawaramin.

Here is the solution:

type options

@bs.obj
external options: (
  ~clientId: string,
  ~currency: string=?,
  ~merchantId: string=?,
  ~intent: string=?,
  ~commit: string=?,
  ~vault: bool=?,
  ~components: string=?,
  ~disableFunding: string=?,
  ~disableCard: string=?,
  ~integrationDate: string=?,
  ~locale: string=?,
  ~buyerCountry: string=?,
  ~debug: bool=?,
  unit,
) => options = ""

@react.component @bs.module("react-paypal-button-v2")
external make: (~amount: string, ~options: options=?, ~className: string=?) => React.element =
  "PayPalButton"

Thanks again!

5 Likes