Options

Trolley has a number of additional customisation options that can be useful during setup and integration.

These options are applied in HTML on the link that you paste into your website, as follows (this example shows the Preset Email option):

<a href="https://trolley.link/p/XYZ123/9999?email=test@example.com"
   data-trolley="true"
   data-tpk="XYZ123"
   data-email="test@example.com">
    Pay
</a>

Button styling

The Trolley Payment button defaults to on-brand Trolley styling, with a fetching blue button. Turn it off by setting data-styled="false" on the payment link.

Popover tooltip

The popover tooltip appears when customers hover over the Trolley payment button.

Prevent this with data-pop="false".

Preset email

If you're already collecting the customer's email address, and you want to ensure they use the same one in Trolley (perhaps because you're also using a Redirect and want to reconcile at the end of your purchase flow) then you can provide the Email in advance. The customer will see their email address in the Checkout but will be unable to override it.

Note both the data-email attribute and the target URL of the link contain the email; this ensures correct operation in both pop-up and hosted cart modes.

<a href="https://trolley.link/p/XYZ999/10000?email=thecustomer@example.com"
   data-trolley="true"
   data-tpk="XYZ999"
   data-direct="10000"
   data-email="thecustomer@example.com">
    Pay
</a>

Preset note

If you're creating a more complex flow, perhaps using some client side JavaScript of your own, you may wish to fill in the Customer Note in advance, so that certain data is passed through to you by email in the sales notification.

Use this option to preset the Customer Note, so that the customer will see the content but be unable to edit it.

Note both the data-note attribute and the target URL of the link contain the note; thios ensures correct operation in both pop-up and hosted cart modes. The note parameter in the URL should be URL-encoded.

<a href="https://trolley.link/p/XYZ999?note=Hello%20world"
   data-trolley="true"
   data-tpk="XYZ999"
   data-note="Hello world">
    Pay
</a>

Using your own payment reference

If you've already got a customer reference that you want to use instead of Trolley generating one for you, you can pre-set it like this:

Note both the data-payref attribute and the target URL of the link contain the reference; this ensures correct operation in both pop-up and hosted cart modes.