Installation

First you have to sign up. Registration is done on the testing environment and is for free. For production purposes, sign up on the production environment.

This example also uses PayU payment gateway. But you can configure any gateway you want such as Adyen, Braintree or Stripe.

When you finish your registration, create an index.html file and copy&paste the complete code under the interactive example below into it. The working example with the form can be found in the Apicart Payments Github repository.

How it works

First all, we have to import the Apicart Payment dependency among with the Apicart Core dependency

<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>

Then we switch the Apicart environment to dev.

Apicart.setDevEnv();

Before sending the first payment, we need to initialize the Apicart Payments.

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

Now we can send the first payment using a simple function.

const sendPayment = async () => {
  const variableSymbol = '123';
  const unitPrice = 10 * 100; // Every price must be mulitplied by 100. 10 ITEM PRICE * 100 to get 10,00

  const response = await payments.pay('pay_u', 'order', variableSymbol, {
    continueUrl: window.location.href, // this must be proper url (for example http://localhost). It cannot be a path to a file
    currencyCode: 'PLN', // On the PayU testing environment, only PLN is enabled
    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();

Complete code

<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; // Every price must be mulitplied by 100. 10 ITEM PRICE * 100 to get 10,00

    const response = await payments.pay('pay_u', 'order', variableSymbol, {
      continueUrl: window.location.href, // this must be proper url (for example http://localhost). It cannot be a path to a file
      currencyCode: 'PLN', // On the PayU testing environment, only PLN is enabled
      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>

Configuring PayU payment method

If you copy the complete code above into the index.html and open it in the browser (you must be at least on http://localhost, otherwise the PayU will block your payment requests) you should see the payment form.

Any payment you send using that form will use the Apicart Sandbox tokens. In order to use your own tokens and see your own statistics in PayU administration, you have configure the payment methods.

So lets add your first payment gateway!

Create E-commerce in 5 minutes

Try it. It is for free.