Atome App Redirection

Accept online payments from Atome users through your website using the Atome payment method.

This guide walks you through the payment flow and details on how to implement.

How to enable

• Supported Countries: Singapore, Malaysia
• Minimum API version: 2017-11-02

To enable Atome, send an email requesting this feature to support@opn.ooo. You will need to review and accept new terms and conditions.

Payment flow

Atome supports payment on desktop and mobile website. Customers paying via Atome go through a redirect payment flow. This means they are redirected from your website to Atome’s secure checkout page where they authorize and confirm the payment. The following screenshots demonstrate the flow throughout the journey.

Payment via desktop

❶ The customer chooses to pay with Atome ❷ and gets redirected to Atome's secure checkout page. ❸ The customer opens the Atome app on their phone and scans the QR on the payment page with their app. ❹ Then, the customer is presented with the installment plan and confirms the payment. ❺ After the payment is complete, the customer will be automatically redirected to the merchant's payment confirmation page.

Payment via mobile (payment via browser)

❶ The customer chooses to pay with Atome ❷ and gets redirected to Atome's secure checkout page. ❸ The customer clicks to pay in the browser. ❹ The customer will be presented with a login form. ❺ After the customer is logged in, they will be presented with the installment plan. ❻ The customer confirms the payment and will be automatically redirected to the merchant's payment confirmation page.

Payment via mobile (payment via app)

❶ The customer chooses to pay with Atome ❷ and gets redirected to Atome's secure checkout page. ❸ The customer clicks to pay using app. ❹ The customer will be redirected to their app and presented with the installment plan. ❺ The customer confirms the payment and will be automatically redirected to the merchant's payment confirmation page.

Implementation

To create a charge using Atome, make the following API requests.

1. Create a new payment source (type: atome) using Omise.js or one of the mobile SDKs (iOS and Android)
2. Create a new charge using the identifier of the source created in Step 1.
3. After receiving the charge completion webhook event, retrieve the charge to verify its status (optional, but recommended).

