ARCA Payment Widget React SDK

Готовый к использованию React виджет для приема криптоплатежей от пользователей.

🚀 Быстрый старт

Установка

npm install @arcaid/sdk-react
# или
yarn add @arcaid/sdk-react
# или
pnpm add @arcaid/sdk-react

Использование

import React from 'react';
import { PaymentButton, SDK } from '@arcaid/sdk-react';

function App() {
  return (
    <div>
      <h1>Мой магазин</h1>
      
      <PaymentButton
        merchantId="your-merchant-id"
        settlementChainId={42161} // Arbitrum
        settlementTokenSymbol={SDK.USDC_ARBITRUM}
        settlementAddress="0x742d35Cc6634C0532925a3b8D0C4C8C0C4C8C0C4"
        amount="100000000" // 100 USDC (6 decimals)
        onSuccess={(data) => console.log('Payment successful:', data)}
        onError={(error) => console.error('Payment failed:', error)}
      >
        Оплатить 100 USDC
      </PaymentButton>
    </div>
  );
}

export default App;

🔧 Конфигурация для разработчиков

Environment Variables

Для разработки можно переопределить API URL через переменную окружения:

# .env.local
REACT_APP_ARCA_API_URL=http://localhost:3001

Автоматическое определение API URL

SDK автоматически определяет правильный API URL:

• Production: https://api.arca.finance
• Development: http://localhost:3001 (или значение из REACT_APP_ARCA_API_URL)

📚 API Reference

PaymentButton Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | merchantId | string | ✅ | ID вашего мерчанта | | settlementChainId | number | ✅ | ID сети для получения средств | | settlementTokenSymbol | string | ✅ | Символ токена для получения | | settlementAddress | string | ✅ | Адрес для получения средств | | amount | string | ❌ | Сумма в smallest units (опционально) | | theme | 'light' \| 'dark' | ❌ | Тема виджета (по умолчанию 'dark') | | onSuccess | (data: any) => void | ❌ | Колбэк при успешной оплате | | onError | (error: Error) => void | ❌ | Колбэк при ошибке |

SDK Constants

import { SDK } from '@arca/sdk-react';

// Поддерживаемые токены
SDK.USDC_ARBITRUM    // USDC на Arbitrum
SDK.USDC_BASE        // USDC на Base
SDK.USDC_POLYGON     // USDC на Polygon
SDK.USDT_ARBITRUM    // USDT на Arbitrum
SDK.WETH_ARBITRUM    // WETH на Arbitrum
// ... и другие

ShadowDOMWidget

Для более продвинутого использования:

import { ShadowDOMWidget } from '@arcaid/sdk-react';

function CustomPayment() {
  return (
    <ShadowDOMWidget
      merchantId="your-merchant-id"
      settlementChainId={42161}
      settlementTokenSymbol={SDK.USDC_ARBITRUM}
      settlementAddress="0x742d35Cc6634C0532925a3b8D0C4C8C0C4C8C0C4"
      amount="100000000"
      theme="dark"
      onSuccess={(data) => console.log('Success:', data)}
      onError={(error) => console.error('Error:', error)}
    />
  );
}

🌐 Поддерживаемые сети

• Ethereum (1) - $20 min
• Bitcoin (8253038) - $20 min
• Arbitrum (42161) - $3 min
• Base (8453) - $3 min
• Polygon (137) - $3 min
• Optimism (10) - $3 min
• Solana (792703809) - $3 min

💰 Поддерживаемые токены

• USDC на всех EVM сетях
• USDT на Ethereum, Arbitrum, Polygon
• WETH на Ethereum, Arbitrum
• BTC на Bitcoin
• SOL на Solana

🎨 Темы

Виджет поддерживает две темы:

• light - светлая тема
• dark - темная тема (по умолчанию)

📱 Адаптивность

Виджет полностью адаптивен и работает на:

• Десктопе
• Планшетах
• Мобильных устройствах

🔧 Разработка

# Клонировать репозиторий
git clone https://github.com/arca-finance/arca-sdk.git
cd arca-sdk

# Установить зависимости
pnpm install

# Запустить в режиме разработки
pnpm dev

# Собрать пакеты
pnpm build

📄 Лицензия

MIT License - см. LICENSE файл.

🆘 Поддержка

• 📧 Email: [email protected]
• 💬 Discord: ARCA Community
• 🐛 Issues: GitHub Issues

🔄 Обновления

Следите за обновлениями:

npm update @arcaid/sdk-react

Сделано с ❤️ командой ARCA Finance