Butter Form Element (Stripe) (cloned)

10 min

Example Form Element

Installing

npm install --save @butterpayments/butter-vaulting-react

Using Yarn

yarn add @butterpayments/butter-vaulting-react

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

<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);
};