Aurora Elements

Aurora Elements is a drop-in JavaScript library that embeds PCI-compliant payment fields directly into your checkout page. It lets you collect card details without sensitive data ever touching your servers.

Aurora Elements renders secure, isolated payment input fields, such as card number, expiry, and CVV, inside your page by iframes managed by the arise.js library. This means:

PCI-DSS compliance. Card data is captured and transmitted through Aurora's secure infrastructure, not your servers.
Full styling control. Customize fonts, colors, borders, and layout to match your branding.
Two submission flows. Redirect the customer after payment, or handle the result inline with a callback.

Using Aurora Elements

The integration with Aurora Elements has three parts:

Loading the Aurora.js library
Mounting the Payment form
Confirming the Payment.

Backend process calls are needed to create a payment session and retrieve the result.

Loading the Aurora.js library

Add the script tag to your checkout page:

Sandbox Environment:

<head>
  <script src="https://public.uat.arise.risewithaurora.com/lib/v1.0/arise.mjs" type="module"></script>
</head>

Production Environment:

<head>
  <script src="https://public.arise.risewithaurora.com/lib/v1.0/arise.mjs" type="module"></script>
</head>

Adding a Mount Point

Add a container element and a submit button to your page body:

<div id="arise-payment-form"></div>
<button id="arise-payment-submit-btn">Pay</button>

Aurora Elements will render the payment fields inside the #arise-payment-form container.

Creating a Payment Session (backend process)

Your backend process must create a payment session with the amount to charge.

Sandbox Environment:

POST https://api.uat.arise.risewithaurora.com/pay-int-api/payment-sessions`

Production Environment:

POST https://api.arise.risewithaurora.com/pay-int-api/payment-sessions`

info

An API Token is needed before creating a payment session. For more information about creating an API Token, see Creating An API Token in the API reference guide.

The following is a sample request for the sandbox environment.

curl -X POST 'https://api.uat.arise.risewithaurora.com/pay-int-api/payment-sessions' \
  -H 'Accept: application/json' \
  -H 'Authorization: Bearer ACCESS_TOKEN \
  -H 'Content-Type: application/json' \
  -d '{ "amount": 129.50 }'

The following is a sample response from the previous call.

{
  "id": "0cdddcb6-fa98-4c46-b096-a2723b56c750"
}

This returns a session identifier (the id field) that the frontend process uses to initialize the form.

Mounting the Payment Form (frontend process)

Pass the session identifier (the id field) to Aurora Elements and mount the payment component.

const arise = new window.Arise();

const components = arise.components({
  sessionId: 'SESSION_ID', // From your backend process.
  appearance: {},          // Optional — see Customization below.
});

const paymentComponent = components.create('payment');

paymentComponent.mount({
  component: 'arise-payment-form', // matches the container element id
});

Confirming the Payment

Attach a click handler to your submit button. You can choose between two flows: Redirect flow or the Callback flow

Redirect Flow

The customer is redirected to your return_url after the payment interaction completes. Aurora appends arise_session_id as a query parameter so your backend process can look up the result.

const submitButton = document.getElementById('arise-payment-submit-btn');

submitButton.addEventListener('click', () => {
  arise.confirmPayment({
    confirmParams: {
      return_url: 'https://example.com/checkout/result',
      error_callback: (message) => {
        // Optional — show error to the customer
      },
    },
  });
});

Example redirect URL:

https://example.com/checkout/result?arise_session_id=550e8400-e29b-41d4-a716-446655440000

Callback Flow

Handle the result inline without redirecting the customer:

submitButton.addEventListener('click', () => {
  arise.confirmPayment({
    confirmParams: {
      submission_callback: () => {
        // Payment interaction complete.
        // Call your backend process to `GET /pay-int-api/payment-sessions/{arise_session_id`}
        // to retrieve the transaction result.
      },
      error_callback: (message, code) => {
        alert(message);
        // Generate a new session ID from your backend process and update:
        arise.updateSessionId(newSessionId);
      },
    },
  });
});

Retrieving the Payment Result (backend process)

Always retrieve the payment result from your backend process. Never trust the frontend process for payment status, as it can be spoofed.

After the customer completes the payment interaction, your backend process must call the Payment Session endpoint to get the actual result. This will one of the following results: APPROVED, DECLINED, or ERROR).

GET /pay-int-api/payment-sessions/{arise_session_id}

Error handling

When a payment submission fails (a result of ERROR), the error_callback receives a message and a numeric code.one. For error codes 3 and 4, the session is consumed and cannot be reused. Generate a new session identifier from the backend process and call arise.updateSessionId(newSessionId) to retry.

Code	Message	Meaning
1	Something went wrong, please check payment details and try again.	Payment was not submitted due to a validation error such as invalid BIN (Card Number). Session remains opened for new payment tentatives.
2	An integration problem has been detected. Please contact the administrator.	Integration or server-side error. Session stays open for retry.
3	Something went wrong, please check the Payment Session ID and try again.	Invalid or expired session ID. Generate a new one.
4	The payment could not be completed. Please check payment details and try again.	Transaction declined (e.g. insufficient funds, incorrect CVV). Generate a new session ID to retry.

Customizating the Appearance

Aurora Elements supports custom theming through the appearance option. The cardholder fields follow the same theming and styling rules as the rest of the payment form. Any custom appearance settings apply to the new fields automatically. Pass CSS properties when initializing components to match your brand:

const components = arise.components({
  sessionId: sessionId,
  appearance: {
    elements: {
      formBackgroundColor: '#e1e9eb',
      fontFamily: 'Verdana, sans-serif',
      fontSizeBase: '16px',
      labelColor: '#107b92',
      labelAsteriskColor: 'blue',
      inputTextColor: '#107b92',
      inputBorder: 'none',
      inputBackgroundColor: '#c8d6d9',
      inputBorderRadius: '6px',
      inputFocusedBottomBorderColor: '#107b92',
      inputErrorBackgroundColor: '#ecc9c9',
      errorFontSize: '14px',
      errorColor: '#cd2424',
    },
  },
});

Available appearance properties:

Property	Description
formBackgroundColor	Background color of the payment form container.
fontFamily	Font family for all text elements.
fontSizeBase	Base font size for input fields
labelColor	Color of field labels.
labelAsteriskColor	Color of the required field asterisk.
inputTextColor	Color of text inside input fields.
inputBorder	Border style for input fields.
inputBackgroundColor	Background color of input fields.
inputBorderRadius	Border radius of input fields.
inputFocusedBottomBorderColor	Bottom border color when an input is focused.
inputErrorBackgroundColor	Background color of input fields in an error state.
errorFontSize	Font size for error messages.
errorColor	Color of error message text.

Using Aurora Elements

Loading the Aurora.js library​

Adding a Mount Point​

Creating a Payment Session (backend process)​

Mounting the Payment Form (frontend process)​

Confirming the Payment​

Redirect Flow​

Callback Flow​

Retrieving the Payment Result (backend process)​