ryft-react

A React TypeScript component for seamlessly integrating Ryft payment system with full support for Apple Pay, Google Pay, and traditional card payments.

Features

• 🔒 Secure Payments: Built on Ryft's secure payment infrastructure
• 🍎 Apple Pay Support: Native Apple Pay integration
• 🟢 Google Pay Support: Native Google Pay integration
• 📱 Mobile Optimized: Works seamlessly on mobile and desktop
• 🎨 Customizable: Flexible styling and configuration options
• 📋 Billing Address Collection: Configurable billing address requirements
• 🏪 Marketplace Ready: Support for sub-accounts and marketplace payments
• 🔧 TypeScript: Full TypeScript support with comprehensive type definitions
• ⚡ Easy Integration: Simple setup with minimal configuration

Installation

npm install ryft-react

or

yarn add ryft-react

Quick Start

1. Import the component:

import { RyftPaymentComponent } from 'ryft-react';

2. Basic usage:

import React, { useState, useEffect } from 'react';
import { RyftPaymentComponent } from 'ryft-react';

function App() {
  const [clientSecret, setClientSecret] = useState('');

  useEffect(() => {
    // Fetch client secret from your backend
    fetchClientSecret().then(setClientSecret);
  }, []);

  const handlePaymentSuccess = (paymentSession) => {
    console.log('Payment successful:', paymentSession);
    // Handle successful payment
  };

  const handlePaymentError = (error, userFacingMessage) => {
    console.error('Payment failed:', error);
    // Handle payment error
  };

  return (
    <RyftPaymentComponent
      publicKey="pk_sandbox_your_public_key"
      clientSecret={clientSecret}
      onPaymentSuccess={handlePaymentSuccess}
      onPaymentError={handlePaymentError}
    />
  );
}

Configuration

Required Props

| Prop | Type | Description | |------|------|-------------| | clientSecret | string | Payment session client secret from your backend |

Optional Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | publicKey | string | "pk_sandbox_123" | Your Ryft public key | | onPaymentSuccess | function | - | Callback when payment succeeds | | onPaymentError | function | - | Callback when payment fails | | accountId | string | - | Sub-account ID for marketplace payments | | applePay | ApplePayConfig | - | Apple Pay configuration | | googlePay | GooglePayConfig | - | Google Pay configuration | | fieldCollection | FieldCollectionConfig | - | Billing address collection settings |

Apple Pay Configuration

To enable Apple Pay, provide the applePay configuration:

<RyftPaymentComponent
  // ... other props
  applePay={{
    merchantName: "Your Business Name",
    merchantCountryCode: "US"
  }}
/>

ApplePayConfig

| Property | Type | Required | Description | |----------|------|----------|-------------| | merchantName | string | Yes | Your business name | | merchantCountryCode | string | Yes | Two-letter country code (e.g., "US", "GB") |

Google Pay Configuration

To enable Google Pay, provide the googlePay configuration:

<RyftPaymentComponent
  // ... other props
  googlePay={{
    merchantIdentifier: "merchant_123",
    merchantName: "Your Business Name",
    merchantCountryCode: "US"
  }}
/>

GooglePayConfig

| Property | Type | Required | Description | |----------|------|----------|-------------| | merchantIdentifier | string | Yes | Your merchant identifier | | merchantName | string | Yes | Your business name | | merchantCountryCode | string | Yes | Two-letter country code |

Billing Address Collection

Configure billing address collection requirements:

<RyftPaymentComponent
  // ... other props
  fieldCollection={{
    billingAddress: {
      display: "minimum" // "full", "minimum", or "none"
    }
  }}
/>

FieldCollectionConfig

| Property | Type | Description | |----------|------|-------------| | billingAddress.display | "full" \| "minimum" \| "none" | Level of billing address collection |

Marketplace Payments

For marketplace implementations, specify the sub-account ID:

<RyftPaymentComponent
  // ... other props
  accountId="sub_account_123"
/>

Complete Example

import React, { useState, useEffect } from 'react';
import { RyftPaymentComponent, PaymentSession, RyftError } from 'ryft-react';

