PrecisionPay

Introduction/overview

Prerequisites

Quick Start/tutorial

Part 1: Creating an Admin Section for your Custom Payment Gateway

Part 2: Connecting to the PrecisionPay Checkout Portal

Part 3: Process the Payment and Handle the Final Checkout Steps

Resources & Support

Getting Started

Production

<h2 class="slate-h2 " >Learn how to Create a Custom Payment Gateway</h2><p class="slate-p " >PrecisionPay&apos;s API has everything you need to create a custom gateway from scratch in the programming language you prefer and integrate it into your existing ecommerce platform. However, it may not be immediately obvious by looking at the API documentation alone how to start and what to do.</p><h2 class="slate-h2 " >The Basics</h2><p class="slate-p " >We are going to take you step-by-step through the parts that are needed to use PrecisionPay to successfully process payments on your website. PrecisionPay has already built its own gateway for clients using the WooCommerce platform by using the plugin architecture made available through WordPress. Since WooCommerce employs standardized methods for processing payments, we will use examples from this gateway help you build your own solution. Since your ecommerce platform is different, we aren&apos;t going to get too in the weeds with the specifics of the WooCommerce payment gateway code. We&apos;ll just use it to highlight the important pieces that you&apos;ll want to have in your own custom payment gateway.</p><p class="slate-p " >If you&apos;d like to see the complete payment gateway, or just see how the examples we use fit together, <a href="https://github.com/MakeCents-NYC/woocommerce-gateway-precisionpay" target="_self">you can take a look at the complete code here</a>.</p><h2 class="slate-h2 " >Already Using WooCommerce on WordPress?</h2><p class="slate-p " >NOTE: If you are already using WooCommerce, then you don&apos;t need to code a custom payment gateway; we already did it for you! You can find it by searching for “PrecisionPay” in the plugins directory. Or view the official page <a href="https://wordpress.org/plugins/precisionpay-payments-for-woocommerce/" target="_self">here</a>. We also have setup instructions for the plugin <a href="https://wordpress.org/plugins/precisionpay-payments-for-woocommerce/#installation" target="_self">here</a>.</p><p class="slate-p " >Still here? Then read on as we walk you through the basics for accessing the PrecisionPay API and leveraging it to create your custom payment gateway.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Learn how to Create a Custom Payment Gateway

PrecisionPay's API has everything you need to create a custom gateway from scratch in the programming language you prefer and integrate it into your existing ecommerce platform. However, it may not be immediately obvious by looking at the API documentation alone how to start and what to do.

We are going to take you step-by-step through the parts that are needed to use PrecisionPay to successfully process payments on your website. PrecisionPay has already built its own gateway for clients using the WooCommerce platform by using the plugin architecture made available through WordPress. Since WooCommerce employs standardized methods for processing payments, we will use examples from this gateway help you build your own solution. Since your ecommerce platform is different, we aren't going to get too in the weeds with the specifics of the WooCommerce payment gateway code. We'll just use it to highlight the important pieces that you'll want to have in your own custom payment gateway.

If you'd like to see the complete payment gateway, or just see how the examples we use fit together, 

NOTE: If you are already using WooCommerce, then you don't need to code a custom payment gateway; we already did it for you! You can find it by searching for “PrecisionPay” in the plugins directory. Or view the official page 

. We also have setup instructions for the plugin 

Still here? Then read on as we walk you through the basics for accessing the PrecisionPay API and leveraging it to create your custom payment gateway.

<h2 class="slate-h2">Get set up with the PrecisionPay Merchant Portal</h2><ul class="slate-ul"><li class="slate-li"><div style="position:relative">The first thing you&apos;ll need to do is <a href="https://www.myprecisionpay.com/merchant-sign-up#merchant-application" target="_self">apply for a merchant account.</a></div></li><li class="slate-li"><div style="position:relative">Once you have been approved, log-in and navigate to the API Keys tab.</div></li><li class="slate-li"><div style="position:relative">Click Create API Key.</div></li><li class="slate-li"><div style="position:relative">Copy the API Secret and then the Key and store it in a safe spot. You will need this later.</div></li></ul><p class="slate-p" placeholder="Type / for widgets"></p><p class="slate-p" placeholder="Type / for widgets"></p>

