Farklı uç noktalar, parametreler ve yanıt formatlarıyla çeşitli ödeme sağlayıcıları için ortak bir bileşen nasıl uygularsınız, ancak tek bir kullanıcı arayüzü ile?

Для реализации общего компонента с единым UI, который работает с разными платежными провайдерами, можно использовать паттерн адаптера или стратегий.

1. Создать интерфейс или абстракцию для взаимодействия с провайдером (методы для отправки платежа, проверки статуса и т.п.).
2. Для каждого провайдера реализовать отдельный адаптер, который знает свои endpoints, параметры и формат ответов.
3. Компонент UI работает с абстракцией, не завися от конкретной реализации.

Пример на React (упрощённо):

// Интерфейс провайдера
class PaymentProvider {
  pay(paymentData) { throw 'Not implemented'; }
}

// Адаптер для провайдера A
class ProviderA extends PaymentProvider {
  pay(paymentData) {
    return fetch('https://api.providerA.com/pay', {
      method: 'POST',
      body: JSON.stringify(paymentData),
    }).then(res => res.json());
  }
}

// Адаптер для провайдера B
class ProviderB extends PaymentProvider {
  pay(paymentData) {
    // другой формат запроса и обработки
  }
}

// Компонент UI
function PaymentComponent({ provider }) {
  const handlePay = async () => {
    const result = await provider.pay({ amount: 100 });
    console.log(result);
  };

  return <button onClick={handlePay}>Оплатить</button>;
}

// Использование
const provider = new ProviderA();
<PaymentComponent provider={provider} />

Такой подход позволяет расширять поддержку новых провайдеров без изменения UI-компонента.