BigCommerce

Steps to create app

  1. We have to create an app in devtools.bigcommerce.com for every store where we want to add "Credova financing" payment gateway. Please check the below screenshot for app creation First of all click on create an app. After that popup will be displayed.

BigCommerce create app

  1. After that click on "Edit App". Here you can add App Title, Banner and Icon for the app if you want to add. (Please see attached the image url for the app creation)

BigCommerce edit app

Please note that top portion of the App Summary is not necessary to complete.

BigCommerce edit app2

  1. In Technical tab of callback URLs, Please fill with below values
  • Auth Callback URL
    • https://bigcommerce-payment-gateway.credova.com/frontend/web/index.php?r=site/index
  • Load Callback URL
    • https://bigcommerce-payment-gateway.credova.com/frontend/web/index.php?r=site/index
  • Uninstall Callback URL
    • https://bigcommerce-payment-gateway.credova.com/frontend/web/index.php?r=site/uninstall
  1. You have to mention the OAuth scopes to give access to the Api. We have to modify for order, order transaction, checkout content and information and settings. Please configure below settings.

BigCommerce oauth scope

  1. After that click on update & close.

  2. We need Client ID and Secret Key at the time of installation. By click on view Client ID. You can get the values.

BigCommerce client id and secret key

Backend View

  1. App will be shown Apps >> My Draft apps.

BigCommerce my draft apps

Click on Install, Acknowledge, and Confirm. Then connect your store with Credova.

BigCommerce install

BigCommerce confirm

BigCommerce connect

  1. Now Enter the required field “Oauth Client ID” and “Secret Key”. Which we got on the devtools at the time of app creation. After submission of client ID and secret key app installation will complete. Without client ID and secret key App installation will not complete.

BigCommerce app configuration

  1. After that you will see the payment configuration screen. Be sure to use the API credentials provided by Credova consistent with the endpoint you are using (production vs. sandbox mode). Note this is not the same login as your front end Credova admin dashboard.

BigCommerce payment configuration

  1. Then go to your Bigcommerce admin and click Advanced Settings >> Data Solution (Web Analytics). Click on 'Google Analytics' and select ‘Tracking Code’ to enter the JS Script Code.

BigCommerce advanced settings

BigCommerce advanced settings

  1. Code to be added in 'Tracking Code'.
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script defer src="https://plugin.credova.com/plugin.min.js"></script>
<script defer src="https://bigcommerce-payment-gateway.credova.com/frontend/web/js/credova-front.js"></script>

BigCommerce tracking code setup

  1. Then go to Store Setup >> Payments >> Offline Payment Methods and Click on the Setup button corresponding to "Check", click on Check Settings.

BigCommerce offline payment methods

Open “check” payment method and configure its settings:

BigCommerce payment methods

  1. Now, you will add Code for the ‘As low As’ pricing button on the Product Page. Click on the 'Storefront' from the left menu -> My Themes -> Current Theme – if you are unable to select ‘Edit Theme Files’ please create a copy of your theme and select ‘Edit Theme Files’. Once the outlined code below is completed, you will publish this new theme.

BigCommerce payment methods

First, navigate to the templates -> components -> products -> and click on the product-view.html file and search for the <div class="productView-product">

BigCommerce payment methods

Add this code below it :
{{#if product.price.without_tax}}
<div id="credova-p-price" style="display:none">{{product.price.without_tax.value}}</div>
{{/if}}
{{#if product.price.with_tax}}
<div id="credova-p-price" style="display:none">{{product.price.with_tax.value}}</div>
{{/if}}

BigCommerce payment methods

  1. At this point, we have completed the app configuration and set up in the backend of BigCommerce. An example of the Product Page View is included below as reference. You should now see the ‘As low As’ pricing display on the product details page.

BigCommerce payment methods

  1. Backend App Grid View: (Click on Order Listing to get the order list from Credova and manage the order settings)

BigCommerce app grid view

This completes the Credova app installation. For additional information, please visit us at https://credova.com or email us at [email protected]