Butter Form Element (Stripe)

10min

Example Form Element
<div
    style="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);">
    <iframe src="https://js.basistheory.com/hosted-elements/elements/card-element.html" allow="clipboard-write"
      referrerpolicy="origin" scrolling="no"
      style="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;"></iframe>
  </div>
<div
    style="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);">
    <iframe src="https://js.basistheory.com/hosted-elements/elements/card-element.html" allow="clipboard-write"
      referrerpolicy="origin" scrolling="no"
      style="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;"></iframe>
  </div>
﻿
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>
  );
};
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>
<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
JS
const handleSubmit = (event, paymentIntent, enhancedData) => {
  if (event instanceof Error) {
    // Handle error
    console.error(event);
    return
  }
  // Handle payment
  console.log(paymentMethod);
};
const handleSubmit = (event, paymentIntent, enhancedData) => {
  if (event instanceof Error) {
    // Handle error
    console.error(event);
    return
  }
  // Handle payment
  console.log(paymentMethod);
};
﻿
﻿

Element Property	Description
options	A configuration to setup the Butter Form.
style	JSX object used to style the form.

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)

Updated 27 Mar 2024

Did this page help you?

Introduction to Vault

Enhanced Data