For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
GuidesAPI Reference
GuidesAPI Reference
  • Welcome
    • Getting Started
    • Business Hub
    • Afterpay Migration
  • Platforms
    • Platforms Quickstart
    • Adobe Commerce (Magento)
    • Adyen
    • BigCommerce
    • Ecwid
    • PrestaShop
    • Salesforce Commerce Cloud
    • Shopify
    • Stripe
    • Wix
    • WooCommerce
  • Afterpay Messaging
    • Getting Started
    • Placement
    • Implementation
    • Migration
    • Older Messaging Information and Links
    • Launch Afterpay Info Modal Anywhere
  • API Development
    • API Quickstart
    • Test Environments
    • Certification
    • Disputes
    • Webhook Signature Generation
  • SDK
    • SDK Migration Guide
    • iOS SDK
    • Android SDK
    • React Native SDK
  • Marketing
    • Shop Directory
    • Brand Assets
LogoLogo
On this page
  • Logos
  • Logo Lockup
  • Payment Badge
  • Rounded
  • Squared
  • Alternative
  • Afterpay Messaging
  • Buttons
  • Button Styles
  • Rectangular
  • Rounded
  • Button Types
  • Marketing Assets
  • Download
Marketing

Brand Assets

Was this page helpful?
Previous
Built with

There are links to a variety of visual assets on this page. Use them to inform your customers that Afterpay is available as a payment method.

To increase brand awareness, we recommend using brand assets with Cash green. See the Afterpay Merchant guidelines online presentation for much more information on how to display and present Afterpay.


Payment Badge - Green.png

Logos

We strongly recommended going code-first.
Our embeddable code snippets are designed to optimize your checkout experience. For implementation best practices, see our Merchant Guidelines.

Logo Lockup

Green BlackGreen White
Lockup - Green Black.pngLockup - Green White.png
html <img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/lockup/new-color-black-32.svg" height="32" />html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/lockup/new-color-white-32.svg" height="32" />

BlackWhite
Lockup - Black.pngLockup - White.png
html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/lockup/new-mono-black-32.svg" height="32" />html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/lockup/new-mono-white-32.svg" height="32" />

Payment Badge

Rounded

Payment Badge - Green.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/icon/color.svg" height="24" />

Payment Badge - Green on Black.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/icon/color.svg" height="24" />

Payment Badge - Mono Light.png

html<img alt="Afterpay" src="https://static.afterpay.com/en-US/integration/logo/icon/mono-light.svg" height="24" />

Payment Badge - Mono Dark.png

html<img alt="Afterpay" src="https://static.afterpay.com/en-US/integration/logo/icon/mono-dark.svg" height="24" />

Squared

Payment Badge - Sqaured - Green on light.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/squared-badge/color.svg" height="24" />

Payment Badge - Squared - Green on dark.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/squared-badge/color.svg" height="24" />

Payment Badge - Squared - Monochrome Black on light.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/squared-badge/mono-light.svg" height="24" />

Payment Badge - Squared - Monochrome White on dark.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/squared-badge/mono-dark.svg" height="24" />

Alternative

alternative-badge-on-light.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/alt-badge/color.svg" height="24" />

alternative-badge-on-dark.png

html<img alt="Afterpay" src="https://static.afterpaycdn.com/en-US/integration/logo/alt-badge/color.svg" height="24" />

Afterpay Messaging

Afterpay Messaging informs your customers—as they browse—that pay by installments with Afterpay is available. This helps to improve your conversion rates and average order value.

Visit our Messaging Guide to learn about implementation.

xs
sm
md
lg
Messaging Lockup - 12px.png

Buttons

We strongly recommended going code-first.
Our embeddable code snippets are designed to optimize your checkout experience. For implementation best practices, see our Merchant Guidelines.

Button Styles

Rectangular

Black GreenGreen Black
Button Style - Black Green.pngButton Style - Green Black.png
html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/color-on-black.svg" height="48" style="border: 0;" /></button>html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/black-on-green.svg" height="48" style="border: 0;" /></button>

Black WhiteWhite Black
Button Style - Black White.pngButton Style - White Black.png
html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/white-on-black.svg" height="48" style="border: 0;" /></button>html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/black-on-white.svg" height="48" style="border: 0;" /></button>

Rounded

Black GreenGreen Black
Button Style - Rounded Black Green.pngButton Style - Rounded Green Black.png
html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/color-on-black-rounded.svg" height="48" style="border: 0;" /></button>html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/black-on-green-rounded.svg" height="48" style="border: 0;" /></button>

Black WhiteWhite Black
Button Style - Rounded Black White.pngButton Style - Rounded White Black.png
html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/white-on-black-rounded.svg" height="48" style="border: 0;" /></button>html<button aria-label="Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/afterpay/black-on-white-rounded.svg" height="48" style="border: 0;" /></button>

Button Types

Checkout WithContinue With
Button Type - Checkout with.pngButton Type - Continue with.png
html<button aria-label="Checkout with Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Checkout with Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/checkout-with-afterpay/color-on-black.svg" height="48" style="border: 0;" /></button>html<button aria-label="Continue with Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Continue with Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/continue-with-afterpay/color-on-black.svg" height="48" style="border: 0;" /></button>

Pay WithBuy With
Button Type - Pay with.pngButton Type - Buy with.png
html<button aria-label="Pay with Afterpay" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Pay with Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/pay-with-afterpay/color-on-black.svg" height="48" style="border: 0;" /></button>html<button aria-label="Buy with Afterpay (Green)" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Buy with Afterpay" aria-hidden="true" src="https://static.afterpaycdn.com/en-US/integration/button/buy-with-afterpay/color-on-black.svg" height="48" style="border: 0;" /></button>

Checkout With - GreenContinue With - Green
Button Type - Green - Checkout with.pngButton Type - Green - Continue with.png
html<button aria-label="Checkout with Afterpay (Green)" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Checkout with Afterpay" aria-hidden="true" src="https://static.afterpay.com/en-US/integration/button/checkout-with-afterpay/black-on-green.svg" height="48" style="border: 0;" /></button>html<button aria-label="Buy with Afterpay (Green)" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Buy with Afterpay" aria-hidden="true" src="https://static.afterpay.com/en-US/integration/button/continue-with-afterpay/black-on-green.svg" height="48" style="border: 0;" /></button>

Pay With - GreenBuy With - Green
Button Type - Green - Pay with.pngButton Type - Green - Buy with.png
html<button aria-label="Pay with Afterpay (Green)" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Pay with Afterpay" aria-hidden="true" src="https://static.afterpay.com/en-US/integration/button/pay-with-afterpay/black-on-green.svg" height="48" style="border: 0;" /></button>html<button aria-label="Buy with Afterpay (Green)" style="display: inline-block; vertical-align: middle; cursor: pointer; border: transparent; background: none;"><img alt="Buy with Afterpay" aria-hidden="true" src="https://static.afterpay.com/en-US/integration/button/buy-with-afterpay/black-on-green.svg" height="48" style="border: 0;" /></button>

Marketing Assets

Coming soon!

Download

We strongly recommended going code-first. Our embeddable code snippets are designed to optimize your checkout experience.

To download our brand assets, click here.