Step-by-Step Guide to Integrating Dropbox with BigCommerce for Seamless Digital Product Access

Utilizing digital products in your BigCommerce store can be challenging due to BigCommerce’s limitations on file upload sizes.

As a solution, experts often opt to store digital product files on Dropbox and integrate Dropbox with BigCommerce.

First, we need to create an app in Dropbox, grant permissions, generate an API token, and then add a script to query the file and generate a downloadable link.

To create an App in Dropbox follow these steps:

Step 1: First, go to the dropbox.com/developers/apps.
Step 2: Next, click on the Create App Option.

Create app in dropbox

Step 3: Then, choose an API option and select the type of access needed. Name the app and, finally, click the “Create App” button.

permissions in dropbox app

Step 4: Afterward, specify some permissions like:

  • files.metadata.read:- View information about your Dropbox files and folders.
  • sharing.write:- View and manage your Dropbox sharing settings and collaborators.

Step 5: Then, generate the API token by clicking on the generate button keep that API token and add that in the script.

Dropbox Generate access token

Follow these steps to implement the script to get Bigcommerce Digital Products Links:

Step 1: First, Create a custom js file in your theme.

Step 2: Then, create a script that retrieves the product name, generates a downloadable link, and customizes the script to incorporate the downloadable link into the product. Additionally, ensure the link is sent to the customer after order confirmation during checkout.


const access_token = 'access_token';

const search_query = 'digitalproduct';
// Set the API endpoints and headers
const search_url = 'https://api.dropboxapi.com/2/files/search';
const sharing_url = 'https://api.dropboxapi.com/2/sharing/list_shared_links';

const headers = {
    'Authorization': `Bearer ${access_token}`,
    'Content-Type': 'application/json'
};


async function getDownloadableLink(query) {
  const search_data = {
      "query": query,
      "path": "",  // Specify the folder path where you want to search
      "start": 0,
      "max_results": 1 // Limit the results to 1 for the first match
  };

    // Perform the file search
    const search_response = await fetch(search_url, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(search_data)
    });

    try {
        if (search_response.status === 200) {
            const contentType = search_response.headers.get('content-type');
            if (contentType && contentType.includes('application/json')) {
                const search_response_data = await search_response.json();
                const matches = search_response_data.matches || [];

                if (matches.length > 0) {
                    const metadata = matches[0].metadata;
                    const file_id = metadata.id;

                    // Check if a shared link already exists for the file
                    const sharing_list_response = await fetch(sharing_url, {
                        method: 'POST',
                        headers: headers,
                        body: JSON.stringify({ "path": file_id })
                    });

                    const sharing_list_response_data = await sharing_list_response.json();
                    const existingLinks = sharing_list_response_data.links || [];

                    if (existingLinks.length > 0) {
                        const existingLink = existingLinks[0];
                        return existingLink.url; // Return the existing link
                    } else {
                        // Create a shared link for the file
                        const sharing_data = {
                            "path": file_id
                        };

                        const sharing_response = await fetch(sharing_url, {
                            method: 'POST',
                            headers: headers,
                            body: JSON.stringify(sharing_data)
                        });

                        if (sharing_response.status === 200) {
                            const sharing_response_data = await sharing_response.json();
                            if (sharing_response_data.url) {
                                return sharing_response_data.url; // Return the new link
                            }
                        }
                    }
                }
            }
        }
    } catch (error) {
        console.error("Failed to process the response:", error);
    }

    return null; // Return null if no link is found
}

// Call the function and get the downloadable link
getDownloadableLink()
    .then((link) => {
        if (link) {
            console.log("Downloadable Link:", link);
        } else {
            console.log("No link found.");
        }
    });

For any support on Bigcommerce and to get the full script kindly contact us at manish@bay20.com or WhatsApp us at +91-8800519180.