Embedded payment

With the embedded payment page, Aera's payment form is shown inside your own checkout page. The shopper stays on your site, and the payment fields are served securely by Aera, so your PCI scope stays small.

The embedded payment is thoughtfully optimized for desktop and mobile, here illustrated through the example merchant Grocerease:

How it works

1. Your server creates a payment session with merchantData.ui.
2. Your checkout page shows Aera's payment form.
3. The shopper pays inside your page.
4. If a step can't run inside your page, your page sends the shopper to it (see Steps that leave your page).
5. Aera sends the shopper to your success, cancel or error URL.
6. You confirm the result on your server. See Handle the payment result.

Step 1: Create a payment session with ui

Call Create payment session as for the hosted payment, and add ui to merchantData:

{
  "merchantData": {
    "ui": {
      "mode": "EMBED",
      "origin": "https://shop.example.com"
    },
    "successRedirectUrl": "https://shop.example.com/order/1234/success",
    "cancelRedirectUrl": "https://shop.example.com/order/1234/cancel",
    "errorRedirectUrl": "https://shop.example.com/order/1234/error"
  },
  "transactionData": {
    "merchantReference": "order-1234",
    "amountDetails": { "amount": 10000, "currency": "NOK" }
  }
}

Step 2: Show the form in your page

Show the payment form from the response inside your checkout page.

Steps that leave your page

Some payments need the shopper to do something that can't happen inside an embedded form, because of security restrictions or scheme rules:

• Strong Customer Authentication, such as 3-D Secure
• Approval in another app, such as a wallet or alternative payment method app
• Authentication steps required by the bank or card scheme

Then:

1. Aera sends a postMessage event to your checkout page.
2. Your page listens for the event and sends the shopper (the whole browser window) to the page in the event.
3. When the shopper is done, Aera sends the shopper to your success, cancel or error URL.

Step 3: Confirm the result

Treat the return to your site as a next step, not as proof of payment. Confirm the result on your server with a notification or Get payment status.

Security checklist

• Check that each postMessage event comes from Aera before you act on it.
• Always confirm the payment on your server.