Butter Form Element (Stripe) (cloned)

example form element installing using https //docs npmjs com/ npm install save @butterpayments/butter vaulting react using https //classic yarnpkg com/en/docs/ yarn add @butterpayments/butter vaulting react jsx import { butterform, cardelement, } from '@butterpayments/butter vaulting react'; const app = () => { const handlesubmit = (event, paymentintent, enhanceddata) => { // handle your business logic console log(paymentintent); } const options = { buttermerchantkey 'xxx', buttersourceid 'xxx', stripepublishablekey 'pk xxx', stripepaymentintentid 'pi xxx', stripeclientsecret 'pi xxx' } return ( \<butterform options={options} onsubmit={handlesubmit}> \<cardelement /> \<button type="submit"> submit \</button> \</butterform> ); }; form element properties true 174 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type form element options true 235 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type onsubmit callback response event returns an instance of https //developer mozilla org/en us/docs/web/api/htmlformelement/submit event or https //developer mozilla org/en us/docs/web/javascript/reference/global objects/error paymentintent returns a confrim payment intent https //docs stripe com/api/payment intents/confirm enhanceddata returns an enchanced data https //docs services butterpayments com/vaulting/enhanced data about the payment method styling example example using https //tailwindcss com/ jsx \<butterform onsubmit={handlesubmit} classname="bg slate 100 py 8"> \<cardelement /> \<button id="submit" classname="bg slate 400 px 4 py 2 rounded md text white mt 6" \> \<span id="button text"> pay now \</span> \</button> \</butterform> alternate payment methods alternate payment method buttons such as apple pay, google pay, and paypal will automatically populate within the butter form element as configured in your stripe account default card validation card validation is statically defined and cannot be changed card validation checks card number 16 digits valid issuer (first 4 digits of card) expiration must not be expired or greater than 19 years in the future error handling example const handlesubmit = (event, paymentintent, enhanceddata) => { if (event instanceof error) { // handle error console error(event); return } // handle payment console log(paymentmethod); };