191 Client Ea89bd96

Stripe.js Reference

Client-side JavaScript library for secure payment collection.

Installation

Include on every page (enables fraud detection):

<script src="https://js.stripe.com/v3/"></script>

Or via npm:

npm install @stripe/stripe-js

import { loadStripe } from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_...');

Initialization

const stripe = Stripe('pk_test_...', {
  apiVersion: '2024-12-18.acacia',  // Optional
  locale: 'auto',                    // Optional
  stripeAccount: 'acct_xxx',        // For Connect
});

Elements (Payment Forms)

Create container for UI components:

const elements = stripe.elements({
  clientSecret: 'pi_xxx_secret_xxx',
  appearance: { theme: 'stripe' },
});

Payment Element (Recommended)

Auto-renders available payment methods:

const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

Confirm Payment

const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: 'https://example.com/complete',
  },
});

if (error) {
  // Show error to customer
}

Embedded Checkout

Mount Stripe-hosted checkout in your page:

const checkout = await stripe.initEmbeddedCheckout({
  clientSecret: 'cs_xxx',
});
checkout.mount('#checkout');

Element Types

Appearance API

const appearance = {
  theme: 'stripe', // 'night', 'flat', 'none'
  variables: {
    colorPrimary: '#0570de',
    colorBackground: '#ffffff',
    borderRadius: '4px',
  },
  rules: {
    '.Input': { border: '1px solid #ccc' },
  },
};

Security

• Always load from https://js.stripe.com
• Only use publishable keys client-side
• Never log card details or tokens
• Use HTTPS in production

Resources

• Full docs: https://docs.stripe.com/js
• Elements: https://docs.stripe.com/payments/elements
• Appearance: https://docs.stripe.com/elements/appearance-api