Instalace

Nejdříve se musíte zaregistrovat. Registrace je provedena na testovacím prostředí, které je zdarma. Pro produkční účely se musíte zaregistrovat na produkčním prostředí.

V této ukázce si ukážeme implementaci platební brány PayU. Můžete ale použít i platební brány Adyen, Braintree a Stripe.

Jakmile dokončíte registraci, vytvořte soubor index.html a zkopírujte do něj kompletní kód ukázky pod interaktivní ukázkou v sekci níže.
Celý soubor interaktivní ukázky naleznete v repozitáři  Apicart Payments na Githubu.

Jak to funguje

Nejdříve musíme načíst závislosti Apicart Payments a Apicart Core.

<script src="https://cdn.jsdelivr.net/npm/@apicart/core-sdk@1.0.0-alpha7/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@apicart/payments-sdk@1.0.0-alpha7/dist/payments.js"></script>

Následně se přenmene na vývojové prostředí.

Apicart.setDevEnv();

Před odesláním první platby inicializujeme Apicart Payments.

const payments = new Apicart.Payments({
  token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza'
});

A teď můžeme poslat platbu pomocí jednoduché funkce.

const sendPayment = async () => {
  const variableSymbol = '123';
  const unitPrice = 10 * 100; // Každá částka musí být vynásobena 100. 10 ITEM PRICE * 100 pro získání 10,00

  const response = await payments.pay('pay_u', 'order', variableSymbol, {
    continueUrl: window.location.href, // zde musí být validní url (např. http://localhost). Nemůže to být cesta k html souboru
    currencyCode: 'PLN', // Na PayU je pro testování povoleno pouze PLN
    totalAmount: unitPrice,
    products: [
      {
        name: 'Example payment',
        unitPrice: unitPrice,
        quantity: 1
      }
    ],
    buyer: {
      email: 'test@email.com',
      firstName: 'John',
      lastName: 'Doe'
    }
  });

  if (response.status === 'DONE') {
    window.location.href = response.data.redirectTo;
  } else {
    alert('Error during the payment: ' + response.description);
  }
};

sendPayment();

Kompletní kód

<script src="https://cdn.jsdelivr.net/npm/@apicart/core-sdk@1.0.0-alpha7/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@apicart/payments-sdk@1.0.0-alpha7/dist/payments.js"></script>
<script>
  Apicart.setDevEnv();
  const payments = new Apicart.Payments({ token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza' });

  const sendPayment = async () => {
    const variableSymbol = '123';
    const unitPrice = 10 * 100; // Každá částka musí být vynásobena 100. 10 ITEM PRICE * 100 pro získání 10,00

    const response = await payments.pay('pay_u', 'order', variableSymbol, {
      continueUrl: window.location.href, // // zde musí být validní url (např. http://localhost). Nemůže to být cesta k html souboru
      currencyCode: 'PLN', // Na PayU je pro testování povoleno pouze PLN
      totalAmount: unitPrice,
      products: [
        {
          name: 'Example payment',
          unitPrice: unitPrice,
          quantity: 1
        }
      ],
      buyer: {
        email: 'test@email.com',
        firstName: 'John',
        lastName: 'Doe'
      }
    });

    if (response.status === 'DONE') {
      window.location.href = response.data.redirectTo;
    } else {
      alert('Error during the payment: ' + response.description);
    }
  };

  sendPayment();
</script>

Nastavení PayU platební metody

Pokud si zkopírujete kompletní kód výše do souboru index.html mezi tagy <body></body> a otevřete ho v prohlížeči (musíte být alespo na http://localhost, jinak PayU vaše requesty zablokuje) měli byste vidět platební formulář.

Veškeré odeslané platby z tohoto formuláře používají Apicart Sandbox tokeny. Abyste mohli používat svoje tokeny a svou platební bránu, je potřeba si nastavit platební metody u nás v adminu.

Takže si pojďme přidat platební bránu.

 

Vytvořte si e-shop do 5 minut

Zkuste to. Je to zdarma.