Split Button out from CreditCard component

[llampwall]

Describe the bug

Currently the CreditCard field includes the submit payment button in it. There is no way to separate them. This makes using the library impossible for someone like me who has the button on a different part of the screen, in a different component. When using the regular Square JavaScript SDK, you can put them wherever you want in relation to each other. It's as simple as moving the divs.

<div id="card-container"></div>
<button id="card-button" type="button">Pay $1.00</button>

This library should be updated to split those components and allow them to each be placed anywhere within the children of PaymentForm.

Your Example Website or App

this applies to any site this is used on

Steps to Reproduce the Bug or Issue

1. Attempt to put the button somewhere else in your code.
2. Realize there is no trivial way to do so.

Expected behavior

As a user, I expected to be able to have the same flexibility as the Square Web Payments SDK that this library wraps. This is a breaking change.

Screenshots or Videos

No response

Platform

• OS: macOS, Windows
• Browser: Chrome, Safari, Firefox

Additional context

No response

[KalebMills]

Agreed with this. Even though our application houses the two together, we have essentially no control over it.

[FeLiNa22]

I agree as well. Also can you make the CreditCard button interoperable with libraries like MUI. Atm it will throw many errors and bugs when trying to compose this component.

[Sexual]

Any updates on this? Much needed improvement as it completely destroys our current billing flow.

[alexbrazier]

I'm also interested in this option, an example use case would be to create a checkout page like this