csspaypalpaypal-sandboxpaypal-buttons

Horizontal layout of PayPal buttons

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?

Solution

  • 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.