search

weareseeed / react-square-web-payments-sdk

Easily create PCI-compliant inputs to accept payments online with the Square Payments API. It supports the following payment methods: credit and debit cards, ACH bank transfers, Apple Pay, Google Pay, Gift Cards and Afterpay/Clearpay.
https://react-square-payments.weareseeed.com/
MIT License
38 stars 41 forks source link

Split Button out from CreditCard component #67

Open llampwall opened 2 years ago

llampwall commented 2 years ago

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

Additional context

No response

KalebMills commented 2 years ago

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

FeLiNa22 commented 1 year ago

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 commented 1 year ago

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

alexbrazier commented 8 months ago

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

image