const CheckoutPage: React.FC = () => {
  const [clientSecret, setClientSecret] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const createPaymentSession = async () => {
      try {
        const response = await fetch('/api/create-payment-session', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            amount: 2000, // $20.00 in cents
            currency: 'USD',
          }),
        });
        
        const data = await response.json();
        setClientSecret(data.clientSecret);
      } catch (error) {
        console.error('Failed to create payment session:', error);
      } finally {
        setLoading(false);
      }
    };

    createPaymentSession();
  }, []);

  const handlePaymentSuccess = (paymentSession: PaymentSession) => {
    console.log('Payment successful:', paymentSession);
    
    // Redirect to success page
    window.location.href = `/success?session_id=${paymentSession.id}`;
  };

  const handlePaymentError = (error: RyftError, userFacingMessage: string) => {
    console.error('Payment failed:', error);
    
    // Show error to user
    alert(`Payment failed: ${userFacingMessage}`);
  };

  if (loading) {
    return <div>Loading payment form...</div>;
  }

  return (
    <div className="container mx-auto max-w-md py-8">
      <h1 className="text-2xl font-bold mb-6">Complete Your Payment</h1>
      
      <RyftPaymentComponent
        publicKey={process.env.REACT_APP_RYFT_PUBLIC_KEY!}
        clientSecret={clientSecret}
        onPaymentSuccess={handlePaymentSuccess}
        onPaymentError={handlePaymentError}
        applePay={{
          merchantName: "Your Business",
          merchantCountryCode: "US"
        }}
        googlePay={{
          merchantIdentifier: "your_merchant_id",
          merchantName: "Your Business",
          merchantCountryCode: "US"
        }}
        fieldCollection={{
          billingAddress: {
            display: "minimum"
          }
        }}
      />
    </div>
  );
};

export default CheckoutPage;

Backend Integration

To use this component, you'll need to create payment sessions on your backend:

// Node.js example
app.post('/api/create-payment-session', async (req, res) => {
  try {
    const { amount, currency } = req.body;
    
    const paymentSession = await ryft.paymentSessions.create({
      amount,
      currency,
      // other payment session parameters
    });
    
    res.json({
      clientSecret: paymentSession.clientSecret
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Type Definitions

The package includes comprehensive TypeScript definitions:

interface PaymentSession {
  id: string;
  status: 'Approved' | 'Captured' | 'Failed' | 'Pending';
  lastError?: RyftError;
}

interface RyftError {
  code: string;
  message: string;
  type: string;
}

interface ApplePayConfig {
  merchantName: string;
  merchantCountryCode: string;
}

interface GooglePayConfig {
  merchantIdentifier: string;
  merchantName: string;
  merchantCountryCode: string;
}

interface FieldCollectionConfig {
  billingAddress?: {
    display: 'full' | 'minimum' | 'none';
  };
}

Styling

The component uses Tailwind CSS classes by default. You can customize the appearance by:

1. Overriding CSS classes: Target the component's class names
2. Custom CSS: Provide your own styles
3. CSS-in-JS: Use styled-components or emotion

/* Custom styling example */
.ryft-payment-component {
  /* Your custom styles */
}

.ryft-payment-component .pay-button {
  background-color: #your-brand-color;
}

Environment Variables

For security, use environment variables for your public key:

# .env
REACT_APP_RYFT_PUBLIC_KEY=pk_live_your_actual_public_key

Error Handling

The component provides detailed error handling:

const handlePaymentError = (error: RyftError, userFacingMessage: string) => {
  // Log technical error details
  console.error('Payment error:', error);
  
  // Show user-friendly message
  setErrorMessage(userFacingMessage);
  
  // Send to error tracking service
  errorTracker.captureException(error);
};

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Security Considerations

• Always use HTTPS in production
• Never expose your secret keys in client-side code
• Validate payments on your backend
• Implement proper CORS policies
• Use environment variables for sensitive configuration

Contributing

We welcome contributions! Please see Contributing Guide for details.

License

MIT License - see the LICENSE file for details.

Support

• 📚 Ryft Documentation: https://docs.ryftpay.com
• 🐛 Issues: GitHub Issues

Changelog

See CHANGELOG.md for a list of changes.

Made with ❤️ by developers, for developers.