First minimal payment

This tutorial will help you integrate Axerve E-commerce Solutions and process your first payment. Before you begin, make sure you have properly configured your merchant’s profile. You can find more information on how to configure the profile here.

Payment type

Axerve E-commerce Solutions can be integrated on your website in two different ways:

The first part of this tutorial is the same for both purposes.

Have a REST

Before you can actually redirect the user to Axerve E-commerce Solutions, you must do a POST to payment/create to initiate the payment process. Click on the link to see the API.

Remember: payment/create and payment/submit MUST be used in every transaction to create and process the payment. The only case where you don’t need to call payment/submit is when the payment is performed from an alternative payment method.

There are two endpoints available, test and production:

POST https://sandbox.gestpay.net/api/v1/payment/create/
POST https://ecomms2s.sella.it/api/v1/payment/create/

Let’s go back to your application. Everything starts with a POST call to the payment/create, asking Axerve E-commerce Solutions to process a payment. Set the authorization headers:

Authorization: apikey R0VTUEFZNjU5ODcjI0VzZXJjZW50ZSBUZX....
Content-Type: application/json

Every POST call must have the Content-type: application/json header.

and the body:

{  
  "shopLogin":"GESPAY65987",
  "amount":"27.30",
  "currency":"EUR",
  "shopTransactionID":"your-custom-id"
}

Axerve E-commerce Solutions will answer with:

{
  "error": {
    "code": "0", // everything ok!
    "description": "request correctly processed"
  },
  "payload": {
    "paymentToken": "1c3f27af-1997-4761-8673-b94fbe508f31",
    "paymentID": "1081814508",
    "userRedirect": {
      "href": null
    }
  }
}

With the paymentToken (1c3f27af-1997-4761-8673-b94fbe508f31) and the paymentID (1081814508) you can now redirect the user to the payment page.

Now you have to choose which payment page you want to use. If you want to use the Lightbox solution keep reading, otherwise jump to the following section: using your customized payment page.

Using the Lightbox solution (BETA)

If you don’t need to customize the payment process, Axerve E-commerce Solutions lightbox is the best and fastest way to accept payments. It is responsive, meaning that it will work on every screen (mobile, desktop…) without hassles and it is very easy to integrate, too.

First, import the js script in your payment page:

Then you must initilizate the shopLogin and use the PaymentToken and the PaymentID received at the preceeding step (payment/create) and, in javascript, call:

axerve.lightBox.shop = shopLogin;
axerve.lightBox.open(paymentID, paymentToken);

The lightbox page will show up, asking the customer for credit card information. For the sandbox environment, use one of our test credit cards.

When the payment is completed, the lightbox redirects you to the endpoint set in the backoffice.

It’s possible to overwrite the redirect functionality by passing a callback to the lightbox.

axerve.lightBox.open(paymentID, paymentToken, callback);

When the payment is completed, the callback function is called. It receives a response object as argument:

function callback(response) {
  console.log(response); 
}
/* example response:  
{ 
  error: { 
    code: null,
    description: null
  }, 
  paymentId: "1100274624", 
  responseURL: " http://<your-server>/?a=GESPAY65987&Status=OK&paymentID=1100274624",
  status: "OK"
}
*/

As you can see, the payment has been successfully processed, but what is the responseURL? Once a payment is accepted or rejected, you can redirect your user to a new page. By setting up this configuration in the Merchant Back-Office Axerve E-commerce Solutions will provide you with a link containing three parameters:

That’s it! Enjoy your first transaction.

Using your customized payment page

You can also customize every part of the payment process and design the form the way you want. This means you can handle everything in the same style of your website.

Assuming you have already made a POST to payment/create, the next step is to design an HTML form that will contain the credit card data: number, expiration date, cvv.

Then, once you have designed it, you must do a POST on payment/submit with the credit card data and the paymentToken generated by payment/create:

fetch('https://sandbox.gestpay.net/api/v1/payment/submit/',
    {
      method: 'POST',
      headers: {
        'paymentToken': `${PAYMENT_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "buyer":{
          "email":"test@email.com",
          "name":"Test Payment"
          },
        "paymentTypeDetails": {
          "creditcard": {
            "number":"4012001037141112",
            "expMonth":"05",
            "expYear":"27",
            "CVV":"444",
            "DCC":null
          }
        },
        "shopLogin":"GESPAY65987"
        }
      })
    }
  )

POST payment/submit allows the user to pay with many other payment systems other than the credit card. For a full list, check the API.

At this point two things can happen:

The credit card is not 3D-Secure

In this case, the card does not require any special authorization and the response to POST payment/submit will be something like:

{
  "error":{
    "code":"0",
    "description":"request correctly processed"
  },
  "payload":{
    "transactionType":"submit",
    "transactionResult":"OK",
    ...
    "paymentID":"1700444660",
    "userRedirect":{
      "href":"https://hype-app.github.io/gestpay-doc-beta/demo/response.html"
    }
  }
}

Now you can redirect the user to userRedirect.href, that will be populated based on your configuration in the Merchant Back-Office or your custom ones passed to POST payment/submit.

The credit card is 3D-Secure

If the credit card is 3D-Secure, we need to perform another step to complete the payment. Axerve E-commerce Solutions will answer with the transactionErrorCode 8006, that requires you to authenticate the card against the bank issuer:

{
  "error":{
    "code":"0",
    "description":"request correctly processed"
  },
  "payload":{
    "transactionType":"submit",
    "transactionResult":"",
    "transactionErrorCode":"8006",
    "transactionErrorDescription":"Verify By Visa",
    "paymentID":"1546124641",
    ...
    "userRedirect":{
      "href":"https://sandbox.gestpay.net/pagam/pagam3d.aspx?a=GESPAY65987&b=40cd411e-39a3-430f-b964-cb2018cd51a2&axerve3D=True"
    }
  }
}

To complete the payment process, redirect the user to userRedirect.href and complete the payment process. Once it’s finished, you’ll be redirected to the success url page, as configured in the Merchant Back-Office.

Conclusions

In this tutorial, we have seen how easy it is to integrate Axerve E-commerce Solutions in your payment flow.

There’s much more! Axerve E-commerce Solutions allows you to pay with alternative payment methods and with different security checks, and offers an API to automate many operations of your E-commerce.

Keep reading the docs!