Argonautas

English

Español
Français
Português

English

Español
Français
Português

Appearance

Branded Payment Pages ​

When you send a payment link to a guest, the page they land on can be made to feel like an extension of your own brand instead of a generic billing screen. Branding works in two ways:

  • The hosted payment page -- your logo and colors are applied to the page Argonautas serves at app.argonautas.pro/pay/....
  • Your own website -- if you have a custom site, it can fetch the payment data through an API and render its own page, with checkout posting back to Argonautas.

Both modes use the same payment link, so the choice is per company, not per link.

Brand colors and your company logo are taken from Settings > Branding. They drive:

  • The color of buttons and accents on the hosted payment page.
  • The header logo on the payment page and on confirmation emails.
  • The colors used in the owner portal and any guest-portal communications.

Update these once and the change applies everywhere your brand appears.

Step 2: Add a Stylesheet (Optional) ​

If brand colors aren't enough -- you want custom fonts, layout adjustments, or a more elaborate visual identity -- you can host a CSS file on your own site and point Argonautas to it.

  1. Publish a stylesheet on your own domain. Common path is https://yourdomain.com/payment-page.css.
  2. Open Settings > Branding > Public Website.
  3. Enter the full URL in Payment page CSS URL. The URL must live on the same domain you have set as your Public website URL -- this prevents accidental or malicious cross-domain styling.
  4. Save.

When a guest opens a payment link, Argonautas adds a branded class to the page body and includes a <link> tag pointing to your CSS. You can target body.branded in your stylesheet to scope your overrides cleanly:

css
body.branded {
  font-family: "Your Font", sans-serif;
}
body.branded .pay-button {
  background: #yourcolor;
}

If the URL is left blank, no extra stylesheet is loaded and the page uses the brand colors and logo only.

Step 3 (Advanced): Render Payment on Your Own Site ​

For owners who run a full marketing or membership site, the same payment link can be served from your own URL. Argonautas exposes a JSON API at /api/v1/payments/link/<token>/:

  • A GET returns the booking summary, amount due, currency, and the current payment state (ready, succeeded, failed, expired).
  • A POST initiates the checkout for that link with whatever return URL you specify.

Your site fetches the data, renders a payment page using your own design system, and posts back when the guest is ready to pay. From the guest's perspective, they never leave your domain. The hosted page on app.argonautas.pro remains available as a fallback if you want to send the same link there directly.

The JSON API enforces a return-URL allow-list against your Public website URL to prevent open-redirect abuse. Wire this up with your developers; our integration team can supply sample code.

Common Questions ​

Where does the payment page get my logo from? From the same logo you uploaded under Settings > Branding > Logo. There is no separate logo for payment pages.

Can I have different stylesheets for different pages? The CSS URL is per company. To style other pages differently, scope your CSS rules using class selectors that only apply to the payment page (body.branded is added on the payment page only).

My CSS URL is being rejected. Why? The URL must be on the same hostname as your Public website URL. Update either the website URL or the CSS URL so they match.

What happens if my CSS host goes down? The payment page still loads with brand colors and logo intact -- the stylesheet is treated as progressive enhancement. The checkout itself is never blocked by the stylesheet.

Do I need the JSON API to brand the payment page? No. The hosted page covers most needs. The JSON API is only needed if you want the payment to appear on your own domain.

Last updated: