Connect with Atome

1. Introduction

Atome is pronounced as "A-Toe-Me" and stands for "Available to Me" is a buy now pay later payment gateway that provides installment payment to your customers without any interest fees. You will receive the full amount upon customer purchase, whereas your customers can pay the amount in the span of 3 months' time.

Registered an account with Atome here. The Atome team will reach out to you as soon as the form is filled. Sign the agreement and you will get the API Key and Password to proceed with the integration.

📌 Important Note :

Customers need to install the Atome app and register for an Atome account in order to make payment.
Customers can download the Atome app through this link here as Atome requires confirmation from the customers through the app.
Support MYR, SGD, TWD & HKD currencies only
Regarding the transaction fee, kindly consult support@atome.my as the rates vary.

2. Connect Atome account

2.1 Go to EasyStore Admin > Settings > Payments > Add payment method > select Atome.

2.2 Fill up Payment Details section:

Display name
Description
ApiKey & Password ( provided by Atome )
select Atome is now enabled

2.3 Scroll to bottom and click Add sub payment method.

2.4 Tick the payment method following currency that supported by your Atome account > Save.

2.5 If you'd like to charge customer for transaction fee if they pay with Atome, you can click the edit icon to add > Save and done.

3. Add Atome price display on collection page

Go to Channels > Online Store > Themes > Edit source > snippet/product-card.liquid > search for include 'price' around row 66 > paste the following codes below it as per screenshot > Save.

{% if shop.selected_currency == "MYR" %} <div style="font-size:18px; text-align:left; color:black;"> {{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg" width="80"></div> {% endif %}

4. Add Atome price display on product page

Now go to section/main-product.liquid, there are 2 steps you need to perform in this file.

Search for include 'price' around row 79 > paste the following codes below it as per screenshot > Save.

{% if shop.selected_currency == "MYR" %} <div id="atome-price-display" style="font-size:18px; text-align:left; color:black;"> {{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg" width="80"></div> {% endif %}

At the same file main-product.liquid > search for is_variants_initial = true > paste the following codes below it as per screenshot > Save.

{% if shop.selected_currency == "MYR" %} document.querySelector("#atome-price-display .money").innerHTML = EasyStore.Currencies.formatMoney((variant.price / 3)); {% endif %}

5. Add Atome price display on collection & product page (Wave, LUCKY, Candy, X-FORCE themes)

5.1 Find /assets/timber.js file > search for keyword Regardless of stock to get to around line 195 > copy and paste the code below the area as shown.

//START Atome Snippet /assets/timber.js
$("#atome-price-display .money").html(EasyStore.formatMoney((variant.price / 3)));
//END Atome Snippet /assets/timber.js

5.2 Find /template/product.liquid file > search for keyword ComparePricePercent to get to around line 81 > copy and paste the code below the area as shown

<!-- START Atome Snippet /template/product.liquid 
   {% if shop.selected_currency == "MYR" %}
       <div id="atome-price-display" style="font-size:18px; text-align:left; color:black;">{{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="<https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg>" width="80"></div>
   {% endif %}
<!-- END Atome Snippet /template/product.liquid -->

5.3 Find /snippets/product-grid-item.liquid file > search for keyword product_middle to get to around line 72 > copy and paste the code below the area as shown, after the second {% endif %}

<!--START Atome Snippet /snippets/product-grid-item.liquid
   {% if shop.selected_currency == "MYR" %} 
	   <div style="font-size:18px; text-align:center; color:black;"> {{ product.price | divided_by: 3 | money: shop.money_format }} with 3 installments via <img border="0" class="no-watermark" src="<https://gateway.apaylater.com/plugins/common/assets/svg/logo.svg>" width="80"></div>
	 {% endif %}
<!--END Atome Snippet /snippets/product-grid-item.liquid-->

6. Display Atome price for other currencies

In step 3 & 4 above, you can change the currency to display Atome price:

5.1 If you'd like to display Atome price for a different currency, you can change the MYR in the codes to the currency you want.

5.2 If you'd like to display Atome price for all currencies you have set up in store, you can:

Remove {% if shop.selected_currency == "MYR" %} at the beginning of the codes
Remove {% endif %} at the end of the codes

Updated on: 07/11/2025

Was this article helpful?

Thank you!