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 look like part of your own brand instead of a generic billing screen. Branding works in two ways:

  • The hosted payment page: the page Argonautas serves for each payment link shows your logo and brand color.
  • Your own website: if you have your own site, it can fetch the payment details through an API and show its own payment page, with checkout handled by Argonautas.

Which one your guests see is set per company, not per link. Payment links are built on your company's Website URL (Settings → Company) when one is set, and on the Argonautas address when it isn't. If you set a Website URL, your website has to be able to show payment links (see Step 3). Check with Argonautas support before you set or change it.

Step 1: Set Your Logo and Brand Colors ​

Your logo and colors come from the Company Branding section under Settings → Company. It has:

  • Company Logo: click Upload Logo ("Recommended: 400x100px, PNG or SVG. Max 2MB.").
  • Company Icon: click Upload Icon ("Recommended: 200x200px, square. Max 1MB.").
  • Brand Colors: Primary, Secondary, Accent, and Accent Deep, saved with the tab's Save Changes bar. "These colors appear on invoices, confirmation emails, and guest-facing pages." Leave a color empty, or click Reset to default, to use the Argonautas default.

On the hosted payment page:

  • The Company Logo appears at the top of the page. With no logo, your company name is shown instead.
  • The Primary color is used for the colored header, the amounts, the Pay Now button, and links.
  • The contact line ("Contact us at …") uses your Primary Contact Email and Company Phone from Settings → Company.

The other colors and the icon aren't used on the payment page. Your logo also appears in the header of the emails Argonautas sends to guests.

Step 2: Add a Stylesheet (Optional) ​

If your logo and brand color aren't enough, for example because you want custom fonts or layout changes, the payment page can load a CSS file from your own website.

There is no setting for this in the Argonautas app. It's set up by Argonautas support on request:

  1. Publish a stylesheet on your own website, for example https://yourdomain.com/payment-page.css.
  2. Make sure your company's Website URL is set in Settings → Company. The stylesheet must be on exactly the same domain as your Website URL. For example, a stylesheet on www.yourdomain.com is rejected if your Website URL is https://yourdomain.com. This stops pages from being styled from a site you don't control.
  3. Send the stylesheet's full address to Argonautas support and ask for it to be added as your payment page stylesheet.

Once it's in place, every payment page adds a branded class to the page body and loads your stylesheet. Put body.branded in front of your rules so they only affect this page:

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

The Pay Now button has the class pay-btn. Without a stylesheet, no extra CSS is loaded, and the page uses your logo and Primary color only.

Step 3 (Advanced): Show the Payment Page on Your Own Site ​

If you run your own website, it can show the payment page itself so the guest never leaves your domain. Argonautas provides a JSON API at /api/v1/payments/link/<token>/:

  • A GET returns the state of the payment link: ready, already_paid, cancelled, expired, no_payment_method, or invalid. When the link is ready, the response also has the booking summary (confirmation code, guest first name, property, dates), the currency, the amount due, any card fee, and the total. Every response also includes your company name, email, and phone number.
  • A POST starts checkout for that link. It can include a return_url to send the guest back to after payment.

Your site fetches the data, shows the payment page in your own design, and sends the POST when the guest is ready to pay. For security, a return_url must be on the same domain as your Website URL, or the request is refused.

Payment links point to <your Website URL>/pay/<token>/, so your site has to serve that path. Set this up with your web developers and Argonautas support.

Common Questions ​

Where does the payment page get my logo from? From the Company Logo in the Company Branding section under Settings → Company. There is no separate logo for payment pages.

Can I change the payment page stylesheet myself? No. The stylesheet address is set by Argonautas support. You can change what's inside the stylesheet on your own website at any time, and the next payment page that opens uses the new version.

Can I have different stylesheets for different pages? No, there's one stylesheet per company, and it's only loaded on the payment page. Put body.branded in front of your rules to keep them from affecting anything else that uses the same file.

Why was my stylesheet address rejected? It must be on exactly the same domain as your Website URL. Either host the stylesheet on that domain or ask support about changing the address.

What happens if my website is down? The payment page still loads with your logo and brand color, and the guest can still pay. Only your extra styling is missing. The stylesheet never blocks checkout.

Why does the page say "Card Payment Unavailable"? The payment page takes card payments through PowerTranz, and the property has no PowerTranz connector. The page shows your contact email so the guest can ask about other payment options. See Payment Connectors.

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

Last updated: