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
Once you've created your Trolley account, you can create your first product. Click on Products, then New Product.
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.
Send the link directly to your customers
As soon as you've pressed
Save Trolley generates the unique payment link for your products. It looks like this:
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:
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:
Refresh your website in the browser and you should see a
Click it, and a Trolley pop-up widget should appear, just like this:
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.
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
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!