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


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

Application Usage

In Apruve's workflow, an Order is used to capture your buyer's authorization for a purchase. Once you have an approved Order, you can issue Invoices against that Order. The Invoices can then be paid out by the bank that is backing your credit program.

Apruve's BigCommerce integration allows you to facilitate this process through BigCommerce. Just follow these steps:

  1. Create an Order for a customer with an Apruve account. The customer will get an email from Apruve asking them to confirm that they want to put the order on their Apruve account.
  2. Once the customer accepts the order, you may proceed to ship any products from the original order to kick off the invoicing process.

Managing Apruve Orders through BigCommerce

Apruve Order

To create an Apruve order, simply create an Order in BigCommerce for a customer that has an Apruve corporate account. You should see the order reflected in Apruve's system. An order is flagged as an Apruve order by specifying 'Apruve' in the description field for an order created with the 'Manual Payment' payment method.

Apruve Payment

After the order is created - update the status to 'Manual Verification Required' to initiate the quote approval process for this particular order.

Apruve Order Update

When you create an order for your customer, Apruve will also send an email to them asking them to confirm that they want to place the order on their corporate account. You may want to update the message sent to your customer with the order to let them know this second email is coming to reduce the chance of confusion.

Order Email

Invoicing through Apruve

To invoice for a particular order, we need to receive a notification regarding shipment of an Apruve Order. This can be done in your store through the 'Ship Items' UI when viewing the expanded view of an order.

BigCommerce Shipment

You may ship as many or as few items from the order as appropriate to invoice appropriately for the contents of the shipment.

Generate BigCommerce Shipment

That's it! The merchant will be paid shortly after Apruve receives notification of the shipment, and the customer will have a period of time to pay the corresponding invoice as dictated by the terms of the merchant's credit program.

Any questions? See this video for more.

E-Commerce (Checkout) Integration (Optional)

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",

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