Get set up with the PrecisionPay Merchant Portal

<h2 class="slate-h2 " >What You&apos;ll Learn</h2><p class="slate-p " >There are three main parts to creating your own custom payment gateway:</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=success ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.77116 10.8968L5.72949 8.8551C5.60449 8.7301 5.45171 8.6676 5.27116 8.6676C5.0906 8.6676 4.93088 8.73705 4.79199 8.87594C4.6531 9.01482 4.58366 9.17455 4.58366 9.3551C4.58366 9.53566 4.6531 9.68844 4.79199 9.81344L7.33366 12.3551C7.45866 12.4801 7.60449 12.5426 7.77116 12.5426C7.93783 12.5426 8.08366 12.4801 8.20866 12.3551L13.2087 7.3551C13.3337 7.2301 13.3927 7.07732 13.3857 6.89677C13.3788 6.71621 13.3128 6.56344 13.1878 6.43844C13.0628 6.29955 12.9066 6.2301 12.7191 6.2301C12.5316 6.2301 12.3684 6.29955 12.2295 6.43844L7.77116 10.8968ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C11.0142 16.0843 12.6982 15.4072 14.0524 14.053C15.4066 12.6989 16.0837 11.0148 16.0837 9.00094C16.0837 6.98705 15.4066 5.30302 14.0524 3.94885C12.6982 2.59469 11.0142 1.9176 9.00033 1.9176C6.98644 1.9176 5.30241 2.59469 3.94824 3.94885C2.59408 5.30302 1.91699 6.98705 1.91699 9.00094C1.91699 11.0148 2.59408 12.6989 3.94824 14.053C5.30241 15.4072 6.98644 16.0843 9.00033 16.0843Z" fill="#06837A"></path></svg></div><div ><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">An admin section for the items you need to pass to your ecommerce platform (these could technically be hard coded as well). These items are: your merchant API Key and Secret, and your gateway mode (either testing or production).</div></li><li class="slate-li " ><div style="position:relative">The PrecisionPay Checkout Portal. This part is ready for you to use. You only need to pass the correct info via a URL and have your code set up to ingest the response the Checkout Portal gives you when the user is finished interacting with it.</div></li><li class="slate-li " ><div style="position:relative">The final part is integrating our pay endpoints into your gateway to process a payment. Upon a successful response, you&apos;ll connect the functions normally instantiated by your ecommerce platform when it completes its checkout process, (e.g. reducing stock levels, updating order status, emptying the cart, and sending the user to a success page).</div></li></ol></div></div><p class="slate-p " >Here&apos;s a lovely diagram of how the user flow works:</p><p class="slate-p " ></p><div style="text-align:center"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/bcefce7e-9e15-4be3-909b-4d2526a45cef.png" alt="" style="
              width:596px;
	            height:596px;
	            aspect-ratio:596 / 596"
         /></div></figure></div><p class="slate-p " >Next let&apos;s dive into each section and get into more depth.</p><p class="slate-p " ></p>

There are three main parts to creating your own custom payment gateway:

Here's a lovely diagram of how the user flow works:

Next let's dive into each section and get into more depth.

