Payment Widget Instructions

What is the payment widget?
The PocketSuite payment widget is a website plugin you embed on your website that lets customers pay you easily & securely.


Is it for me?
The widget is for you if you want to accept payments over the Internet. If you have an online presence (website, social media, email) that new and existing customers visit then the PocketSuite payment widget is for you.

Payment widget instructions:
Add the payment widget to your website using the following instructions (note your “USERNAME” can be found in the instructions email you send yourself by going to Settings > Online payment > Send instructions, in the PocketSuite app)…

Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:

<div id=”ps-book” data-cash=”USERNAME”></div><script src=”“></script>

If you have multiple widgets from PocketSuite on the same page, please note the following to ensure they render properly:

Add as many widgets to a web page as you want by including the DIV widget tag once for each widget and then including the SCRIPT tag after the last widget tag. Be sure to replace the “id” attribute with “class” since there are multiple elements on the page with the same “ps-book” identifier. Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:

<div class=”ps-book” data-cash=”USERNAME“></div> (Pay Now widget)
<div class =”ps-book” data-account=”USERNAME” data-service=”SERVICE-NAME“></div> (Service specific widget)
<div class=”ps-book” data-form=”FORM_ID“></div><script src=””></script> (Online form widget)

I don’t have a website. Can customers still pay me online?
Yes, they can – just add the link to your payment widget to your social media (IG/FB), email signature, or simply text it to a client.

Your unique payment widget link:

Is this secure? How do you prevent spam?
Yes – we use SSL to secure every page. Furthermore, we verify the mobile number entered by the customer.

Will visitors to my website need to download PocketSuite?
No. All interactions between you and the client occur over text message, email, and the secure payment, booking, or lead form widgets.

Instructions for Website Hosting Platforms
Click Embed Code and drag & drop block into page. Double click block, configure alignment, and then copy & paste widget code. Save and publish your page.

Click Add (+), select Apps, and select HTML, and set the Mode field to HTML code. Copy and paste the widget code into the HTML / embed code field. Move the field around as you see fit. Because the HTML code block is absolutely positioned using an IFRAME (as opposed to displayed inline on the page), ensure that the field size in the bottom right corner has a minimum size of 404 x 644. Save and publish your page.

Go to the Builder section and select Custom HTML (usually under the Other category). Drag and drop it to the section of the page where you want the button to appear. Double click the Custom HTML field on your page then paste the widget code into this field. Save and publish your page.

Select a space on the page where you want to add the widget, tap ‘+’ to select a component to add, and select Code. In the Edit Code dialog tap on the settings icon in the URL field to open the Edit Code Data field. Copy and paste the widget code into this field. Save and publish your page.

WordPress (or Custom Design)
Copy and paste widget code into location on page where you want the booking widget to Appear.

Still have questions about how to install your widget or anything else?
Feel free to contact us anytime at or text us on PocketSuite.

Have more questions? Submit a request
Powered by Zendesk