Kaip įgyvendintumėte bendrą komponentą skirtingiems mokėjimo paslaugų teikėjams su skirtingais endpointais, parametrais ir atsakymo formatais, bet vienu naudotojo sąsajos?

Bendro komponento įgyvendinimui su vieninga naudotojo sąsaja, kuri veikia su skirtingais mokėjimo teikėjais, galima naudoti adapterio arba strategijos šabloną.

1. Sukurkite sąsają arba abstrakciją, skirtą sąveikai su teikėju (metodai mokėjimams siųsti, būsenai patikrinti ir pan.).
2. Kiekvienam teikėjui įgyvendinkite atskirą adapterį, kuris žino savo endpointus, parametrus ir atsakymo formatą.
3. Naudotojo sąsajos komponentas dirba su abstrakcija, nesiklausydamas konkrečios įgyvendinimo.

Pavyzdys React (supaprastintas):

// Teikėjo sąsaja
class PaymentProvider {
  pay(paymentData) { throw 'Nepalaikoma'; }
}

// Adapteris teikėjui A
class ProviderA extends PaymentProvider {
  pay(paymentData) {
    return fetch('https://api.providerA.com/pay', {
      method: 'POST',
      body: JSON.stringify(paymentData),
    }).then(res => res.json());
  }
}

// Adapteris teikėjui B
class ProviderB extends PaymentProvider {
  pay(paymentData) {
    // kitoks užklausos ir apdorojimo formatas
  }
}

// UI komponentas
function PaymentComponent({ provider }) {
  const handlePay = async () => {
    const result = await provider.pay({ amount: 100 });
    console.log(result);
  };

  return <button onClick={handlePay}>Mokėti</button>;
}

// Naudojimas
const provider = new ProviderA();
<PaymentComponent provider={provider} />

Šis požiūris leidžia plėsti naujų teikėjų palaikymą be UI komponento keitimo.