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

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.

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)

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

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 supports specifying PO numbers for your customers' records. If you'd like a PO number to show up in Apruve, enter it in the comments section.

If you have the quotes feature disabled in Apruve, the customer's order will be created and finalized in Apruve at this time.

If you have the quotes feature enabled in Apruve, an email will be sent to the customer for them to accept the quote. In this email there will be a button for them to confirm the order, which will finalize it in Apruve. 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.

At this point the order's status in BigCommerce should be "Awaiting Fulfillment".

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.

You may ship as many or as few items from the order as appropriate to invoice appropriately for the contents of the 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'.

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'.

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.

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"

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

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, please use the values provided in step 2.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
{{inject "bcCart" cart}}
  document.bcCart = JSON.parse({{jsContext}}).bcCart;
  document.bcCart.merchant_id = "MERCHANT_ID";

Lastly, below the layout/empty tag embed the following script for test mode

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

or the following when you are ready to go live.

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

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 [email protected] 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 PrivilegesBigCommerce Design Privileges

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

We'll be adding the following code to this file when you are ready to test our solution,

<div id="ApruveMerchantId" style="display:none;">#{Your Apruve Merchant ID here</div>
<script type="text/javascript" id='apruveCheckoutScript' data-apruve-radio-id="checkout_provider_checkout_cod" src="https://bigcommerce.apruve.com/gateway/authorize_blueprint_test.js"></script>

or this code when you are ready to go live.

<div id="ApruveMerchantId" style="display:none;">#{Your Apruve Merchant ID here}</div>
<script type="text/javascript" id='apruveCheckoutScript' data-apruve-radio-id="checkout_provider_checkout_cod" src="https://bigcommerce.apruve.com/gateway/authorize_blueprint.js"></script>

Note that you may need to adjust thedata-apruve-radio-id to match the Apruve option on your store, as this can vary depending on how you have your store customized.

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 [email protected].https://dash.readme.io/project/apruve/v4.0/docs/integrating-with-bigcommerce

Updated 10 months ago

Integrating with BigCommerce

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.