Blueprint

GuidesFoundationComponentsReleases
⌘K

Stripe

Stripe provides a set of JavaScript-based components for accepting payments called Elements. Because the Elements are rendered in an <iframe>, some JavaScript is required in addition to the styles provided by the design system in order to customize the appearence of the Elements.

React Support

We currently only support Stripe styling with the Bootstrap theme. If you need suport for the Stripe.js React components, please request it here.

Card Element

The Card Element is the only element that's currently supported by the system. Because it does not support the Appearance API, custom elements options must be passed to stripe.elements(), and a Style object provided to the card element constructor, elements.card().

JavaScript

These instructions describe how to apply the design system styles to the card element and should be used in conjunction with the Stripe Card Element documentation for more implementation details.

NPM

Install the @hover/stripe package.


yarn add @hover/stripe

Import and pass elementsOptions to stripe.elements() and styles.card to the card element constructor.


import { loadStripe } from '@stripe/stripe-js';
import { elementsOptions, styles } from '@hover/stripe';
const mountCardElement = async () => {
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
// Pass `elementsOptions` when initializing Stripe elements
const elements = stripe.elements(elementsOptions);
// Pass card `styles.card` as `styles` option when initializing card element
const card = elements.create('card', { style: styles.card });
card.mount('#card-element');
};

CDN

Load Stripe.js and @hover/stripe global JavaScript bundle with script tags in the <head /> of your HTML document.


<script src="https://js.stripe.com/v3/"></script>
<script src="https://blueprint.hover.to/assets/js/stripe.global-0.1.1.js"></script>

The global @hover/stripe bundle is made available at window.hoverStripe. Pass hoverStripe.elementsOptions to stripe.elements() and hoverStripe.styles.card to the card element constructor.


const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
// Pass `hoverStripe.elementsOptions` when initializing Stripe elements
const elements = stripe.elements(hoverStripe.elementsOptions);
// Pass card `hoverStripe.styles.card` as `styles` option when initializing card element
const card = elements.create('card', { style: hoverStripe.styles.card });
card.mount('#card-element');

Markup

Add the .form-control class to the DOM element that the card element will be mounted on. Include a loading icon in wrapped with a .loading-stripe-element element inside the target DOM element to provide a loading state while the card element loads.

live

<form class="vstack gap-300 p-300">
<div>
<label for="cardholder-name" class="form-label">Cardholder Name</label>
<div class="input-icon-group icon-before">
<input
id="cardholder-name"
type="text"
class="form-control"
placeholder="Jill Appleseed"
aria-label="Cardholder Name"
/>
<svg class="icon" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#i-user" />
</svg>
</div>
</div>
<div>
<label for="card-element" class="form-label">Credit Card</label>
<!-- Target element -->
<div id="card-element" class="form-control">
<!-- Loading state (will be replaced once the card element loads) -->
<span class="loading-stripe-element">
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/icons/all.svg#h-loader" />
</svg>
<span>
</span>
</div>
</div>
<button type="submit" class="btn btn-lg btn-primary mt-300">Submit</button>
</form>