Apruve

The Apruve Developer Hub

Welcome to the Apruve developer hub. You'll find comprehensive guides and documentation to help you start working with Apruve as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Integrating with BigCommerce

Prerequisites

This article assumes that you:

  1. Have an existing Apruve Merchant Account on either Apruve's test or production server
  2. Have created an Apruve API Key on either Apruve's test or production server

Whether you want do this on the test server or production server depends on which Apruve server you wish to integrate your Bigcommerce store with.

If you meet the prerequisites, you can skip the rest of this section and move onto Step 1 - otherwise, please follow the instructions below:

Creating a Merchant Account

If you want to integrate with Apruve's test server or production (live) server, you can contact us here to get started.

You will receive an email containing a link to confirm the account - you'll need to confirm it before you can move forward and use it.

Creating an API Key

After you've created and confirmed your Merchant Account, you'll need to create an API Key.

To create an API Key on Apruve's test server, click here

To create an API Key on Apruve's production server, click here

You may be prompted to login before you reach the API Key creation page.

Step 1: Setting up a new Payment Method

Navigating to Payment Methods and Setting up a New One

Navigating to Payments Configuration Panel

First, you'll want to navigate to your Payments configuration panel - you can get there by first clicking on the "Setup & Tools" dropdown near the upper right hand corner of your BigCommerce admin panel - this will cause a menu to pop up. You'll then want to click on the "Payments" link located under the "Set up your store" heading within the popover.

Adding a New Offline Payment Method

Once you're there, you'll see a list of payment methods to choose from - make sure to select an offline payment method that you don't plan on using, as we will be modifying it to work with Apruve instead. We recommend selecting the "Pay in Store" method.

Once you've selected a method by checking the checkbox next to it in the list, you'll need to make sure to hit the save button located near the bottom right corner of the page. Details can be found in the screenshot above - you can click on it to make it bigger.

Step 2: Modifying The Payment Option

What to modify for the Payment Option

Once you've added your new payment option, you'll need to configure it to work with Apruve.

After the payment option is initially added, you'll see a new tab for it located under the "Payment Methods" heading text. Click on the tab to reach the configuration panel for that particular payment method.

Once you're in, you'll want to do two things:

  1. Update the "Display Name" to say something along the lines of "Pay with Apruve" - this text is what will be displayed on the payment 
method label when your customers are selecting a payment option from a list during checkout.
  2. Copy the code snippet below and paste it into the "Payment Information" field - this code will present your customer with some 
nicely-formatted instructions on how to send their payment request off to finalize their order.

Code snippet for "Payment Information" field

<style>
  .apruveInstructions-alt {
    display:none;
  }
  .ReviewOrderContext.apruveInstructions-alt {
    display:block!important
  }
  #apruveDiv {
    margin-top:20px;
  }
</style>
<div class="apruveInstructions">
  <h3 class="heading"></h3>
  <p style="margin-bottom:0;">
  </p>
</div>
<div class="apruveInstructions-alt">
  <h3 class="heading"></h3>
  <p></p>
  <a href='#' onclick="$(this).closest('.OrderItem').find('.ViewOrderLink').click();return false;"></a>
</div>
<div id="apruveDiv">
</div>

Details can be found in the screenshot above - you can click on it to make it bigger.

Step 3: Set up 3rd Party Conversion Tracking to send data to Apruve

The next step is to set up your 3rd party conversion tracking to send some data to Apruve. This is important because this data is what will allow Apruve's server to see the details of the order, which it will then use to create the payment request.

Navigating to Conversion Tracking Configuration Panel

To get to your 3rd Party Conversion Tracking configuration panel, click on the "Setup & Tools" dropdown near the upper right hand corner of your BigCommerce admin panel - this will cause a popover element to pop up. Then click on the "Conversions" link located under the "Customize your store" heading within the popover.

Paste the following code into the text field provided

Use this code snippet for hitting Apruve's test server:
Code snippet for Conversion Tracking (Apruve Test Server)

<script src="https://test.apruve.com/js/apruve_bc.js?order=%%ORDER_ID%%&merchant=[MERCHANT_ID]" type="text/javascript"></script>

Use this code snippet for hitting Apruve's production server (the real thing):
Code snippet for Conversion Tracking (Apruve Production Server)

<script src="https://app.apruve.com/js/apruve_bc.js?order=%%ORDER_ID%%&merchant=[MERCHANT_ID]" type="text/javascript"></script>

After you paste the following code into the text field, you’ll want to make one additional change to it. You’ll want to replace the [MERCHANT_ID] part of the code with your own merchant ID. For instance, if your merchant ID was abcdef12345678901234567890123490, your snippet would look like this:

Example Code snippet for Conversion Tracking

<script src="https://app.apruve.com/js/apruve_bc.js?order=%%ORDER_ID%%&merchant=abcdef12345678901234567890123490" type="text/javascript"></script>

Once you've created a merchant account with Apruve and have set up a store profile, you can find your Apruve Merchant ID within your store profile, under the "Merchant" tab. Please refer to the 2 screenshots below for details.

Finding your Apruve Merchant ID

Setting up conversion tracking to work with Apruve

Step 4: Set up API Credentials

Creating a "Legacy API Account"

To get to your API configuration panel, click on the "Setup & Tools" dropdown near the upper right hand corner of your BigCommerce admin panel, and then click on the "Legacy API Accounts" link located under the "Advanced tools" heading.

Once there, you'll see a button labeled "Create a Legacy API Account" - please click that. Once you do, you'll be shown form with an input field for "Username". Please enter "ApruveClient" there, and then click the "Save" button near the bottom right hand corner of your screen.

Creating a Legacy API Account

