Get started

Who are Ecster?

Ecster offers companies the opportunity to accept payments and acquire satisfied returning customers, regardless of where the transactions take place. For consumers, we can offer good buying experiences, increased flexibility and better control of day-to-day finances. Read more at ecster.se

How do I implement Ecster Pay? 

Ecster Pay is easy to implement. Below is a summary of the steps you need in order to complete a simple integration.

  1. Get access – A test account is required to be able to access the Ecster API.
  2. Create cart – Create a cart in Ecster Pay via the REST API.
  3. Prepare your checkout page – You need to create a placeholder for Ecster Pay as well as reference our JavaScript library in the store's checkout page.
  4. Initiate Ecster Pay – You need to execute a JavaScript function in order to start Ecster Pay.

There are two ways to implement Ecster Pay in your e-commerce site: integrated or external. Either Ecster Pay is integrated within an iframe on your store checkout page, or Ecster Pay takes over the browser window to allow the customer to complete the purchase.

Benefits of integrated Ecster Pay

  • The customer won’t leave your site.
  • The customer can modify the cart after Ecster Pay is started.
  • The customer can change delivery method after Ecster Pay is started.
  • The order confirmation page can be shown either on your own site or in Ecster Pay. 
  • If your delivery methods depend on the customer address, Ecster Pay can send the customer address to your site, e.g. the customer might provide this information in the Ecster Pay frame.

Benefits of external Ecster Pay

  • Easier implementation.

Limitations of external Ecster Pay

  • The customer will leave your site.
  • Cart cannot be modified after Ecster Pay has started.
  • Delivery method cannot be changed after Ecster Pay is started.
  • No callback functions to send information during the checkout process – only send information via OSN.

Get access

You need to create an account in Ecster Pay in order to identify your e-commerce site. This will also allow you to access our REST API which is mandatory to complete your integration.

CREATE TEST ACCOUNT

Create cart

To use Ecster Pay you need to create an cart. You do this by executing the REST API function Create cart. The function will return a key to the created cart.

Every REST API call requires you to send authorization headers, i.e. your API credentials. You should always execute REST API calls through your site’s backend.

When you execute the call, you need to send some mandatory information:

  • Localization – language and country
  • Cart – all cart items in the shopping cart
  • Delivery method - if send in as an own object

To see all mandatory and optional parameters, refer to Create cart in the API reference.

Execute Create cart when the customer enters the store checkout page and send the returned cart key to your frontend. The cart key is used to render Ecster Pay on your checkout page.

Below is an example on how to execute Create cart without any third-party dependencies.

private async Task<EcsterResponse<CartKeyResponse>> CreateCart(CartRequest request)
{
    var httpClient = new HttpClient();
    httpClient.BaseAddress = new Uri("https://labs.ecster.se/rest/"); // must have trailing slash
    httpClient.DefaultRequestHeaders.Add("X-Ecster-origin", "checkout");
    httpClient.DefaultRequestHeaders.Add("X-Ecster-username", "<username>"); // replace <username>
    httpClient.DefaultRequestHeaders.Add("X-Ecster-password", "<password>"); // replace <password>

    var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
    var jsonMediaTypeFormatter = new JsonMediaTypeFormatter { SerializerSettings = jsonSerializerSettings };
    var response = await httpClient.PostAsync("eps/v1/cart", request, jsonMediaTypeFormatter); //must have leading slash
    var content = await response.Content.ReadAsStringAsync();
    return JsonConvert.DeserializeObject<EcsterResponse<CartKeyResponse>>(content);
}

Prepare your store checkout page

Start by creating a div-element that serves as a container where Ecster Pay is loaded.

You also need to reference the Ecster Pay JavaScript library in order to access mandatory functions to be able to initiate Ecster Pay.

<div id="ecster-pay-ctr"></div>
...
<script src="https://secure.ecster.se/pay/integration/ecster-pay.js"></script>

Initiate Ecster Pay

You now have an cart key, a placeholder and have referenced the JavaScript library. It is now time to actually show Ecster Pay. This is really simple as the example below shows.

EcsterPay.start({
    orderReference: cartKey, // from create cart REST call
    shopTermsUrl: urlToShopTerms
});

The described function exposes a lot of parameters not shown in the example. Refer to EcsterPay.start() in the API reference for more information.

Done

These are all the steps you need in order to make a really simple implementation of Ecster Pay. Now you can start testing the integration by putting an item in the cart and go to the store checkout page. You should now be able to see Ecster Pay.

Request test account