@butterpayments/butter-vaulting-react v1.0.0

Butter Vaulting React

A set of React components to integrate Butter Payments vaulting without interrupting the payment flow.

Installation

Using Node Package Manager

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

Using Yarn

yarn add @butter-payments/butter-vaulting-react

Usage

Simply use the ButterForm component and the CardElement component to get your Stripe payment method. You will be able to grab the Stripe payment method from the onSubmit hook.

ButterForm

Properties

Requires a button component with type submit to trigger the form submission.

Example

import {
  ButterForm,
  CardElement,
} from '@butter-payments/butter-vaulting-react';

const App = () => {
  const handleSubmit = (event, paymentMethod) => {
    // Handle your business logic and continue the payment here with the newly created payment method
    console.log(paymentMethod);
  }

  return (
    <ButterForm merchantKey='xxx' sourceId='xxx' onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit">
        Submit
      </button>
    </ButterForm>
  );
};

Styling

Minimal styling is applied to the components to make it easier to match your branding.