Connect with Atome

In this article :

Introduction
Integrate with Atome
Display installment via Atome at product page

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 currency only
Regarding the transaction fee, kindly consult support@atome.my as the rates vary.

2. Integrate with Atome

Step 1 : Go to EasyStore Admin > Settings > Payments > Add payment method > select Atome



Step 2: Fill in the Display name and fill in the Description which will be shown to customers at checkout.

📌 Note :
Don't forget to insert your API Key & Password ( provided by Atome )
Make sure 'Atome is now enabled' is selected.



Step 3: Complete the payment settings > Save

3. Display installment via Atome at product list & product pages

📌 Note: This steps require to edit Product-card.Liquid that found in the theme come after Candy theme, example: Aroma, FreshBit, and Mashmallow, may refer here for more themes.

Step 1 - product list page:
Go to Admin > Channels > Online Store > Themes > Edit source > snippet > open file product-card.liquid > search for include 'price' > paste the following code below as per screenshot.

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

Result:



*Step 2 - product page:

Step 2.1 - Go to Admin > Channels > Online Store > Themes > Edit source > section > open file main-product.liquid > search for include 'price' > paste the following code below as per screenshot.

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

Step 2.2 - At the same file main-product.liquid > search for "is_variants_initial = true" > paste the following code below as per screenshot.

document.querySelector("#atome-price-display .money").innerHTML = EasyStore.Currencies.formatMoney((variant.price / 3));

Result:





You may send an email to support@atome.my for further clarifications regarding your Atome account!

Updated on: 08/03/2024