3

I would like to arrange the PayPal and the Credit Card buttons horizontally as is described in the documentation. When I stacked them vertically, both buttons were displayed just fine. However, the Credit Button does not show in the horizontal layout...

<PayPalButtons 
    style={{
    layout: 'horizontal',
    color:  'silver',
    shape:  'pill',
    label:  'pay',
    tagline: false,
    height: 30}} 
    createOrder={(data, actions) => 
                 {return onCreate(data, actions);}}
    onCancel={() => onCancel()}
    onError={(err) => onError()}
    onApprove={(data, actions) => onSuccess(data, actions)}
/>

Am I missing something?

AlwaysLearning
  • 7,257
  • 4
  • 33
  • 68

1 Answers1

4

Edit: The short answer is the black 'Debit Or Credit Card' button, specifically, is not supported in the horizontal layout, as it expands vertically. Only the vertical layout or standalone buttons support it.

A maximum of 2 buttons will show in the horizontal layout. Whether and which 2nd button shows depends on the circumstances.

Your code results in:

enter image description here

..in a test, but if you are seeing something else in different circumstances you'll need to be explicit about what else you are seeing in your question, and include the full details of what you are testing. Particularly all PayPal <script> or react <PayPalScriptProvider> query/runtime parameters, the browser/user agent, and geographic IP location can all be relevant here.

Preston PHX
  • 27,642
  • 4
  • 24
  • 44
  • Yes, I had read the doc you are quoting. I see only the "Pay with PayPal" button. Why is "Debit or Credit Card" available in the vertical layout, but not in horizontal? – AlwaysLearning Oct 24 '21 at 20:36
  • 1
    Oh, you said "the Credit Button" above your code, thought you were talking about PayPal Credit / Pay Later since that's what's supported. The Debit or Credit Card button never shows in an horizontal layout, it requires a vertical layout or standalone buttons – Preston PHX Oct 25 '21 at 04:16
  • A very weird limitation... Thank you for mentioning *standalone buttons*. – AlwaysLearning Oct 26 '21 at 06:56