Please select your page

Invoice Element

For merchants convenience we have an AfterPay Invoice Element which will show relevant and useful information about 14-day invoice to the customer before the checkout stage. This will ensure that the customer is aware of payment possibility with AfterPay which could lead to a purchase decision.

To include this component to your webpage please ensure you have Afterpay CDN scripts present in page HTML and use this snippet where the element should be displayed. Note: this element acts as a div and takes up a whole row in its parent container, also it is responsive and will change size based on the screen size.

Invoice element demo



<afterpay-invoice language="en"></afterpay-invoice>


Choosing the language

HTML attribute 'language' should correspond to the language that the customer is using currently.

Supported languages:

  • English - "en"
  • German - "de"
  • Finnish - "fi"
  • Swedish - "sv-SE"
  • Danish - "da"
  • Norwegian - "no"
  • Dutch - "nl"

Custom text in Read More modal

Clicking on the Read More button opens a overlay modal which contains additional information about 14-day invoice.
Using slots you can have custom information in Read More modal.
Custom message must be in a div HTML tag container with slot="modal-body-inner" attribute:

<afterpay-invoice language="nl">
    <div slot="modal-body-inner">
        <h1>Hello world!</h1>