Butter Form Element (Stripe) (cloned)

example form element installing using node package manager npm install save @butterpayments/butter vaulting react using yarn 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 element property description options a configuration to setup the butter form style jsx object used to style the form form element options element property description buttermerchantkey a unique key provided by butter used to scope requests to approved merchant proxy endpoints buttersourceid a unique key provided by butter used to scope vaulted cards in merchant containers or merchant sub brand containers stripepublishablekey the public api key generated in stripe ( link ) stripepaymentintentid the payment intent id from the create payment intent response ( link ) stripeclientsecret the client secret from the create payment intent response ( link ) onsubmit callback response event returns an instance of submit event or error paymentintent returns a confrim payment intent object enhanceddata returns an enchanced data object about the payment method styling example example using tailwind css 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); };