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

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.

Step 1: Installing Apruve

Installing Apruve

Navigating to Apruve

First, you'll want to find and install Apruve from the app marketplace - you can get there by navigating to the Apps section of the side-nav in your store management app. After clicking 'Install', you will be asked to confirm the access to your store. Click confirm to complete the OAuth exchange process between your store and Apruve.

What to modify for the Payment Option

Step 2: Wrapping up the Installation Process

Once you've installed Apruve, you'll be asked to provide the credentials described above (API Key, and Merchant ID)
Installation Process

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. Navigate to 'Advanced Settings' -> 'Web Analytics', and select 'Google Analytics'.
Apruve Tracking

In the Tracking Code section, paste the following code snippet while you are in test mode:

<script src="https://test.apruve.com/js/v4/apruve.js" type="text/javascript"></script>

or this if you are ready to go live:

<script src="https://app.apruve.com/js/v4/apruve.js" type="text/javascript"></script>

Step 4: Add Apruve as a payment method

Next, you'll want to add Apruve as a payment method to your store. To do this, navigate to 'Store Setup' -> 'Payments' and expand the Offline Payment Methods option. Select 'Pay in Store'.

Add Apruve Payment Method

There's just a few edits you'll need to make to the payment method - namely updating the name of the payment method to 'Pay with Apruve - B2B credit management' and providing some payment information for the order confirmation page. See below for potential details to provide in this field.

Customize Apruve Payment Method

Step 5: Modify a few BigCommerce Template Files

There are a few BigCommerce template files you will need to need to modify as well, specifically the checkout.html file. Currently, Apruve is only optimized to integrate with Optimized Single Page Checkout

Nagivating to Template Editor

You'll want to "Storefront" -> "My Themes"

Theme Editor

In the dropdown for your current theme, select 'Advanced' - > 'Edit Theme Files'. Navigate to 'templates/pages/checkout.html' in your file tree:

Checkout edit

Edit the Checkout Template

In the checkout template you'll need to make the following changes between the optimized checkout script on lines 7-9 and above the closing partial for handlebars on line 34. For Merchant ID and API Key, please use the values provided in step 2.

Apruve Cart

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    
    <div class="apruve-cart" style="display:none;">
      {
        "purchase_order": {
          "items": {{json cart.items}},
          "tax": {{json cart.taxes}},
          "total": {{json cart.sub_total}},
          "grand_total": {{json cart.grand_total}},
          "merchant_id": "MERCHANT_ID",
        }
      }
    </div>

Lastly, below the layout/empty tag Footer script

embed the following script

<script src="http://bigcommerce.apruve.com/gateway/authorize_test.js"></script>

for test mode or

<script src="http://bigcommerce.apruve.com/gateway/authorize.js"></script>

when you are ready to go live.

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

Step 6: Setting up BigCommerce with Blueprint (optional)

Presently, BigCommerce recommends that stores switch to the Optimized Single Page Checkout with Stencil. If however, your store is using a customized checkout template using custom one-page checkout, you will be using the legacy blueprint templating for your checkout page.

By the nature of using a 'custom one-page checkout' solution, each store may have a different setup for this option - so please don't hesitate to reach out to support@apruve.com with any questions as we work through the nuances of your store's configuration. Granting a member of support a minimal permission set of 'Store Design' & 'Design Mode' privileges in System Admin Permissions is a great way to smooth out the integration process as we work through your store's customized setup.

BigCommerce Design Privileges

First - navigate to Storefront -> Template Files in your admin panel and edit the checkout_express.html file.

BigCommerce Blueprint Checkout

We'll be adding the following code to this file:

<div id="ApruveMerchantId" style="display:none;">#{Your Apruve Merchant ID here</div>
<script src="http://bigcommerce.apruve.com/gateway/authorize_blueprint_test.js"></script>

while you test our solution or,

<div id="ApruveMerchantId" style="display:none;">#{Your Apruve Merchant ID here}</div>
<script src="http://bigcommerce.apruve.com/gateway/authorize_blueprint.js"></script>

when you are ready to go live.

BigCommerce Blueprint Checkout Edit

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