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.

<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