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

2. 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)

• Logo Image: https://bigcommerce-payment-gateway.credova.com/frontend/web/images/Credova.png
• App Icon: https://bigcommerce-payment-gateway.credova.com/frontend/web/images/credova-icon.png

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

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

5. After that click on update & close.

6. We need client ID and secret key at the time of installation. By click on view client ID. You can get the values.

Backend View

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

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

3. After that you will see the payment configuration screen.

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

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

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

Open “check” payment method and configure its settings:

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

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

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}}

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

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

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