Use your public key to create the Atome source on the client (a customer's browser or mobile phone). Use your secret key to create the Atome charge on the server.

If both the creation and charge of a source must happen server-side, you can create and charge the source in a single API request using your secret key.

Creating a source

When the customer confirms that they wish to pay with this payment method, create a new source specifying the amount, currency, items, phone_number, shipping, and type.

The following examples demonstrate the creation of a new Atome source for ฿500. Replace the omise_public_key and $OMISE_PUBLIC_KEY variables with the test public key found on your dashboard.

Using Omise.js, the type parameter is supplied as the first argument to the createSource method.

Omise.setPublicKey(omise_public_key);

Omise.createSource('atome', {
  "amount": 50000,
  "currency": "SGD",
  "phone_number": "+66876543210",
  "shipping":
    {
      "street1": "1448/4 Praditmanutham Road",
      "postal_code": "10320",
      "country": "th"
    },
  "items":
    [
      {
        "sku": "AAA111",
        "name": "water bottle",
        "amount": "25000",
        "quantity: "2"
      }
    ],
}, function(statusCode, response) {
  console.log(response)
});

For testing, you can create the same request using curl.

curl https://api.omise.co/sources \
  -u $OMISE_PUBLIC_KEY: \
  -d "amount=50000" \
  -d "currency=SGD" \
  -d "type=atome" \
  --data-urlencode "phone_number=+66876543210" \
  -d "shipping[postal_code]=10320" \
  -d "shipping[country]=TH" \
  -d "shipping[street1]=1448/4 Praditmanutham Road" \
  -d "items[0][sku]=AAA111" \
  -d "items[0][name]=water bottle" \
  -d "items[0][quantity]=2" \
  -d "items[0][amount]=25000"

{
  "object": "source",
  "id": "src_5v7a8umzp29poify6gn",
  "livemode": true,
  "location": "/sources/src_5v7a8umzp29poify6gn",
  "amount": 50000,
  "barcode": null,
  "bank": null,
  "created_at": "2023-03-23T04:07:14Z",
  "currency": "SGD",
  "email": null,
  "flow": "redirect",
  "installment_term": null,
  "absorption_type": null,
  "name": null,
  "mobile_number": "+66876543210",
  "phone_number": "+66876543210",
  "platform_type": null,
  "scannable_code": null,
  "billing": null,
  "shipping": {
    "city": null,
    "country": "TH",
    "postal_code": "10320",
    "state": null,
    "street1": "1448/4 Praditmanutham Road",
    "street2": null
  },
  "items": [
    {
      "sku": "AAA111",
      "name": "water bottle",
      "brand": null,
      "category": null,
      "amount": 25000,
      "quantity": 2,
      "item_uri": null,
      "image_uri": null
    }
  ],
  "references": null,
  "store_id": null,
  "store_name": null,
  "terminal_id": null,
  "type": "atome",
  "zero_interest_installments": null,
  "charge_status": "unknown",
  "receipt_amount": null,
  "discounts": []
}

The id attribute is the source identifier (begins with src).

Creating a charge

Create a charge specifying the parameters return_uri, source, amount, and currency.

• return_uri specifies the location on your website to which the customer should be redirected after completing the payment authorization step.

  URL must be in HTTPS format.

• source specifies the source identifier.

• amount and currency must match amount and currency of the source.

The following example demonstrates how to create a new charge using curl. Replace $OMISE_SECRET_KEY with your test secret key found on your dashboard. Replace $SOURCE_ID with the id of the source.

curl https://api.omise.co/charges \
  -u $OMISE_SECRET_KEY: \
  -d "amount=50000" \
  -d "currency=SGD" \
  -d "return_uri=http://example.com/orders/345678/complete" \
  -d "source=$SOURCE_ID"

{
  "object": "charge",
  "id": "chrg_5v7a8urck64ecqyji1e",
  "location": "/charges/chrg_5v7a8urck64ecqyji1e",
  "amount": 50000,
  "net": 49411,
  "fee": 550,
  "fee_vat": 39,
  "interest": 0,
  "interest_vat": 0,
  "funding_amount": 50000,
  "refunded_amount": 0,
  "transaction_fees": {
    "fee_flat": "0.0",
    "fee_rate": "1.1",
    "vat_rate": "7.0"
  },
  "platform_fee": {
    "fixed": null,
    "amount": null,
    "percentage": null
  },
  "currency": "SGD",
  "funding_currency": "SGD",
  "ip": null,
  "refunds": {
    "object": "list",
    "data": [],
    "limit": 20,
    "offset": 0,
    "total": 0,
    "location": "/charges/chrg_5v7a8urck64ecqyji1e/refunds",
    "order": "chronological",
    "from": "1970-01-01T00:00:00Z",
    "to": "2023-03-23T04:07:15Z"
  },
  "link": null,
  "description": null,
  "metadata": {},
  "card": null,
  "source": {
    "object": "source",
    "id": "src_5v7a8uanfqy6s7yfmt6",
    "livemode": true,
    "location": "/sources/src_5v7a8uanfqy6s7yfmt6",
    "amount": 50000,
    "barcode": null,
    "bank": null,
    "created_at": "2023-03-23T04:07:12Z",
    "currency": "SGD",
    "email": null,
    "flow": "redirect",
    "installment_term": null,
    "absorption_type": null,
    "name": null,
    "mobile_number": "+66876543210",
    "phone_number": "+66876543210",
    "platform_type": null,
    "scannable_code": null,
    "billing": null,
    "shipping": {
      "city": null,
      "country": "th",
      "postal_code": "10320",
      "state": null,
      "street1": "1448/4 Praditmanutham Road",
      "street2": null
    },
    "items": [
      {
        "sku": "AAA111",
        "name": "water bottle",
        "brand": null,
        "category": null,
        "amount": 25000,
        "quantity": 2,
        "item_uri": null,
        "image_uri": null
      }
    ],
    "references": null,
    "store_id": null,
    "store_name": null,
    "terminal_id": null,
    "type": "atome",
    "zero_interest_installments": null,
    "charge_status": "pending",
    "receipt_amount": null,
    "discounts": []
  },
  "schedule": null,
  "customer": null,
  "dispute": null,
  "transaction": null,
  "failure_code": null,
  "failure_message": null,
  "status": "pending",
  "authorize_uri": "https://pay.omise.co/payments/pay2_5v7a8urmpex86s4gzuk/authorize",
  "return_uri": "http://example.com/orders/345678/complete",
  "created_at": "2023-03-23T04:07:14Z",
  "paid_at": null,
  "expires_at": "2023-03-23T16:07:15Z",
  "expired_at": null,
  "reversed_at": null,
  "zero_interest_installments": false,
  "branch": null,
  "terminal": null,
  "device": null,
  "authorized": false,
  "capturable": false,
  "capture": true,
  "disputable": false,
  "livemode": true,
  "refundable": false,
  "reversed": false,
  "reversible": false,
  "voided": false,
  "paid": false,
  "expired": false
}

Creating a source and charge

Alternatively, you can create and charge a source in a single API request.

curl https://api.omise.co/charges \
  -u $OMISE_SECRET_KEY: \
  -d "amount=50000" \
  -d "currency=SGD" \
  -d "return_uri=http://example.com/orders/345678/complete" \
  -d "source[type]=atome" \
  --data-urlencode "source[phone_number]=+66876543210" \
  -d "source[shipping][postal_code]=10320" \
  -d "source[shipping][country]=th" \
  -d "source[shipping][street1]=1448/4 Praditmanutham Road" \
  -d "source[items][0][sku]=AAA111" \
  -d "source[items][0][name]=water bottle" \
  -d "source[items][0][quantity]=2" \
  -d "source[items][0][amount]=25000"

Setting the charge to expire

By default, the charge expires 12 hours after creation.

You can assign different expiration periods to each charge by entering a timestamp between 30 seconds and 12 hours from the current time in the expires_at field of the Charge API. If the timestamp is entered correctly, the charge will expire at the designated time instead of the default period.

After the charge is created, you can also manually call our Expire API to expire a pending charge.

curl https://api.omise.co/charges \
  -u $OMISE_SECRET_KEY: \
  -d "amount=50000" \
  -d "currency=SGD" \
  -d "source[type]=atome" \
  --data-urlencode "source[phone_number]=+66876543210" \
  -d "source[shipping][postal_code]=10320" \
  -d "source[shipping][country]=TH" \
  -d "source[shipping][street1]=1448/4 Praditmanutham Road" \
  -d "source[items][0][sku]=AAA111" \
  -d "source[items][0][name]=water bottle" \
  -d "source[items][0][quantity]=2" \
  -d "source[items][0][amount]=25000" \
  -d "expires_at=2020-12-17T00:00:00Z"

Completing the charge

At this point, you have created a new charge with its status set to pending. Other possible values for charge status are successful, failed, and expired.

The following sections detail how to authorize a charge, receive its completion webhook event, and update its status.

This sequence diagram shows the entire flow.

Authorizing the charge

Redirect the customer to location specified in authorize_uri so that they can authorize the charge.

You can simulate this authorization phase in test mode by visiting the authorize_uri to manually mark the charge as Successful or Failed. After the customer has completed the authorization phase, they will be redirected to the location you specified in return_uri.

Receiving the charge completion event

The best way for you to be notified of the completion of a charge is using webhook events. Set up a location on your server to receive webhook events, and add this location as a webhook endpoint on the dashboard.

Once a charge is completed, a POST request will be sent to this endpoint with the charge response embedded.

The key attribute for the event object contains charge.complete and the data attribute contains the charge object. See Events API for event object structure.

Checking the charge status

After receiving this event, retrieve the charge using its id and confirm that its status matches the status of the charge contained in the event.

If the value of status is successful, you got paid. If the value of status is failed, check the failure_code and failure_message in the charge object for an explanation.

Possible failure codes are listed below.

Voids and refunds

Atome charges can be partially or fully refunded within 60 days of the transaction date.

Limits

• Minimum: 1000 (MYR 10.00)
• Maximum: 500000 (MYR 5,000.00)

Next steps

• Charge API
• Source API
• Webhooks API