CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-stripe--react-stripe-js

React components and hooks for Stripe.js and Elements payment processing integration

—

Pending
Overview
Eval results
Files

message-elements.mddocs/

Message Elements

Elements for displaying financing options and payment method messaging to customers. These elements help communicate available payment options and financing terms to enhance the checkout experience.

Capabilities

PaymentMethodMessagingElement

Displays messaging about available payment methods and their benefits to customers during checkout.

/**
 * Payment method messaging element for displaying payment options information
 * @param props - Payment method messaging element configuration props
 * @returns JSX element for payment method messaging
 */
function PaymentMethodMessagingElement(props: PaymentMethodMessagingElementProps): JSX.Element;

interface PaymentMethodMessagingElementProps {
  /** Passes through to the Element's container */
  id?: string;
  /** Passes through to the Element's container */
  className?: string;
  /** Configuration options for the Payment Method Messaging Element */
  options?: StripePaymentMethodMessagingElementOptions;
  /** Triggered when the Element is fully rendered and can accept focus */
  onReady?: (element: StripePaymentMethodMessagingElement) => any;
  /** Triggered when the escape key is pressed within the Element */
  onEscape?: () => any;
  /** Triggered when the Element fails to load */
  onLoadError?: (event: {elementType: 'paymentMethodMessaging'; error: StripeError}) => any;
  /** Triggered when the loader UI is mounted to the DOM */
  onLoaderStart?: (event: {elementType: 'paymentMethodMessaging'}) => any;
}

interface StripePaymentMethodMessagingElementOptions {
  /** Amount for payment method messaging */
  amount?: number;
  /** Currency for the amount */
  currency?: string;
  /** Payment method types to show messaging for */
  paymentMethodTypes?: string[];
  /** Country code for localization */
  countryCode?: string;
}

Usage Examples:

import React from 'react';
import { PaymentMethodMessagingElement } from '@stripe/react-stripe-js';

const PaymentOptionsMessaging = ({ amount, currency }) => {
  return (
    <div className="payment-messaging">
      <h3>Payment Options</h3>
      <PaymentMethodMessagingElement
        options={{
          amount: amount * 100, // Amount in cents
          currency: currency.toLowerCase(),
          paymentMethodTypes: ['card', 'klarna', 'afterpay_clearpay'],
          countryCode: 'US'
        }}
        onReady={() => console.log('Payment messaging ready')}
        onLoadError={(event) => console.error('Payment messaging load error:', event.error)}
      />
    </div>
  );
};

// Usage in checkout
const CheckoutPage = () => {
  const orderAmount = 99.99;
  
  return (
    <div>
      <div className="order-summary">
        <p>Total: ${orderAmount}</p>
      </div>
      
      <PaymentOptionsMessaging 
        amount={orderAmount} 
        currency="USD" 
      />
      
      <PaymentElement />
    </div>
  );
};

AffirmMessageElement

Displays Affirm financing options and payment messaging for eligible purchases.

/**
 * Affirm message element for displaying financing options
 * @param props - Affirm message element configuration props
 * @returns JSX element for Affirm financing messaging
 */
function AffirmMessageElement(props: AffirmMessageElementProps): JSX.Element;

interface AffirmMessageElementProps {
  /** Passes through to the Element's container */
  id?: string;
  /** Passes through to the Element's container */
  className?: string;
  /** Configuration options for the Affirm Message Element */
  options?: StripeAffirmMessageElementOptions;
  /** Triggered when the Element is fully rendered and can accept focus */
  onReady?: (element: StripeAffirmMessageElement) => any;
  /** Triggered when the escape key is pressed within the Element */
  onEscape?: () => any;
  /** Triggered when the Element fails to load */
  onLoadError?: (event: {elementType: 'affirmMessage'; error: StripeError}) => any;
  /** Triggered when the loader UI is mounted to the DOM */
  onLoaderStart?: (event: {elementType: 'affirmMessage'}) => any;
}

interface StripeAffirmMessageElementOptions {
  /** Amount for Affirm messaging calculation */
  amount: number;
  /** Currency for the amount */
  currency: string;
  /** Type of Affirm message to display */
  type?: 'payment-options' | 'product-messaging';
  /** Message theme */
  theme?: 'light' | 'dark';
  /** Text color */
  colorScheme?: 'light' | 'dark' | 'auto';
}

Usage Examples:

import React, { useState } from 'react';
import { AffirmMessageElement } from '@stripe/react-stripe-js';

