Card Component

The Card component is a secure iframe-based element that collects complete card information including number, expiry date, and CVC in a single component.

This component allows consumers to manual entry a credit card or tap to add a credit card out of the box.

Example Card Component

Card Number

MM / YYCVC

Usage

import React, { useRef, useState } from 'react';
import { useBtAi } from '@btai/react-sdk';
 
function PaymentForm() {
  const { btAi } = useBtAi();
  const cardRef = useRef(null);
  const [isValid, setIsValid] = useState(false);
 
  const handleCardChange = (event) => {
    setIsValid(event.complete && !event.error);
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!cardRef.current || !isValid) return;
 
    try {
      const paymentMethod = await cardRef.current.createPaymentMethod();
      console.log('Payment method created:', paymentMethod);
    } catch (error) {
      console.error('Error creating payment method:', error);
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="card">Card Information</label>
        <Card
          ref={cardRef}
          onChange={handleCardChange}
          styles={{
            ...
          }}
        />
      </div>
      
      <button type="submit" disabled={!isValid}>
        Create Payment Method
      </button>
    </form>
  );
}

Component Properties

The Card component accepts the following properties:

Property	Type	Required	Description
`ref`	React.Ref	No	React ref for accessing component methods
`styles`	Object	No	Styling configuration for the component
`onChange`	Function	No	Callback fired when card data changes
`onReady`	Function	No	Callback fired when component is ready
`onFocus`	Function	No	Callback fired when component gains focus
`onBlur`	Function	No	Callback fired when component loses focus

Component Methods

`isValid()`

Returns whether the current card data is valid and complete.

const isCardValid = cardComponent.isValid();

`createPaymentMethod()`

Creates a payment method from the current card data.

const isCardValid = cardComponent.createPaymentMethod();

Styling Options

The Card component supports extensive styling customization:

const cardStyles = {
  base: {
    // Base styles
    color: '#424770',
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    lineHeight: '1.5',
    
    // Placeholder styles
    '::placeholder': {
      color: '#aab7c4',
    },
    
    // Focus styles
    ':focus': {
      color: '#424770',
    },
  },
  
  // Invalid state styles
  invalid: {
    color: '#9e2146',
    iconColor: '#9e2146',
  },
  
  // Complete state styles
  complete: {
    color: '#424770',
  },
};

Event Handling

The Card component emits several events during user interaction:

//Fired when the component changes
const handleCardChange = (event) => {
  console.log('Card changed:', {
    complete: event.isComplete,  // Boolean - whether all fields are complete
    valid: event.isValid
    error: event.error,        // Object - validation error if any
  });
  
  if (event.error) {
    setErrorMessage(event.error.message);
  } else {
    setErrorMessage('');
  }
  
  setIsFormValid(event.complete && !event.error);
};