<p class="slate-p " >Our APIs require that you have access to a Merchant Portal API Key and Secret. Additionally, you have the option of putting our system in &quot;test mode&quot; or &quot;production mode&quot;. The easiest way to do this is to set up an admin page within your ecommerce website&apos;s admin section. Here&apos;s a screenshot of what that looks like in our WooCommerce integration:</p><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/8f8c59d8-5b12-4713-8909-6d53f24392f0.jpg" alt="" style="
              width:773px;
	            height:387px;
	            aspect-ratio:773 / 387"
         /></div></figure></div><p class="slate-p " >In this example you can see that there is an enable/disable button that is part of the WooCommerce payment gateway integration. Below you will see the examples of the header function and the function to render the form. These examples were written in PHP.</p><p class="slate-p " ><strong class="slate-bold">Header Function:</strong></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line"> public function render_header()</div><div class="slate-code_line">{</div><div class="slate-code_line">  echo &apos;</div><div class="slate-code_line">  &lt;div class=&quot;precisionpay-settings-page-header&quot;&gt;</div><div class="slate-code_line">      &lt;div class=&quot;top-section&quot;&gt;</div><div class="slate-code_line">        &lt;img alt=&quot;PrecisionPay&quot; class=&quot;precisionpay-logo&quot; width=&quot;380&quot; src=&quot;&apos; . esc_url($this-&gt;icon) . &apos;&quot;/&gt;</div><div class="slate-code_line">        &lt;h4 class=&quot;precisionpay-tagline&quot;&gt;&apos; . esc_html__(&apos;Fast, Secure, Payments, for the Second Amendment Community.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;) . &apos;&lt;/h4&gt;</div><div class="slate-code_line">        &lt;a class=&quot;button&quot; target=&quot;_blank&quot; href=&quot;mailto:support@myprecisionpay.com&quot;&gt;&apos;</div><div class="slate-code_line">    . esc_html__(&apos;Get Help&apos;, &apos;precisionpay-payments-for-woocommerce&apos;) .</div><div class="slate-code_line">    &apos;&lt;/a&gt;</div><div class="slate-code_line">    &lt;/span&gt;</div><div class="slate-code_line">      &lt;/div&gt;</div><div class="slate-code_line">      &lt;h3&gt;Welcome to PrecisionPay, the Seconds Amendment payments company.&lt;/h3&gt;</div><div class="slate-code_line">      &lt;p&gt;If you already have a merchant account, enter your keys below. If not, visit </div><div class="slate-code_line">      &lt;a target=&quot;_blank&quot; href=&quot;https://www.myprecisionpay.com&quot;&gt;myprecisionpay.com&lt;/a&gt; </div><div class="slate-code_line">      to apply for a merchant account.&lt;/p&gt;</div><div class="slate-code_line">    &lt;/div&gt;</div><div class="slate-code_line">    &apos;;</div><div class="slate-code_line">}</div></code></pre></div><p class="slate-p " ><strong class="slate-bold">Function to display the form fields:</strong></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">/**</div><div class="slate-code_line"> * Initialize Gateway Settings Form Fields</div><div class="slate-code_line"> */</div><div class="slate-code_line">public function init_form_fields()</div><div class="slate-code_line">{</div><div class="slate-code_line">  $this-&gt;form_fields = apply_filters(&apos;prcsnpy_form_fields&apos;, array(</div><div class="slate-code_line">    &apos;enabled&apos; =&gt; array(</div><div class="slate-code_line">      &apos;title&apos;   =&gt; __(&apos;Enable/Disable&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;label&apos;   =&gt; __(&apos;Enable PrecisionPay Payment Gateway&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;type&apos;    =&gt; &apos;checkbox&apos;,</div><div class="slate-code_line">      &apos;default&apos; =&gt; &apos;yes&apos;</div><div class="slate-code_line">    ),</div><div class="slate-code_line">    &apos;enableTestMode&apos; =&gt; array(</div><div class="slate-code_line">      &apos;title&apos;       =&gt; __(&apos;Enable Test Mode&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;label&apos;       =&gt; __(&apos;Enable Test Mode&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;type&apos;        =&gt; &apos;checkbox&apos;,</div><div class="slate-code_line">      &apos;description&apos; =&gt; __(&apos;Place the payment gateway in test mode to test the plugin without needing to spend any money.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;default&apos;     =&gt; &apos;&apos;,</div><div class="slate-code_line">      &apos;desc_tip&apos;    =&gt; true,</div><div class="slate-code_line">    ),</div><div class="slate-code_line">    &apos;api_key&apos; =&gt; array(</div><div class="slate-code_line">      &apos;title&apos;       =&gt; __(&apos;API Key&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;type&apos;        =&gt; &apos;text&apos;</div><div class="slate-code_line">    ),</div><div class="slate-code_line">    &apos;api_secret&apos; =&gt; array(</div><div class="slate-code_line">      &apos;title&apos;       =&gt; __(&apos;API Secret&apos;, &apos;precisionpay-payments-for-woocommerce&apos;),</div><div class="slate-code_line">      &apos;type&apos;        =&gt; &apos;password&apos;</div><div class="slate-code_line">    ),</div><div class="slate-code_line">  ));</div><div class="slate-code_line">}</div></code></pre></div><p class="slate-p " >To render the form on the admin page, WooCommerce looks for a <strong class="slate-bold">render_settings</strong> function we can create that like this:</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">public function render_settings()</div><div class="slate-code_line">{</div><div class="slate-code_line">  echo &apos;&lt;table class=&quot;form-table&quot;&gt;&apos; . $this-&gt;generate_settings_html($this-&gt;get_form_fields() . &apos;&lt;/table&gt;&apos;;</div><div class="slate-code_line">}</div></code></pre></div><p class="slate-p " >These fields get set in the constructor of our payment gateway class like this:</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">public function __construct()</div><div class="slate-code_line">{</div><div class="slate-code_line">  …</div><div class="slate-code_line">  $this-&gt;enabled             = $this-&gt;get_option(&apos;enabled&apos;);</div><div class="slate-code_line">  $this-&gt;enableTestMode      = &apos;yes&apos; === $this-&gt;get_option(&apos;enableTestMode&apos;); // Checkbox comes in as yes if checked</div><div class="slate-code_line">  $this-&gt;env                 = $this-&gt;enableTestMode ? self::PP_ENV_SANDBOX : self::PP_ENV_PRODUCTION;</div><div class="slate-code_line">  $this-&gt;plaid_env           = $this-&gt;enableTestMode ? self::PLAID_ENV_SANDBOX : self::PLAID_ENV_PRODUCTION;</div><div class="slate-code_line">  $this-&gt;api_key             = $this-&gt;get_option(&apos;api_key&apos;);</div><div class="slate-code_line">  $this-&gt;api_secret          = $this-&gt;get_option(&apos;api_secret&apos;);</div><div class="slate-code_line">  $this-&gt;hasAPIKeys          = $this-&gt;api_key &amp;&amp; $this-&gt;api_secret;</div><div class="slate-code_line">  …</div><div class="slate-code_line">}</div></code></pre></div><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Please Note: your ecommerce platform will likely be slightly different than this, however it will probably have something similar for you to use.</p></div></div><p class="slate-p " ></p><p class="slate-p " ></p>

Our APIs require that you have access to a Merchant Portal API Key and Secret. Additionally, you have the option of putting our system in "test mode" or "production mode". The easiest way to do this is to set up an admin page within your ecommerce website's admin section. Here's a screenshot of what that looks like in our WooCommerce integration:

In this example you can see that there is an enable/disable button that is part of the WooCommerce payment gateway integration. Below you will see the examples of the header function and the function to render the form. These examples were written in PHP.

To render the form on the admin page, WooCommerce looks for a 

These fields get set in the constructor of our payment gateway class like this:

Next, we need to set up a payment button in our checkout page and wire it up to connect to the PrecisionPay Checkout Portal. Here's an example of what this looks like:

Now we're going to go over how the PrecisionPay Checkout Portal works. This is where the customer users will be able to log-in and approve their payment, or pay as guest. Here's what it looks like:

From a coding perspective we can see what is happening by looking at the 

 file. Inside the init function, we see where the button gets connected to our JavaScript

Here we make an ajax call to our PHP server which in turn fetches a unique nonce that is linked to the merchant. Once we have it, we use that to open the checkout portal, which is a separate portal we can access via an iframe. The function below called openPrecisionPay is where we create the iframe (if it wasn't already created) and open it.

There is a lot going on here, so let's go through it.

<p class="slate-p " >OK you&apos;ve made it this far. The good news is that we&apos;re getting to the end and the finish line is in sight! At this point you have all the data you need to make a payment, so now it&apos;s time to integrate into your ecommerce system&apos;s “Place Order” functionality and process the payment. </p><p class="slate-p " >First you will want to see if the customer user authorized the payment using the guest checkout or by using their PrecisionPay Customer account. This can be accomplished by checking if the <strong class="slate-bold">precisionpay_checkout_token</strong> is set.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">public function process_payment($order_id)</div><div class="slate-code_line">{</div><div class="slate-code_line">  …</div><div class="slate-code_line">  $precisionpayCheckoutToken = sanitize_text_field($_POST[&apos;precisionpay_checkout_token&apos;]);</div><div class="slate-code_line"></div><div class="slate-code_line">  if ($precisionpayCheckoutToken) {</div><div class="slate-code_line">    $payResponse_body = $this-&gt;pay_with_precisionpay($order, $order_id, $precisionpayCheckoutToken);</div><div class="slate-code_line">  } else {</div><div class="slate-code_line">    $payResponse_body = $this-&gt;pay_with_plaid($order, $order_id);</div><div class="slate-code_line">  }</div><div class="slate-code_line">  …</div><div class="slate-code_line">}</div></code></pre></div><p class="slate-p " >The function pay_with_precisionpay() calls the /checkout/pay endpoint like so:</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">private function pay_with_precisionpay($order, $order_id, $precisionpayCheckoutToken)</div><div class="slate-code_line">      {</div><div class="slate-code_line">        // Validate field first</div><div class="slate-code_line">        $this-&gt;validate_hidden_field($precisionpayCheckoutToken, __(&apos;Invalid checkout token.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line"></div><div class="slate-code_line">        $orderNumber = $this-&gt;get_order_number($order, $order_id);</div><div class="slate-code_line">        $paymentData = array(</div><div class="slate-code_line">          &apos;precisionPayToken&apos; =&gt; $precisionpayCheckoutToken,</div><div class="slate-code_line">          &apos;amount&apos; =&gt; floatval($order-&gt;get_total()),</div><div class="slate-code_line">          &apos;order&apos;  =&gt; strval($orderNumber),</div><div class="slate-code_line">          &apos;env&apos;    =&gt; $this-&gt;env,</div><div class="slate-code_line">        );</div><div class="slate-code_line"></div><div class="slate-code_line">        $payResponse = $this-&gt;api_post(&apos;/checkout/pay&apos;, $paymentData);</div><div class="slate-code_line"></div><div class="slate-code_line">        if (is_wp_error($payResponse)) {</div><div class="slate-code_line">          throw new Exception(__(&apos;Error processing payment.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        if (empty($payResponse[&apos;body&apos;])) {</div><div class="slate-code_line">          throw new Exception(__(&apos;Error processing payment at this time. Please try again later.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        // Retrieve the body&apos;s resopnse if no top level errors found</div><div class="slate-code_line">        $payResponse_body = json_decode(wp_remote_retrieve_body($payResponse));</div><div class="slate-code_line"></div><div class="slate-code_line">        return $payResponse_body;</div><div class="slate-code_line">      }</div></code></pre></div><p class="slate-p " >and the pay_with_plaid() function calls the /checkout/one-time-payment endpoint</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">private function pay_with_plaid($order, $order_id)</div><div class="slate-code_line">      {</div><div class="slate-code_line">        if (!isset($_POST[&apos;precisionpay_nonce&apos;]) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_POST[&apos;precisionpay_nonce&apos;])), &quot;mc_payment_gateway_nonce&quot;)) {</div><div class="slate-code_line">          exit(&quot;SERVER VERIFICATION ERROR&quot;);</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        $publicToken = sanitize_text_field($_POST[&apos;precisionpay_public_token&apos;]);</div><div class="slate-code_line">        $accountId = sanitize_text_field($_POST[&apos;precisionpay_account_id&apos;]);</div><div class="slate-code_line">        $precisionpay_user_id = sanitize_text_field($_POST[&apos;precisionpay_plaid_user_id&apos;]);</div><div class="slate-code_line">        $precisionpay_registered_user_id = sanitize_text_field($_POST[&apos;precisionpay_registered_user_id&apos;]);</div><div class="slate-code_line"></div><div class="slate-code_line">        // Make sure the plaid link returned what we needed</div><div class="slate-code_line">        if (!$publicToken || !$accountId || !$precisionpay_user_id) {</div><div class="slate-code_line">          throw new Exception(__(&apos;Your bank account is not linked. Please link your account.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        // validate the input:</div><div class="slate-code_line">        $this-&gt;validate_hidden_field($publicToken, __(&apos;Invalid token.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        $this-&gt;validate_hidden_field($accountId, __(&apos;Invalid id.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        $this-&gt;validate_hidden_field($precisionpay_user_id, __(&apos;Invalid Plaid user id.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line"></div><div class="slate-code_line">        // This is optional and only gets set if the customer logs into our Customer Portal but does one-time-pay with Plaid</div><div class="slate-code_line">        if ($precisionpay_registered_user_id) {</div><div class="slate-code_line">          $this-&gt;validate_hidden_field($precisionpay_registered_user_id, __(&apos;Invalid PrecisionPay Account.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        $orderNumber = $this-&gt;get_order_number($order, $order_id);</div><div class="slate-code_line"></div><div class="slate-code_line">        $paymentData = array(</div><div class="slate-code_line">          &apos;public_token&apos;     =&gt; $publicToken,</div><div class="slate-code_line">          &apos;account_id&apos;       =&gt; $accountId,</div><div class="slate-code_line">          &apos;first_name&apos;       =&gt; $order-&gt;get_billing_first_name(),</div><div class="slate-code_line">          &apos;last_name&apos;        =&gt; $order-&gt;get_billing_last_name(),</div><div class="slate-code_line">          &apos;business_name&apos;    =&gt; $order-&gt;get_billing_company(), //? $order-&gt;get_billing_company() : &apos;PrecisionPay Default&apos;,</div><div class="slate-code_line">          &apos;email&apos;            =&gt; $order-&gt;get_billing_email(),</div><div class="slate-code_line">          &apos;one_time_user_id&apos; =&gt; $precisionpay_user_id, // string</div><div class="slate-code_line">          &apos;external_user_id&apos; =&gt; $precisionpay_registered_user_id, // We need to pass this, but it will usually be an empty string</div><div class="slate-code_line">          &apos;amount&apos;           =&gt; floatval($order-&gt;get_total()), // number (int or decimal)</div><div class="slate-code_line">          &apos;order&apos;            =&gt; strval($orderNumber), // &lt;- Needs to come in as a string</div><div class="slate-code_line">          &apos;env&apos;              =&gt; $this-&gt;env, // Lets API know if we are in sandbox or live mode</div><div class="slate-code_line">        );</div><div class="slate-code_line"></div><div class="slate-code_line">        $payResponse = $this-&gt;api_post(&apos;/checkout/one-time-payment&apos;, $paymentData);</div><div class="slate-code_line"></div><div class="slate-code_line">        if (is_wp_error($payResponse)) {</div><div class="slate-code_line">          throw new Exception(__(&apos;Error processing payment.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        if (empty($payResponse[&apos;body&apos;])) {</div><div class="slate-code_line">          throw new Exception(__(&apos;Error processing payment at this time. Please try again later.&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">        }</div><div class="slate-code_line"></div><div class="slate-code_line">        // Retrieve the body&apos;s resopnse if no top level errors found</div><div class="slate-code_line">        $payResponse_body = json_decode(wp_remote_retrieve_body($payResponse));</div><div class="slate-code_line"></div><div class="slate-code_line">        return $payResponse_body;</div><div class="slate-code_line">      }</div></code></pre></div><p class="slate-p " >Each endpoint requires different paymentData, so look at these examples and also check out the API endpoint documentation for more. You can also test out these two endpoints with our <a href="https://developers.myprecisionpay.com/api-runner/myprecisionpay/api-docs" target="_self">API Explorer</a>.</p><p class="slate-p " >Ok once everything is passed to the API you&apos;ll want to handle the response. Here&apos;s an example of what we do with WooCommerce in the process payment function:</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Plain text</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-php keep-markup drop-tokens"><div class="slate-code_line">public function process_payment($order_id)</div><div class="slate-code_line">{</div><div class="slate-code_line">  …</div><div class="slate-code_line">  try {</div><div class="slate-code_line">    if ($payResponse_body &amp;&amp; isset($payResponse_body-&gt;message) &amp;&amp; $payResponse_body-&gt;message == &apos;success&apos;) {</div><div class="slate-code_line">      $order-&gt;add_order_note(__(&apos;Customer successfully paid through PrecisionPay payment gateway&apos;, &apos;precisionpay-payments-for-woocommerce&apos;));</div><div class="slate-code_line">      wc_reduce_stock_levels($order_id);</div><div class="slate-code_line">      $order-&gt;payment_complete();</div><div class="slate-code_line">      $woocommerce-&gt;cart-&gt;empty_cart();</div><div class="slate-code_line"></div><div class="slate-code_line">      // Redirect to thank you page</div><div class="slate-code_line">      return array(</div><div class="slate-code_line">        &apos;result&apos;   =&gt; &apos;success&apos;,</div><div class="slate-code_line">        &apos;redirect&apos; =&gt; $this-&gt;get_return_url($order),</div><div class="slate-code_line">      );</div><div class="slate-code_line">    }</div><div class="slate-code_line">    …</div><div class="slate-code_line">}</div></code></pre></div><p class="slate-p " >In this case if the response is success, then we reduce the stock levels (if necessary), mark the order as payment complete, empty the card, and the redirect to the thank you page.</p><h2 class="slate-h2 " >That&apos;s it!</h2><p class="slate-p " >Congratulations! 🎉 You made it through this guide! It&apos;s always tough when different ecommerce platforms can have such different functions available. But this at least gives you all the parts you should be working with and what to look for in your ecommerce system as you build your payment gateway. Again, this is just an overview with examples from our experience creating a custom gateway. We&apos;ve left some of the explanations out, like handling errors, and some of the other things required by WordPress like the nonce security feature. There are going to be certain things that are specific to your platform that you&apos;ll have to investgate. If you&apos;d like to learn more and see how all of our WooCommerce WordPress plugin code works together <a href="https://github.com/MakeCents-NYC/woocommerce-gateway-precisionpay" target="_self">view the full repository here.</a></p><p class="slate-p " ></p>

OK you've made it this far. The good news is that we're getting to the end and the finish line is in sight! At this point you have all the data you need to make a payment, so now it's time to integrate into your ecommerce system's “Place Order” functionality and process the payment. 

First you will want to see if the customer user authorized the payment using the guest checkout or by using their PrecisionPay Customer account. This can be accomplished by checking if the 

The function pay_with_precisionpay() calls the /checkout/pay endpoint like so:

and the pay_with_plaid() function calls the /checkout/one-time-payment endpoint

Each endpoint requires different paymentData, so look at these examples and also check out the API endpoint documentation for more. You can also test out these two endpoints with our 

Ok once everything is passed to the API you'll want to handle the response. Here's an example of what we do with WooCommerce in the process payment function:

In this case if the response is success, then we reduce the stock levels (if necessary), mark the order as payment complete, empty the card, and the redirect to the thank you page.

Congratulations! 🎉 You made it through this guide! It's always tough when different ecommerce platforms can have such different functions available. But this at least gives you all the parts you should be working with and what to look for in your ecommerce system as you build your payment gateway. Again, this is just an overview with examples from our experience creating a custom gateway. We've left some of the explanations out, like handling errors, and some of the other things required by WordPress like the nonce security feature. There are going to be certain things that are specific to your platform that you'll have to investgate. If you'd like to learn more and see how all of our WooCommerce WordPress plugin code works together 

<h2 class="slate-h2 " >Sandbox PrecisionPay Links</h2><p class="slate-p " >Sandbox API: <a href="https://sandbox.myprecisionpay.com/api" target="_self">https://sandbox.myprecisionpay.com/api</a></p><p class="slate-p " >Customer Portal: <a href="https://sandbox-customer.myprecisionpay.com/" target="_blank"><u class="slate-underline">https://sandbox-customer.myprecisionpay.com/</u></a></p><p class="slate-p " >Merchant Portal: <a href="https://sandbox-portal.myprecisionpay.com/" target="_blank">https://sandbox-portal.myprecisionpay.com/</a></p><p class="slate-p " >Checkout Portal - Use this when building a custom payment gateway: <a href="https://sandbox-checkout.myprecisionpay.com/" target="_blank">https://sandbox-checkout.myprecisionpay.com/</a></p><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><h2 class="slate-h2 " >Branding Info</h2><p class="slate-p " >PrecisionPay Orange hex code: <strong class="slate-bold">#f15a29</strong></p><p class="slate-p " >PrecisionPay Gray hex code: <strong class="slate-bold">#666666</strong></p><h3 class="slate-h3 " >Icons &amp; Logos</h3><p class="slate-p " >Right click and save image to download any of these to use with your PrecisionPay application.</p><p class="slate-p " ><strong class="slate-bold">Main Logo</strong></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/301a7fb1-1725-4e73-b62a-8371fc5728bb.png" alt="" style="
              width:368px;
	            height:48px;
	            aspect-ratio:368 / 48"
         /></div></figure></div><p class="slate-p " ><strong class="slate-bold">Logo Mark alone</strong></p><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/ceb9fc99-d942-47ed-a71f-507174a53e0e.png" alt="" style="
              width:100px;
	            height:100px;
	            aspect-ratio:100 / 100"
         /></div></figure></div><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Use these for darker backgrounds</p><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/bfa88034-8ed1-4baf-a955-c48d1d58facc.png" alt="" style="
              width:382px;
	            height:50px;
	            aspect-ratio:382 / 50"
         /></div></figure></div><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/98461e0f-8cff-4159-ac9e-47cf0c920213.png" alt="" style="
              width:100px;
	            height:100px;
	            aspect-ratio:100 / 100"
         /></div></figure></div></div></div><p class="slate-p " ><strong class="slate-bold">Loading animation</strong></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://theneo-prod-public.s3.us-east-1.amazonaws.com/0b88f51b-cc8f-4796-b51c-45a0f380fe2a.png" alt="" style="
              width:125px;
	            height:125px;
	            aspect-ratio:125 / 125"
         /></div></figure></div><p class="slate-p " >Need help? Contact us at <a href="https://mailto:support@myprecisionpay.com" target="_self">support@myprecisionpay.com</a></p><p class="slate-p " ></p>

Checkout Portal - Use this when building a custom payment gateway: 

Right click and save image to download any of these to use with your PrecisionPay application.

Sections