---
title: Butter Form Element (Stripe) (cloned)
slug: butter-form-element-stripe-cloned
description: Learn how to integrate and customize the Butter Form Element for Stripe payments. Includes installation, form properties, styling with Tailwind CSS, alternate payment methods, and error handling examples.
docTags: 
createdAt: 2024-02-13T20:35:22.514Z
---

### Example Form Element

:::Iframe{iframeHeight="0" code="<div&#xA;    style=&#x22;display: flex; align-items: center; justify-content: center; height: 69px; background: #f3f4f6; padding: 10px; width: 100%; border-radius: calc(0.5rem + 4px); border-color: rgb(229, 231, 235);&#x22;>&#xA;    <iframe src=&#x22;https://js.basistheory.com/hosted-elements/elements/card-element.html&#x22; allow=&#x22;clipboard-write&#x22;&#xA;      referrerpolicy=&#x22;origin&#x22; scrolling=&#x22;no&#x22;&#xA;      style=&#x22;height: 49px !important; border-style: none !important; margin: 0px !important; padding: 10px !important; width: 1px !important; width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; will-change: transform !important; background: white !important;&#x22;></iframe>&#xA;  </div>"}

:::

### Installing

Using [Node Package Manager](https://docs.npmjs.com/)

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

Using [Yarn](https://classic.yarnpkg.com/en/docs/)

`yarn add @butterpayments/butter-vaulting-react`

:::CodeblockTabs
JSX

```javascript
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](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. ([Link](https://docs.stripe.com/keys))                                              |
| `stripePaymentIntentId` | The payment intent ID from the create payment intent response. ([Link](https://docs.stripe.com/api/payment_intents/create)) |
| `stripeClientSecret`    | The client secret from the create payment intent response. ([Link](https://docs.stripe.com/api/payment_intents/create))     |

### onSubmit Callback Response

`event`: returns an instance of [submit event ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)or [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)

`paymentIntent`: returns a confrim payment intent [object](https://docs.stripe.com/api/payment_intents/confirm).

`enhancedData`: returns an enchanced data [object](https://docs.services.butterpayments.com/vaulting/enhanced-data) about the payment method.



# Styling Example

Example using [Tailwind CSS](https://tailwindcss.com/)

:::CodeblockTabs
JSX

```typescript
<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

:::hint{type="warning"}
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

```javascript
const handleSubmit = (event, paymentIntent, enhancedData) => {
  if (event instanceof Error) {
    // Handle error
    console.error(event);
    return
  }
  // Handle payment
  console.log(paymentMethod);
};
```