Configuring the Legacy API Account

Copying and Saving Important Bits of Info

Once you've saved your BigCommerce API credentials, you'll want to go back to them and copy a couple of things down.

Please refer to this screenshot on how to get back to your credentials after saving them:

How to view a Legacy API Account's credentials

Please refer to this screenshot on what things to copy down:

Legacy API Account Credentials Required by Apruve

You will need these bits of info in a little bit.

Adding BigCommerce Credentials to Apruve Merchant Account

Currently the only way to update a merchant account on Apruve to work with BigCommerce is for Apruve to do it manually. Take the bits of info you copied down in the previous step, and send it to support@apruve.com

Step 5: Modify a few BigCommerce Template Files

There are a few BigCommerce template files you will need to need to modify as well.

Nagivating to Template Editor

You'll first want to click on the "Design" link located on the upper right hand corner of your admin panel - this will take you to a new page.

Once there, you'll want to click on the large round icon labeled 'Edit HTML/CSS'.
How to navigate to template editor

Updating the AccountOrder Panel File

You'll want to do this so that customers can review an order they made with Apruve and still have access to the Apruve button. This way, if they forget to send their payment request on the Thank-You page after checkout, they can still do so later by reviewing their order.

Once you're in the template editor, you'll want to find & open up the template "panel" called "AccountOrder.html".

Finding Panels/AccountOrder.html

Then you'll want to copy the following code and paste it in on line 15 of the AccountOrder template file:

Code for Panels/AccountOrder.html

<div id="apruveDiv><span id="Apruve %%GLOBAL_OrderStatus%%"></span></div>
<script>
    function loadScript(path) {
        var script = document.createElement("script");
        script.src = path;
        script.type = "text/javascript";
        // changed "target" to "head"
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(script);
    };
    
    if (document.getElementById('Apruve Awaiting Payment') != null) {
        loadScript("https://app.apruve.com/js/apruve_bc.js?order=%%GLOBAL_OrderId%%&merchant=[MERCHANT_ID]");
    }
</script>

After you paste the following code into the text field, you’ll want to make one additional change to it. You’ll want to replace the [MERCHANT_ID] part of the code with your own merchant ID. For instance,
if your merchant ID is 1234MerchantID, your code would look something like this:

Example snippet for Panels/AccountOrder.html with Merchant ID

...
    loadScript("https://app.apruve.com/js/apruve_bc.js?order=%%GLOBAL_OrderId%%&merchant=1234MerchantID");
...

After you do this, the template file should look something like this (new pasted code outlined in red):

How Panels/AccountOrder.html should look after code changes

Don't forget to hit save after you update the file!

Updating the AccountOrderStatusItem Snippet File

You'll want to do this so that when customers review their order history, they'll be able to tell if they have any Apruve orders they need to complete by sending out a payment request.

Once you're in the template editor, you'll want to find & open up the template "snippet" called "AccountOrderStatusItem.html".

Finding Snippets/AccountOrderStatusItem.html

Then you'll want to modify line 1, line 9 and line 26 of the AccountOrderStatusItem template file:

Code for Snippets/AccountOrderStatusItem.html

(Line 1)  <li class="OrderItem">
(Line 9)  <a class="ViewOrderLink" onclick="$(this).closest('form').submit(); return false;" href="#">%%LNG_ViewOrder%%</a>
(Line 26) <div style="display:%%GLOBAL_HidePaymentInstructions%%" class="ReviewOrderContext"> - ReviewOrderContext class is important.

After you do this your snippet file should look something like this (changes outlined in red):

How Snippets/AccountOrderStatusItem.html should look after code changes

Don't forget to hit save after you update the file!

Updating your store CSS

Bigcommerce uses the same payment instructions displayed on the Thank-You page in their customer notification emails. Because we don't actually want to show customers the Apruve payment instructions in an email (as they wont make sense), we need to use a CSS (stylesheet) workaround.

Once you're in the template editor, you'll want to find & open up the template Style Sheet file called "styles.css".

Finding styles.css

Then you'll want to scroll down all the way to the bottom of the file and paste in the following lines of code:

Code for styles.css

/* Custom Tweaks for Apruve */
.apruveInstructions, .apruveInstructions-alt {
  color: #0063a6;
  background-color: #d9edf7;
  padding:8px 35px 8px 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border: 1px solid #0063a6;
  border-radius: 4px;
  line-height: 20px;
}
.apruveInstructions .heading, .apruveInstructions-alt .heading {
  color: #0063a6;
  padding-bottom: 0px;
  font-weight: 700;
}
.apruveInstructions p, .apruveInstructions-alt p {
  margin-bottom: 0;
}
.apruveInstructions .heading:before, .apruveInstructions-alt .heading:before {
  content: 'Further Action Required'
}
.apruveInstructions-alt a {
  color:white;
  padding: 4px 12px;
  background-color: #007ccc;
  border-radius: 4px;
  margin-top: 10px;
  display: inline-block;
}
.apruveInstructions p:before {
  content: 'Please click the button below to send your payment request with Apruve and finalize your order:'
}
.apruveInstructions-alt p:before {
  content: 'Please click the button below to review your order details and send your payment request:'
}
.apruveInstructions-alt a:before {
  content: 'Review Order'
}
.NotifyMessage .apruveInstructions {
  display: block !important;
}
.ReviewOrderContext .NotifyMessage .apruveInstructions {
  display: none !important;
}

After you do this, your CSS file should look something like this:

How styles.css should look after code changes

Don't forget to hit save after you update the file!

That's it, you should be done at this point!

If you experience any issues with the integration at this point, please let us know at support@apruve.com.

Integrating with BigCommerce