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 v sekci níže.
Celý soubor interaktivní ukázky naleznete v repozitáři  Apicart Payments na Githubu.

Kód z interaktivní ukázky

První část kódu je formulář, ze kterého získáváme data do requestu na platební bránu. Je zde pouze pro interaktivitu a data můžete získat odkudkoliv, klidně i z proměnné přímo v javascriptu, přes vaše API apod. 

<form class="payment-form">
  <p class="form-group">
    <label for="price" class="">Price:</label>
    <input type="number" name="price" value="100" min="0" class="form-control" required>
  </p>
  <p class="form-group">
    <label for="firstName" class="">First name:</label>
    <input type="text" name="firstName" class="form-control" required>
  </p>
  <p class="form-group">
    <label for="lastName" class="">Last name:</label>
    <input type="text" name="lastName" class="form-control" required>
  </p>
  <p class="form-group">
    <label for="email" class="">Email:</label>
    <input type="email" name="email" class="form-control" required>
  </p>
  <p><input type="submit" value="Pay now" class="btn btn-primary"></p>
</form>

Abychom mohli komunikovat s API Apicart Payments, je potřeba vložit do stránky potřebné skripty. @apicart/payments-sdk slouží pro komunikaci s API a je závislé na @apicart/core-sdk. Je to z důvodu přístupu ke konfigurátoru, API komunikátoru apod. 

<script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@master/packages/core-sdk/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@master/packages/payments-sdk/dist/payments.js"></script>

Jelikož v této ukázce používáme testovací prostředí, je potřeba to před provedením skriptů nastavit.

Apicart.setDevEnv();

Jako další provedeme inicializaci SDK pro platby. To se provede pomocí vytvoření nového objektu s veřejným tokenem, který naleznete v administraci (o tom ale později).

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

Jakmile je formulář odeslán, zavolá se callback, ve kterém se získají data z formuláže, vloží se do konfigurace budoucího requestu. Tento request se následně odešle k nám na API a mi ho pošleme dál na PayU API. Pokud odpověď ze serveru neobsahuje chyby, je zákazník přesměrován na platební bránu PayU.

const processForm = async (e) => {
  e.preventDefault();
  const formData = new FormData(document.querySelector('form'));
  const currency = 'PLN'; // Na testovacím prostředí PayU povoluje pouze PLN
  const variableSymbol = '123';
  const itemPrice = formData.get('price');
  const unitPrice = itemPrice * 100; // Veškeré částky musí být vynásobeny 100
  let continueUrl = new URL(window.location.href); // Přesměrovávací url odeslaná do PayU, musí být validní. Tedy např. http://localhost Nemůže to být cesta k souboru.
  continueUrl.searchParams.append('orderResult', 'success');

  const response = await payments.pay('pay_u', 'order', variableSymbol, {
    continueUrl: continueUrl.toString(),
    currencyCode: currency,
    totalAmount: unitPrice,
    products: [
      {
        name: 'Example payment',
        unitPrice: unitPrice,
        quantity: 1
      }
    ],
    buyer: {
      email: formData.get('email'),
      firstName: formData.get('firstName'),
      lastName: formData.get('lastName')
    }
  });

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

form.addEventListener('submit', processForm);

Jakmile se stránka načte, zkontroluje se url, zda-li je v ní obsažen parametr orderResult. pokud ano, vyskočí modal ohledně úspešné platby. Pokud je v url parametr error, vyskočí chybová hláška s kódem.

const showPaidModal = () => {
  const actualUrl = new URL(window.location.href);
  const orderResultParameter = actualUrl.searchParams.get('orderResult');
  const errorFromGateway = actualUrl.searchParams.get('error');

  if (errorFromGateway) {
    alert('Your payment could not be processed: error code ' + errorFromGateway + '.');
  } else if (orderResultParameter && orderResultParameter === 'success') {
    alert('Your order was successfully paid.');
  } else {
    return;
  }

  actualUrl.searchParams.delete('error');
  actualUrl.searchParams.delete('orderResult');
  window.history.pushState({}, document.title, actualUrl.toString());
};

showPaidModal();

Kompletní kód ukázky

<form class="payment-form">
  <p class="form-group">
    <label for="price" class="">Price:</label>
    <input type="number" name="price" value="100" min="0" class="form-control" required>
  </p>
  <p class="form-group">
    <label for="firstName" class="">First name:</label>
    <input type="text" name="firstName" class="form-control" required>
  </p>
  <p class="form-group">
    <label for="lastName" class="">Last name:</label>
    <input type="text" name="lastName" class="form-control" required>
  </p>
  <p class="form-group">
    <label for="email" class="">Email:</label>
    <input type="email" name="email" class="form-control" required>
  </p>
  <p><input type="submit" value="Pay now" class="btn btn-primary"></p>
</form>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@master/packages/core-sdk/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@master/packages/payments-sdk/dist/payments.js"></script>
<script>
  Apicart.setDevEnv();
  const payments = new Apicart.Payments({token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza'});
  const form = document.querySelector('.payment-form');

  const processForm = async (e) => {
    e.preventDefault();
    const formData = new FormData(document.querySelector('form'));
    const currency = 'PLN'; // On the PayU testing environment, only PLN is enabled
    const variableSymbol = '123';
    const itemPrice = formData.get('price');
    const unitPrice = itemPrice * 100; // Every price must be mulitplied by 100
    let continueUrl = new URL(window.location.href); // this must be proper url (for example http://localhost). It cannot be a path to a file
    continueUrl.searchParams.append('orderResult', 'success');

    const response = await payments.pay('pay_u', 'order', variableSymbol, {
      continueUrl: continueUrl.toString(),
      currencyCode: currency,
      totalAmount: unitPrice,
      products: [
        {
          name: 'Example payment',
          unitPrice: unitPrice,
          quantity: 1
        }
      ],
      buyer: {
        email: formData.get('email'),
        firstName: formData.get('firstName'),
        lastName: formData.get('lastName')
      }
    });

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

  const showPaidModal = () => {
    const actualUrl = new URL(window.location.href);
    const orderResultParameter = actualUrl.searchParams.get('orderResult');
    const errorFromGateway = actualUrl.searchParams.get('error');

    if (errorFromGateway) {
      alert('Your payment could not be processed: error code ' + errorFromGateway + '.');
    } else if (orderResultParameter && orderResultParameter === 'success') {
      alert('Your order was successfully paid.');
    } else {
      return;
    }

    actualUrl.searchParams.delete('error');
    actualUrl.searchParams.delete('orderResult');
    window.history.pushState({}, document.title, actualUrl.toString());
  };


  showPaidModal();
  form.addEventListener('submit', processForm);
</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.