Getting Started
This reference documents how to install and setup the Felloh browser-side JavaScript SDK. You can use this SDK to render the Felloh payment form and accept payments within your site or application.
You can either include the SDK in your project using a package manager (such as NPM or Yarn) or alternatively include it using a CDN.
We have put together a guide on how to embed the payment form to give you a better idea of how this all fits together.
Using a Package Manager
You will need to install our SDK using a package manager on your frontend. We recommend either using NPM or Yarn.
Installing the SDK
<div class="syntax-highlighter"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1b0f27"><code class="language-shell" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#c0a9e5">yarn</span><span> </span><span class="token" style="color:#c0a9e5">add</span><span> @felloh-org/payment-sdk </span></code></pre></div>
Using a CDN
You can include the Felloh SDK on the page of the site where you will be rendering the payment form. This is cached via AWS Cloudfront and is therefore highly available and is continuously deployed by us.
The upside of doing it this way rather than via a package manager, is that you will always have the latest version of our SDK.
Including the script
<div class="syntax-highlighter"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1b0f27"><code class="language-html" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">html</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">lang</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">en-US</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span> </span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">head</span><span class="token" style="color:#808080">></span><span> </span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">script</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">src</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">https://sdk.felloh.com/</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">script</span><span class="token" style="color:#808080">></span><span> </span><span> </span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">head</span><span class="token" style="color:#808080">></span><span> </span><span></span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">html</span><span class="token" style="color:#808080">></span><span> </span></code></pre></div>
Once you have included the script in the head of your site, you can then render the iframe.
Rendering the payment iframe
<div class="syntax-highlighter"><pre style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1b0f27"><code class="language-html" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">id</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">payment-iframe</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">div</span><span class="token" style="color:#808080">></span><span> </span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">script</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">type</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">text/javascript</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span class="token script language-javascript"> </span><span class="token script language-javascript"> </span><span class="token script language-javascript" style="color:#569CD6">var</span><span class="token script language-javascript"> </span><span class="token script language-javascript" style="color:#9cdcfe">SDK</span><span class="token script language-javascript"> </span><span class="token script language-javascript" style="color:#d4d4d4">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript" style="color:#569CD6">new</span><span class="token script language-javascript"> </span><span class="token script language-javascript" style="color:#4ec9b0">FellohPayments</span><span class="token script language-javascript" style="color:#d4d4d4">(</span><span class="token script language-javascript" style="color:#ce9178">'payment-iframe'</span><span class="token script language-javascript" style="color:#d4d4d4">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript" style="color:#ce9178">'your-public-key'</span><span class="token script language-javascript" style="color:#d4d4d4">)</span><span class="token script language-javascript" style="color:#d4d4d4">;</span><span class="token script language-javascript"> </span><span class="token script language-javascript"></span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">script</span><span class="token" style="color:#808080">></span><span> </span></code></pre></div>