Direct payments

Jan 28

The "Direct" product type allows you to create payment buttons that accept a fixed, set amount as a direct payment.

"Direct" payments are perfect for sending over email, SMS, or using in a variety of integration scenarios.

Create a product

Send the link directly to your customers

Put the product on your website

Optional - override the amount in HTML for integrations

Create a product

Adding a Direct payment product

Once you've created your Trolley account, you can create your first product. Click on Products, then New Product.

Set the Product Type to be Direct

Fill in the basic product details - the price, currency, description and so on. Scroll down a bit and click Save.

As soon as you've pressed Save Trolley generates the unique payment link for your products. It looks like this:

https://trolley.link/p/ABC123

Copy that, and you can send it via email, WhatsApp, Tweet it, pop it in your Instagram bio - whatever you like. If someone clicks it they'll be taken straight to the hosted payment page associated with your product. If they pay you, you'll receive an email.

The hosted payment page looks like this:

Hosted payment page

Put the product on your website

Once you've saved your product you'll see that Trolley asks you to grab a chunk of HTML and paste it into your website.

Select the code (the words in the dark greybox, above…) and copy it - either using your keyboard, or by clicking the little Copy icon.

Now flip over to your text editor, open up the source, and paste the code from Trolley somewhere into your design, like so:

<button data-trolley="true" data-tpk="XYZ123">
    Pay
</button>

<!-- You only need this once per page (but it won't do any harm) -->
 <script async src="https://widget.trolley.link/cart.js"
   type="text/javascript"></script>

Refresh your website in the browser and you should see a Pay button.

Click it, and a Trolley pop-up widget should appear, just like this:

Popup cart

Deploy your edited website and that's it - you're live!

Optional - override the amount in HTML for integrations

Direct payments are easily integrated into custom shopping carts.

Add a data-direct attribute to the Trolley link, specifiying an amount in pence / cents (as appropriate for your currency)

This amount will override the default that you set in the Trolley dashboard when creating your product.

Below, we override the price, setting it to £99.99

<button data-trolley="true"
        data-tpk="XYZ123"
        data-direct="9999">
    Pay
</button>


<script async src="https://widget.trolley.link/cart.js"
    type="text/javascript"></script>

Popup cart

A simple integration scenario is to build logic in your site that calculates the correct price, then to render the link as above, setting data-direct at rendering time to the total amount you wish your customer to spend.

Don't forget that you can use Webhooks to link back to third-party integrations after payment has completed!

Contact

We love questions, feedback and suggestion.

You can email us at rg@trolley.link

Or tweet us at @trolleypayments

manage cookies