Overview

Embeddables allow merchants to easily add common eCommerce flows to their website. It accomplishes this by providing easily embeddable HTML snippets that provide an entry point into an eCommerce flow. All of the complexity is abstracted away behind these HTML snippets, thereby lowering the barrier to entry to basic knowledge of HTML.

How It Works

The goal of embeddables is to provide a very simple way for you to add eCommerce flows to your website by abstracting away the complex business logic behind simple HTML snippets.

Getting up and running with embeddables is very straightforward:

1. Add a small JavaScript snippet to your website
2. Register your merchant account with the PaySimple embeddables via your MerchantKey (see below)
3. Add a Buy Now Button to your website

Once you have completed all three of these steps you will be up and running with PaySimple embeddables.

The JavaScript snippet will load the required PaySimple JavaScript libraries and initialize the embeddables engine on your website. It listens for changes to your site's DOM and will automatically initialize new embeddables as they are discovered. This means you're able to dynamically add/remove/modify embeddables at any time.

Retrieving Your MerchantKey

📘

We know this is a clunky experience - we're working to improve this.

The following steps describe how to retrieve your MerchantKey:

1. Login into our Merchant Portal
2. Click on eCommerce from the left navigation
3. Click Create under Buy Now Button
4. Select a product
5. Click Generate Code in the top right of the page
6. Look for the line window.psEmbed({ merchantKey: "" }); in the Embed Code snippet
7. Copy the merchantKey (denoted by in the step above)

Adding the JavaScript Snippet to Your Website

As noted above, you need to add a JavaScript snippet to your website. Paste the following code into your website's HTML file (replacing with your merchantKey).

This will initialize the embeddables engine and register your merchant account with the PaySimple embeddables.

📘

Tip

In order to speed up the loading of our embeddables, place the script in the tag of your HTML. The script is loaded asynchronously, meaning the rendering of the page will not be blocked by the downloading of our embeddable JavaScript.

<script>
  !function(d){if(!window.PsEmbedObject){window.PsEmbedObject=d,window[d]=function(e){window[d].settings=e};var e=document.createElement("script");e.async=1,e.src="https://api.paysimple.com/embed/v1/ps-embed.js",document.body.appendChild(e)}}("psEmbed");
  window.psEmbed({ merchantKey: "<merchantKey>" });
</script>

<script>
  !function(d){if(!window.PsEmbedObject){window.PsEmbedObject=d,window[d]=function(e){window[d].settings=e};var e=document.createElement("script");e.async=1,e.src="https://api.paysimple.com/embed/v1/ps-embed.js",document.body.appendChild(e)}}("psEmbed");
  window.psEmbed({ merchantKey: "<merchantKey>" });
</script>