Install app to BigCommerce using Laravel

How to install an app to BigCommerce platform using Laravel framework

Posted by Luke Beeno on January 7, 2023

Install app to BigCommerce using Laravel

How to install an app to BigCommerce platform using Laravel framework

Posted by Luke Beeno on January 7, 2023

Bigcommerce is an e-commerce solution in which companies can store and sell items digitally. 

The platform also allows you to create your own custom apps and build through laravel framework in order to expand functionality.

Here are the steps to create your custom app and connect it to your laravel project:

Step 1. Create an accout on BigCommerce platform and login

Step 2. Create an app 

Go to this url in order to create the app https://devtools.bigcommerce.com/my/apps

Once the app is created enter your callback url for installing and loading the app in the first step, then click the Update & Close button. 

This url is the url that exposes your local Laravel project to Bigcommerce; you can can use ngrok or something siimilar to acheive this.

If you want to undersatnd how to use ngrok on your local Laravel project go here https://wecode101.com/how-to-use-ngrok-on-a-laravel-project 

Also, click View Client ID

Copy Client ID and Client Secret which will be placed in your Laravel project. This will be shown in the next step.

Step 3. Creat api acount

Now you need to create a api account for the callback urls 

Navigate to page

Enter account details 

Once you created the api account you should be provided with a CLIENT_ID, SECRET, ACCESS_TOKEN and HASH which will be placed in your Laravel project. This will be shown in the next step.

Step 4. Add all credentials to Laravel project

All the credentials provided to you from the previous step add to .env file.

BC_APP_CLIENT_ID=xxxxxxxxxxxxxxxx
BC_APP_CLIENT_SECRET=xxxxxxxxxxxxxxxxx

BC_STORE_CLIENT_ID=xxxxxxxxxxxxx
BC_STORE_SECRET=xxxxxxxxxxxxxxx
BC_STORE_ACCESS_TOKEN=xxxxxxxxxxxxx
BC_STORE_HASH=xxxxxxxxxxx

Also, you can add the details above to config/app.php

Step 5 Run command to create contoller

php artisan make:controller BcAppController

Step 6 Add functionality to install and load app to BigCommerce

Edit file app/Http/Controllers/BcAppController.php, add code below:

    public function install(Request $request)
    {

        try {
            $client = new Client();
            $result = $client->request('POST', 'https://login.bigcommerce.com/oauth2/token', [
                'json' => [
                    'client_id' => env('BC_APP_CLIENT_ID'),
                    'client_secret' => env('BC_APP_CLIENT_SECRET'),
                    'redirect_uri' => env('APP_URL') . '/auth/install',
                    'grant_type' => 'authorization_code',
                ]
            ]);

            $statusCode = $result->getStatusCode();

            if ($statusCode == 200) {
                // If app installed via external link, redirect back to the
                // BC installation success page
                if ($request->has('external_install')) {
                    return redirect('https://login.bigcommerce.com/app/' . env('BC_APP_CLIENT_ID') . '/install/succeeded');
                }
            }

            return redirect('/');
        } catch (RequestException $e) {
            $statusCode = $e->getResponse()->getStatusCode();
            $errorMessage = "An error occurred.";

            if ($e->hasResponse()) {
                if ($statusCode != 500) {
                    $errorMessage = Psr7\Message::toString($e->getResponse());
                }
            }

            // If the merchant installed the app via an external link, redirect back to the
            // BC installation failure page for this app
            if ($request->has('external_install')) {
                return redirect('https://login.bigcommerce.com/app/' . env('BC_APP_CLIENT_ID') . '/install/failed');
            } else {
                dd($errorMessage);
            }
        } catch (GuzzleException $e) {
            dd(Psr7\Message::toString($e->getMessage()));
        }
    }

    public function load(Request $request)
    {
        $signedPayload = $request->input('signed_payload');
        if (!empty($signedPayload)) {
            $verifiedSignedRequestData = $this->verifySignedRequest($signedPayload, $request);
            if ($verifiedSignedRequestData !== null) {
                $request->session()->put('user_id', $verifiedSignedRequestData['user']['id']);
                $request->session()->put('user_email', $verifiedSignedRequestData['user']['email']);
                $request->session()->put('owner_id', $verifiedSignedRequestData['owner']['id']);
                $request->session()->put('owner_email', $verifiedSignedRequestData['owner']['email']);
            } else {
                Session::flash('message', "The signed request from BigCommerce could not be validated.");
                return Redirect::back();
            }
        } else {
            Session::flash('message', "The signed request from BigCommerce was empty.");
            return Redirect::back();
        }

        return redirect('/');
    }

Step 7 Create routes for the endpoints

Route::group(['prefix' => 'auth'], function () {
    Route::get('install', [BcAppController::class, 'install']);
    Route::get('load', [BcAppController::class, 'load']);
});

Step 8. Now install app to Bigcommerce

Now, login to Bigcommerce and navigate to My Apps and install the app you created.

Now you should be able to start building upon your app. Hopefully this was helpful to get you going further.

Any question?
This field is required
Your question have been successfully submitted and will be reviewed before published
Please login to ask a question