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 element property description options a configuration to setup the butter form style jsx https //react dev/reference/react dom/components/common#common props 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 ( https //docs stripe com/keys ) stripepaymentintentid the payment intent id from the create payment intent response ( https //docs stripe com/api/payment intents/create ) stripeclientsecret the client secret from the create payment intent response ( https //docs stripe com/api/payment intents/create ) 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); };