const ProductPage = ({ product }) => {
  const [selectedVariant, setSelectedVariant] = useState(product.variants[0]);

  return (
    <div className="product-page">
      <div className="product-info">
        <h1>{product.name}</h1>
        <p className="price">${selectedVariant.price}</p>
        
        {/* Show Affirm financing options */}
        <AffirmMessageElement
          options={{
            amount: selectedVariant.price * 100, // Amount in cents
            currency: 'usd',
            type: 'product-messaging',
            theme: 'light',
            colorScheme: 'auto'
          }}
          onReady={() => console.log('Affirm message ready')}
        />
        
        <select 
          value={selectedVariant.id} 
          onChange={(e) => setSelectedVariant(
            product.variants.find(v => v.id === e.target.value)
          )}
        >
          {product.variants.map(variant => (
            <option key={variant.id} value={variant.id}>
              {variant.name} - ${variant.price}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

// Checkout page usage
const CheckoutWithAffirm = ({ cartTotal }) => {
  return (
    <div className="checkout">
      <div className="payment-options">
        <h3>Payment Options</h3>
        
        <AffirmMessageElement
          options={{
            amount: cartTotal * 100,
            currency: 'usd',
            type: 'payment-options',
            theme: 'light'
          }}
        />
        
        <PaymentElement 
          options={{
            paymentMethodTypes: ['card', 'affirm']
          }}
        />
      </div>
    </div>
  );
};

AfterpayClearpayMessageElement

Displays Afterpay/Clearpay financing options and payment messaging for eligible purchases.

/**
 * Afterpay/Clearpay message element for displaying buy-now-pay-later options
 * @param props - Afterpay/Clearpay message element configuration props
 * @returns JSX element for Afterpay/Clearpay messaging
 */
function AfterpayClearpayMessageElement(props: AfterpayClearpayMessageElementProps): JSX.Element;

interface AfterpayClearpayMessageElementProps {
  /** Passes through to the Element's container */
  id?: string;
  /** Passes through to the Element's container */
  className?: string;
  /** Configuration options for the Afterpay/Clearpay Message Element */
  options?: StripeAfterpayClearpayMessageElementOptions;
  /** Triggered when the Element is fully rendered and can accept focus */
  onReady?: (element: StripeAfterpayClearpayMessageElement) => any;
  /** Triggered when the escape key is pressed within the Element */
  onEscape?: () => any;
  /** Triggered when the Element fails to load */
  onLoadError?: (event: {elementType: 'afterpayClearpayMessage'; error: StripeError}) => any;
  /** Triggered when the loader UI is mounted to the DOM */
  onLoaderStart?: (event: {elementType: 'afterpayClearpayMessage'}) => any;
}

interface StripeAfterpayClearpayMessageElementOptions {
  /** Amount for Afterpay/Clearpay messaging calculation */
  amount: number;
  /** Currency for the amount */
  currency: string;
  /** Message display mode */
  displayType?: 'logo' | 'text';
  /** Introductory text */
  introText?: 'default' | 'in_installments';
}

Usage Examples:

import React from 'react';
import { AfterpayClearpayMessageElement } from '@stripe/react-stripe-js';

const ProductWithAfterpay = ({ product }) => {
  const isEligibleForAfterpay = product.price >= 1 && product.price <= 2000;

  return (
    <div className="product-details">
      <h2>{product.name}</h2>
      <p className="price">${product.price}</p>
      
      {isEligibleForAfterpay && (
        <div className="financing-options">
          <AfterpayClearpayMessageElement
            options={{
              amount: product.price * 100, // Amount in cents
              currency: 'usd',
              displayType: 'logo',
              introText: 'in_installments'
            }}
            onReady={() => console.log('Afterpay message ready')}
            onLoadError={(event) => {
              console.error('Afterpay message failed to load:', event.error);
            }}
          />
        </div>
      )}
      
      <button className="add-to-cart">Add to Cart</button>
    </div>
  );
};

// Shopping cart usage
const CartWithAfterpay = ({ items, total }) => {
  const afterpayEligible = total >= 1 && total <= 2000;

  return (
    <div className="cart">
      <div className="cart-items">
        {items.map(item => (
          <div key={item.id} className="cart-item">
            <span>{item.name}</span>
            <span>${item.price}</span>
          </div>
        ))}
      </div>
      
      <div className="cart-total">
        <p>Total: ${total}</p>
        
        {afterpayEligible && (
          <AfterpayClearpayMessageElement
            options={{
              amount: total * 100,
              currency: 'usd',
              displayType: 'text',
              introText: 'default'
            }}
          />
        )}
      </div>
      
      <button className="checkout">Checkout</button>
    </div>
  );
};

Combined Financing Messages Example:

import React from 'react';
import { 
  AffirmMessageElement, 
  AfterpayClearpayMessageElement,
  PaymentMethodMessagingElement 
} from '@stripe/react-stripe-js';

const FinancingOptionsDisplay = ({ amount, currency = 'usd' }) => {
  const amountInCents = amount * 100;
  
  // Define eligibility rules
  const affirmEligible = amount >= 50 && amount <= 17500;
  const afterpayEligible = amount >= 1 && amount <= 2000;

  return (
    <div className="financing-options">
      <h3>Flexible Payment Options</h3>
      
      {/* General payment method messaging */}
      <PaymentMethodMessagingElement
        options={{
          amount: amountInCents,
          currency,
          paymentMethodTypes: ['card', 'klarna', 'afterpay_clearpay', 'affirm']
        }}
      />
      
      {/* Affirm-specific messaging */}
      {affirmEligible && (
        <div className="affirm-messaging">
          <AffirmMessageElement
            options={{
              amount: amountInCents,
              currency,
              type: 'payment-options',
              theme: 'light'
            }}
          />
        </div>
      )}
      
      {/* Afterpay-specific messaging */}
      {afterpayEligible && (
        <div className="afterpay-messaging">
          <AfterpayClearpayMessageElement
            options={{
              amount: amountInCents,
              currency,
              displayType: 'logo',
              introText: 'in_installments'
            }}
          />
        </div>
      )}
      
      {!affirmEligible && !afterpayEligible && (
        <p className="financing-unavailable">
          Financing options are not available for this amount.
        </p>
      )}
    </div>
  );
};

// Usage in e-commerce flow
const ProductCheckout = () => {
  const [cartTotal, setCartTotal] = useState(150.00);

  return (
    <div className="checkout-flow">
      <div className="order-summary">
        <h2>Order Summary</h2>
        <p>Total: ${cartTotal}</p>
      </div>
      
      <FinancingOptionsDisplay amount={cartTotal} />
      
      <PaymentElement 
        options={{
          paymentMethodTypes: ['card', 'affirm', 'afterpay_clearpay', 'klarna']
        }}
      />
    </div>
  );
};

Message Element Styling

Message elements automatically adapt to your site's theme, but you can customize their appearance:

// Custom styling example
const StyledMessagingElements = ({ amount }) => {
  return (
    <div className="custom-financing-messages">
      <style jsx>{`
        .custom-financing-messages {
          padding: 16px;
          background-color: #f8f9fa;
          border-radius: 8px;
          margin: 16px 0;
        }
        
        .financing-section {
          margin-bottom: 12px;
        }
        
        .financing-section:last-child {
          margin-bottom: 0;
        }
      `}</style>
      
      <div className="financing-section">
        <AffirmMessageElement
          options={{
            amount: amount * 100,
            currency: 'usd',
            colorScheme: 'auto', // Adapts to your site's theme
            theme: 'light'
          }}
        />
      </div>
      
      <div className="financing-section">
        <AfterpayClearpayMessageElement
          options={{
            amount: amount * 100,
            currency: 'usd',
            displayType: 'text'
          }}
        />
      </div>
    </div>
  );
};

Error Handling

const MessagingWithErrorHandling = ({ amount }) => {
  const [messagingErrors, setMessagingErrors] = useState({});

  const handleLoadError = (elementType) => (event) => {
    setMessagingErrors(prev => ({
      ...prev,
      [elementType]: event.error.message
    }));
    console.error(`${elementType} messaging failed:`, event.error);
  };

  return (
    <div>
      <AffirmMessageElement
        options={{ amount: amount * 100, currency: 'usd' }}
        onLoadError={handleLoadError('affirm')}
      />
      
      {messagingErrors.affirm && (
        <div className="error-message">
          Affirm messaging unavailable: {messagingErrors.affirm}
        </div>
      )}
      
      <AfterpayClearpayMessageElement
        options={{ amount: amount * 100, currency: 'usd' }}
        onLoadError={handleLoadError('afterpay')}
      />
      
      {messagingErrors.afterpay && (
        <div className="error-message">
          Afterpay messaging unavailable: {messagingErrors.afterpay}
        </div>
      )}
    </div>
  );
};

Install with Tessl CLI

npx tessl i tessl/npm-stripe--react-stripe-js

docs

address-elements.md

bank-elements.md

card-elements.md

checkout-components.md

core-providers-hooks.md

embedded-checkout.md

index.md

message-elements.md

payment-elements.md

tile.json