If you are not aware of the JavaScript SDK, this PayPal guide does a great job of explaining the JavaScript SDK integration. Basically, the PayPal payment buttons use JavaScript callbacks instead of redirecting the payer to a return URL. Below is a diagram of the flow and the 4 steps as described by PayPal.

Your payer takes the following actions:

1. Clicks a payment button.
2. Logs into PayPal.
3. Approves the transaction on PayPal.
4. Returns to your site where you show the payer a confirmation page.

Since I had only integrated with PayPal Express checkout, I decided to switch to the PayPal REST APIs and created this tutorial based on my learning. PayPal does a great job of introducing you to the JavaScript SDK with the PayPal Integration Builder. The example from the integration builder from PayPal is a great starting point but it is not complete and is only implemented in NodeJS. So I completed a proof of concept using Laravel 10 and created this tutorial from that PoC. The application in this tutorial uses PayPal’s Standard Checkout to purchase a digital item and stores the payment information in a payments database. Once the purchase is completed, the digital item (In this case, it is a free image) is made available on the same page. You can see Images of the integration below and you can do a live test using the PayPal Sandbox here.

You can use the following test User for testing email: sb-kad4928343310@personal.example.com
password: wDCx)28 . So let’s start the tutorial

Step 1: Create a PayPal account

You can go to https://developer.paypal.com to create a developer account. You will need to create a new app so that you can get a clientID and secret for the new ID. Click on the “Create App” button in order to create an app. Once you’ve created the app, you will be able to get sandbox and production values for your app which will look something similar to the image below

Go ahead and create production and sandbox credentials since we will need these later when we setup our laravel app

Step 2: Install a new Laravel instance

Let’s start with a fresh Laravel instance. I use composer to install laravel for a new project that I called paypal-app. Here is the composer command

composer create-project laravel/laravel paypal-app

Step 3:Create the Laravel routes

Let’s go ahead and define the routes for our application. Since it is a single-page app where all the entire checkout process happens on the same page, we will be mostly interacting with POST commands that will be called via AJAX calls. We will need to define 3 routes as follows:

1. The checkout route where the PayPal checkout button will be displayed
2. The purchase route where we will initiate the purchase (done via POST)
3. The capture order route where we will confirm the payment and store the payment in our payments database (done via POST)

They will interact with a Checkout controller that we will be creating soon but we can already define it inside our routes file. The 3 routes look like so inside the web routes file.

Route::get(  '/',   [CheckoutController::class, 'checkout'])->name('checkout');
Route::post(  '/order',   [CheckoutController::class, 'createOrder'])->name('order');
Route::post(  '/capture',   [CheckoutController::class, 'captureOrder'])->name('capture');

And here is the full contents of the web.php file:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CheckoutController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get(  '/',   [CheckoutController::class, 'checkout'])->name('checkout');
Route::post(  '/order',   [CheckoutController::class, 'createOrder'])->name('order');
Route::post(  '/capture',   [CheckoutController::class, 'captureOrder'])->name('capture');

Step 4: Create a PayPal configuration file

Next, we need to create a custom configuration file to store the PayPal configuration information. Unfortunately, there is no artisan command to create a custom config file so you will have to manually create a file called paypal.php inside the config/ folder. This custom PayPal config file will store your API credentials along with a sample item that we will use for this tutorial. It also contains the sandbox and production endpoints used by PayPal. The sample item that we will be allowing users to purchase is this image of Krusty the Clown’s Frosty Krusty Flakes.

Below is the contents of the PayPal config file. Don’t forget to change the PayPal client ID and secret to your own client and secret values.

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | sandbox enabled
    |--------------------------------------------------------------------------
    |
    | This option enables/disables the paypal sandbox. This value can be set 
    | through the PAYPAL_SANDBOX_ENABLED environment variable
    |
    */
    'sandbox_enabled' => env('PAYPAL_SANDBOX_ENABLED', true),

    /*
    |--------------------------------------------------------------------------
    | Sandbox Settings
    |--------------------------------------------------------------------------
    |
    | PayPal sandbox settings for the client, secret and endpoints
    |
    */
    'client_id_sandbox' => '[YOUR-PAYPAL-CLIENT-ID-FOR-SANDBOX]',
    'client_secret_sandbox' => '[YOUR-PAYPAL-SECRET-FOR-SANDBOX]',
    'auth_endpoint_sandbox' => 'https://api-m.sandbox.paypal.com/v1/oauth2/token',
    'checkout_endpoint_sandbox' => 'https://api-m.sandbox.paypal.com/v2/checkout/orders',

    /*
    |--------------------------------------------------------------------------
    | Production Settings
    |--------------------------------------------------------------------------
    |
    | PayPal production settings for the client, secret and endpoints
    |
    */
    'client_id_production' => '[YOUR-PAYPAL-CLIENT-ID-FOR-PRODUCTION]',
    'client_secret_production' => '[YOUR-PAYPAL-SECRET-FOR-PRODUCTION]',
    'auth_endpoint_production' => 'https://api-m.paypal.com/v1/oauth2/token',
    'checkout_endpoint_production' => 'https://api-m.paypal.com/v2/checkout/orders',

    /*
    |--------------------------------------------------------------------------
    | Sample Prodct Settings
    |--------------------------------------------------------------------------
    | This is the sample product that we will use for the Proof of Concept
    | This should actually be stored as a database of items but I'm cheating for
    | the PoC. The content that we will make available to the purchaser is an image
    | of Krusty the Clown's Frosty Krusty Flakes from the Simpsons
    | note: you can't use asset with artisan so I need to check if running in console
    | see: https://stackoverflow.com/questions/45152585/laravel-php-artisan-produces-error
    |
    */
    'sample_item_number' => 'SIMPSONS-0001',
    'sample_item_name' => 'Frosty Krusty Flakes',
    'sample_item_description' => 'Frosty Krusty Flakes from Krusty the Clown - The Breakfast of Underachievers',
    'sample_item_price' => 1.25,
    'sample_item_currency' => 'USD',
    'sample_item_content' => app()->runningInConsole() ? '' : "<img src='" . asset('/images/Frosty_Krusty_Flakes_comic.png') . "' width='100%' />",

];

Notice that the sample item is added directly inside the configuration file. That is because this is a quick Proof of Concept. You should store your products in a database and create a model to access them.

Step 5: create a model and migration to store the payments

Since the primary purpose of our app is to process and store PayPal payments, we will create a Payment model along with a Payment migration. The Payment is where all the payment information will be stored. Here is the artisan command to create both

php artisan make:model Payment -m

We now have a Payment model as well as a payment migration. The payment model will contain all the payment data returned from PayPal once a payment is completed. For now, there is nothing to change in the file Models/Payment.php Here is the full content of the file

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Payment extends Model
{
    use HasFactory;
}

The payment migration file will be located inside database/migrations. The migration file will contain all the PayPal fields that we want to store in our database whenever a payment is completed. It will have all payment-related data that we collect from PayPal such as the payer information, the transaction details and the purchased item details. Here are the contents of the payment migration file

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('payments', function (Blueprint $table) {

            $table->id();

            $table->string('order_id');
            $table->string('order_status');
            $table->string('payer_id');
            $table->string('payer_name');
            $table->string('payer_email');
            $table->string('payer_country');
            $table->float('paid_amount', 10, 2);
            $table->string('paid_amount_currency');
            $table->string('transaction_id');
            $table->string('transaction_status');
            $table->string('payment_source');
            $table->string('item_number');
            $table->string('item_name');
            $table->float('item_price', 10, 2);
            $table->string('item_price_currency');

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('payments');
    }
};

Now that the migration has been created, lets go ahead and create the payments table via a migration. Update your .env file to define your database information and run the migration. In my case, I created a MySQL database called paypal to store the payments as follows

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=paypal
DB_USERNAME=mifty
DB_PASSWORD=XXXXXXXX

With your database setup, you can now run the migration command below:

    php artisan migrate 

Once this command finishes, the payments table should be created in your database.

Step 6: create the PayPal Trait

We will create a trait to store all the low-level PayPal communications. A trait in Laravel allows you to create a reusable piece of code that can be shared across multiple classes. This PayPal trait can be used in our future Checkout controller as well as any class that needs to communicate with PayPal. Unfortunately, there is no artisan command to create a trait but we can create a new file in the app/Traits folder called PayPalTrait.php

This PayPalTrait.php trait will use make REST calls to various PayPal endpoints.The three operations that this trait needs to complete are:

1. Get the PayPal access tokens through getPayPalAccessToken()
2. Use the access token to create a PayPal order request through createPayPalOrder()
3. Once the user makes the payment, use the access token to capture the PayPal order through capturePayPalOrder()

A closer look at any one of these three functions shows that they use Guzzle to communicate with PayPal. I tried using Laravel’s HTTPClient, which is based on Guzzle but I couldn’t get it to work as well as the old faithful Guzzle. After a lot of frustration, I just decided to use the Guzzle HTTP Client instead. Here are the contents of getPayPalAccessToken() which passes the client ID and client secret to PayPal in order to get an access token.

    /**
     * Generate an OAuth 2.0 access token for authenticating with PayPal REST APIs.
     * @see https://developer.paypal.com/api/rest/authentication/
     */
    public function getPayPalAccessToken()
    {
        //get the PayPal client ID and secret along with the auth endpoint
        $clientID = $this->getPayPalClientID();
        $clientSecret = $this->getPayPalClientSecret();
        $authEndpoint = $this->getPayPalAuthEndpoint();

        try {
            // use Guzzle Client to build the request to receive the access token
            $token = base64_encode($clientID . ":" . $clientSecret);
            $client = new \GuzzleHttp\Client();
            $response = $client->request('POST', $authEndpoint, [
                'headers' => [
                    'Accept' => 'application/json',
                    'Authorization' => 'Basic ' . $token
                ],
                'form_params' => [
                    'grant_type' => 'client_credentials'
                ]
            ]);

            // check the status code to make sure that we got a successful response from PayPal
            $statusCode = $response->getStatusCode();
            if ($this->isSuccessfulResponse($statusCode)) {
                // decode our response body to retrieve our access token
                $data = json_decode($response->getBody());
                $accessToken = $data->access_token;

                return $accessToken;
            }

        } catch (\GuzzleHttp\Exception\RequestException $e) {
            // we got either  a 400 or 500 response error
            $error['error'] = $e->getMessage();
            $error['request'] = $e->getRequest();
            if ($e->hasResponse()) {
                if ($e->getResponse()->getStatusCode() == '400') {
                    $error['response'] = $e->getResponse();
                }
            }
            // log the error
            Log::error('Error occurred in getPayPalAccessToken request.', ['error' => $error]);

            // due to the error, we did not get an access token return an empty access token
            return "";
        } 
    }

Besides these main functions, there are various helper functions to get the configuration values based on the PayPal environment such as getPayPalClientID() and getPayPalClientSecret() which are self-explanatory. Below is the full contents of the PayPalTrait.php file

<?php

namespace App\Traits;

use Illuminate\Support\Facades\Log;
use Illuminate\Support\Arr;

trait PayPalTrait
{

    /**
     * Get the client ID based on the sandbox configuration parameter
     */
    public function getPayPalClientID()
    {
        $clientID = config('paypal.client_id_sandbox');
        if (!config('paypal.sandbox_enabled')) {
            $clientID = config('paypal.client_id_production');
        }

        return $clientID;
    }

    /**
     * Get the client Secret based on the sandbox configuration parameter
     */
    public function getPayPalClientSecret()
    {
        $clientSecret = config('paypal.client_secret_sandbox');
        if (!config('paypal.sandbox_enabled')) {
            $clientSecret = config('paypal.client_secret_production');
        }

        return $clientSecret;
    }

    /**
     * Get the auth endpoint based on the sandbox configuration parameter
     */
    public function getPayPalAuthEndpoint()
    {
        $authEndpoint = config('paypal.auth_endpoint_sandbox');
        if (!config('paypal.sandbox_enabled')) {
            $authEndpoint = config('paypal.auth_endpoint_production');
        }

        return $authEndpoint;
    }


    /**
     * Get the checkout endpoint based on the sandbox configuration parameter
     */
    public function getPayPalCheckoutEndpoint()
    {
        $endpoint = config('paypal.checkout_endpoint_sandbox');
        if (!config('paypal.sandbox_enabled')) {
            $endpoint = config('paypal.checkout_endpoint_production');
        }

        return $endpoint;
    }

    /**
     * determines if a response is a successful response based on the status code
     */
    private function isSuccessfulResponse($statusCode)
    {
        return ($statusCode >= 200 || $statusCode < 300);
    }


    /**
     * Generate an OAuth 2.0 access token for authenticating with PayPal REST APIs.
     * @see https://developer.paypal.com/api/rest/authentication/
     */
    public function getPayPalAccessToken()
    {
        //get the PayPal client ID and secret along with the auth endpoint
        $clientID = $this->getPayPalClientID();
        $clientSecret = $this->getPayPalClientSecret();
        $authEndpoint = $this->getPayPalAuthEndpoint();

        try {
            // use Guzzle Client to build the request to receive the access token
            $token = base64_encode($clientID . ":" . $clientSecret);
            $client = new \GuzzleHttp\Client();
            $response = $client->request('POST', $authEndpoint, [
                'headers' => [
                    'Accept' => 'application/json',
                    'Authorization' => 'Basic ' . $token
                ],
                'form_params' => [
                    'grant_type' => 'client_credentials'
                ]
            ]);

            // check the status code to make sure that we got a successful response from PayPal
            $statusCode = $response->getStatusCode();
            if ($this->isSuccessfulResponse($statusCode)) {
                // decode our response body to retrieve our access token
                $data = json_decode($response->getBody());
                $accessToken = $data->access_token;

                return $accessToken;
            }

        } catch (\GuzzleHttp\Exception\RequestException $e) {
            // we got either  a 400 or 500 response error
            $error['error'] = $e->getMessage();
            $error['request'] = $e->getRequest();
            if ($e->hasResponse()) {
                if ($e->getResponse()->getStatusCode() == '400') {
                    $error['response'] = $e->getResponse();
                }
            }
            // log the error
            Log::error('Error occurred in getPayPalAccessToken request.', ['error' => $error]);

            // due to the error, we did not get an access token return an empty access token
            return "";
        } 
    }

    /**
     * create an Order using OAuth 2.0
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
     */
    public function createPayPalOrder($accessToken, $payload)
    {
        // get the paypal checkout endoint
        $checkoutEndpoint = $this->getPayPalCheckoutEndpoint();

        try {
            // use Guzzle Client since I cant get HTTPClient to work
            $client = new \GuzzleHttp\Client();
            $response = $client->request('POST', $checkoutEndpoint, [
                'headers' => [
                    'Content-Type' => 'application/json',
                    'Authorization' => 'Bearer ' . $accessToken
                    // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
                    // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
                    // 'PayPal-Mock-Response' => '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
                    // 'PayPal-Mock-Response' => '{"mock_application_codes": "PERMISSION_DENIED"}'
                    // 'PayPal-Mock-Response' => '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
                ],
                'json' => $payload
            ]);

            $statusCode = $response->getStatusCode();
            if ($this->isSuccessfulResponse($statusCode)) {
                // store the response as an array and add the status code to the array
                $data = json_decode($response->getBody(), true);
                $data = Arr::add($data, 'statusCode', $statusCode);

                return $data;
            }
        } catch (\GuzzleHttp\Exception\RequestException $e) {
            // we got either  a 400 or 500 response error
            $error['error'] = $e->getMessage();
            $error['request'] = $e->getRequest();
            if ($e->hasResponse()) {
                if ($e->getResponse()->getStatusCode() == '400') {
                    $error['response'] = $e->getResponse();
                }
            }
            // log the error
            Log::error('Error occurred in createPayPalOrder request.', ['error' => $error]);
            dd($error);

            // due to the error, return an empty response
            return [];
        }
    }

    /**
     * capture payment for an order using OAuth 2.0
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_capture
     */
    public function capturePayPalOrder($accessToken, $orderID)
    {
        // build the paypal endoint
        $checkoutURL = $this->getPayPalCheckoutEndpoint() . "/" . $orderID . "/capture";

        try {
            // use Guzzle Client since I cant get HTTPClient to work
            $client = new \GuzzleHttp\Client();
            $response = $client->request('POST', $checkoutURL, [
                'headers' => [
                    'Content-Type' => 'application/json',
                    'Authorization' => 'Bearer ' . $accessToken
                    // Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
                    // https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
                    // 'PayPal-Mock-Response' => '{"mock_application_codes": "INSTRUMENT_DECLINED"}'
                    // 'PayPal-Mock-Response' => '{"mock_application_codes": "TRANSACTION_REFUSED"}'
                    // 'PayPal-Mock-Response' => '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
                ]
            ]);

            $statusCode = $response->getStatusCode();
            if ($this->isSuccessfulResponse($statusCode)) {
                // store the response as an array and add the status code to the array
                $data = json_decode($response->getBody(), true);
                $data = Arr::add($data, 'statusCode', $statusCode);

                return $data;
            }
        } catch (\GuzzleHttp\Exception\RequestException $e) {
            // we got either  a 400 or 500 response error
            $error['error'] = $e->getMessage();
            $error['request'] = $e->getRequest();
            if ($e->hasResponse()) {
                if ($e->getResponse()->getStatusCode() == '400') {
                    $error['response'] = $e->getResponse();
                }
            }
            // log the error
            Log::error('Error occurred in capturePayPalOrder request.', ['error' => $error]);

            // due to the error, return an empty response
            return [];
        }
    }
}

Step 7: create the CheckoutControler

We are finally ready to define the checkout Controller which will handle the payment-related work and use the PayPal trait to handle the low-level Paypal communications. You can use the following command to create the Checkout Controller.

php artisan make:controller CheckoutController

This will create the CheckoutController inside the App/Http/Controllers folder of our app. As covered in the routes definition, we will need this controller to handle the three main functions of this app which are to display the checkout page, create the PayPal order and capture the PayPal order. That’s why I’ve created 3 functions called checkout(), createOrder() and captureOrder(). Try to guess which function does what 🙂 . I also have a function to store the payment in the payments database called storePayment(). Let’s do a quick overview of each function

checkout()

The checkout() function is the only function that will be returning a view. It gets the PayPal client ID and sample item information from the paypal.php configuration file, which it passes over to a view called checkout. We will cover the view later, but for now, you need to know that the view needs the PayPal client ID since we must pass it as a parameter to the PayPal Javascript SDK. The item details are needed for the view to display the item information to the user. Here is the full code for the checkout() function

    /**
     * Create the checkout page
     * @see https://developer.paypal.com/integration-builder/ for the NodeJS version
     */
    public function checkout()
    {
        // get our paypal clientID for the view
        $clientID = $this->getPayPalClientID();

        // get the sample item details from our configuration file
        $item = $this->getItem();
        
        return view('checkout', ['clientID' => $clientID, 'item' => $item]);

    }

createOrder()

The createOrder() function is called via an AJAX POST request after the user clicks on the PayPal button. It is responsible for passing the item details to PayPal and to also indicate our intent to capture the payment. Your only two possible intents for a payment are to either authorize or capture. Some background information, the basic payment flow, including the PayPal flow follows these 5 steps:

1. The payer checks out and provides a card for payment.
2. You authorize the payment.
3. A hold is placed on the payer’s card until you are ready to capture payment.
4. You finalize the transaction and capture the payment.
5. The payer’s card is charged.

An authorization places a hold on the funds and is valid for 29 days. If the authorization is not captured within 29 days, the hold is released. It is possible to do both at the same time by simply stating that you intend to capture the funds immediately after the authorization happens. That is what our intent to capture tells PayPal.

The rest of the PayPal payload contains the basic information about the item being purchased such as price and currency. Although the PayPal payload is pretty easy to follow, you should pay special attention to the “custom_id” field. This field should contain your internal product ID and it will be returned by PayPal later when you capture the order.

A cart object is returned from the frontend with the item number. After we have verified that the item number is valid, we fetch the item details and pass the item as a payload to PayPal along with our intent to capture the payment. (Note: Be careful to properly format the PayPal payload, otherwise, your request will be rejected) Then we call the PayPal trait function getPayPalAccessToken() to get an access token which we must pass to PayPal for our PayPal request to be valid. Finally we call the PayPal trait function createPayPalOrder() which expects the access token as well as the payload. This function will make a request to PayPal to create our order. If the request is successful, Paypal will return an order ID in their response. We need to pass this order ID back to the frontEnd. So once we get the response back from PayPal, we will pass it back as the response to the POST request that we got from the frontEnd since it will contain the order ID. Below is the full code for createOrder():

    /**
     * Create an order to start the transaction.
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
     */
    public function createOrder(Request $request)
    {
        // get the cart data from the request and validate the items in the cart
        $cartData = $request->input('cart');

        // get the sample item details from our configuration file
        $item = $this->getItem();

        /**
         * this is where we can add the validation logic for the item that we are about to create an order for
         * since I only have a sample prodct in the configuration file, I will just validate that the sample item
         * is what was returned
         */

        if ($cartData[0]["item"] != $item["id"]) {
            // create an error response since this is not an expected item
            $response = [
                "error" => "Invalid Item",
                "details" => [
                    [
                        "issue" => "Invalid Item Provided",
                        "description" => "Item " . $item["id"] . " is not in our inventory!",
                    ]
                ],
                "debug_id" => "INTERNAL ERROR"
            ];
            return response()->json($response);
        }

        // get an access token & create our payload for the order capture
        $token = $this->getPayPalAccessToken();
        $payload = [
            'intent' => 'CAPTURE',
            'purchase_units' => [
                [
                    'amount' => [
                        'currency_code' => $item["currency"],
                        'value' => $item["price"],
                        'breakdown' => [
                            'item_total' => ['value' => $item["price"], 'currency_code' => $item["currency"]]
                        ]
                    ],
                    'items' => [
                        [
                            'name' => $item["name"],
                            'quantity' => 1,
                            'description' => $item["description"],
                            'sku' => $item["id"],
                            'category' => 'DIGITAL_GOODS',
                            'unit_amount' => ['value' => $item["price"], 'currency_code' => $item["currency"]]
                        ]
                    ],
                    "custom_id" => $item["id"], // used as out internal ID for the product for later retreival
                ]
            ]
        ];

        // create the PayPal order
        $response = $this->createPayPalOrder($token, $payload);

        // return the json response
        return response()->json($response);
    }

captureOrder()

The captureOrder() function is called once the user has provided their information and clicked the submit button on the PayPal window to finalize their payment. Once the user submits their payment information, an order ID is created and this ID must be passed back to the backend via an AJAX POST call. This POST request calls captureOrder() with the order ID. This orderID must be passed to PayPal in order to finalize the payment. captureOrder() uses the PayPal trait function getPayPalAccessToken() to get an access token. This access token, along with the order ID from the frontend must be sent over to PayPal to complete the payment and get the payment details. We use the PayPal trait capturePayPalOrder() to make the request to PayPal. If the capturePayPalOrder() request is successful, then the payment details will be returned. The payment details then need to be stored in our payments database, which is handled by the storePayment() function. Once the payment has been stored in our database, we then retrieve the contents of the paid item and pass it along with the PayPal payment response via AJAX to the frontend. This will allow the frontend to know that the payment was successful and also make the item content available to the user. Below is the full code for createOrder():

    /**
     * capture an order based on a transaction ID
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
     */
    public function captureOrder(Request $request)
    {
        // get the orderID and get access token
        $orderID = $request->input('orderID');
        $token = $this->getPayPalAccessToken();

        // capture the PayPal order and store the captured payment
        $response = $this->capturePayPalOrder($token, $orderID);

        // if we got a succesful payment, then store it in our payments database
        if ($response["statusCode"] >= 200 && $response["statusCode"] < 300) {

            // store the payment
            $this->storePayment($response);

            // attach the purchased good to the response
            $itemContent = config('paypal.sample_item_content');
            $response = Arr::add($response, 'purchased_content', $itemContent);

        }

        // return the json response
        return response()->json($response);
    }

storePayment()

The storePayment() function is used to parse the returned PayPal payment data and build a Payment object that is stored in the database. This function is pretty simple so no analysis of the function is really needed. There are only points to make:

1. The “custom_id” field is very important. This should contain your internal product ID so that you are able to know what item was purchased. When the order was created in the createOrder() function, the custom_id field was populated with the sample item’s item number. According to Paypal, “The API caller-provided external ID. Used to reconcile client transactions with PayPal transactions. Appears in transaction and settlement reports but is not visible to the payer.”. In this tutorial, I do a basic check to make sure that the value of custom_id matches the item_number of my sample item. If you have multiple items in your database, you should make sure that the value of custom_id matches a product in your database.
2. The PayPal return object format is very specific and takes some time to get used to. Although the structure makes sense, it takes some time to get used to it. So be prepared to be frustrated if this is your first time interacting with this object.

Below is the full content of the Checkout controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\URL;

use App\Traits\PayPalTrait;
use App\Models\Payment;

class CheckoutController extends Controller
{
    // load the paypal trait
    use PayPalTrait;

    /**
     * Create the checkout page
     * @see https://developer.paypal.com/integration-builder/ for the NodeJS version
     */
    public function checkout()
    {
        // get our paypal clientID for the view
        $clientID = $this->getPayPalClientID();

        // get the sample item details from our configuration file
        $item = $this->getItem();
        
        return view('checkout', ['clientID' => $clientID, 'item' => $item]);

    }

    /**
     * Create an order to start the transaction.
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
     */
    public function createOrder(Request $request)
    {
        // get the cart data from the request and validate the items in the cart
        $cartData = $request->input('cart');

        // get the sample item details from our configuration file
        $item = $this->getItem();

        /**
         * this is where we can add the validation logic for the item that we are about to create an order for
         * since I only have a sample prodct in the configuration file, I will just validate that the sample item
         * is what was returned
         */

        if ($cartData[0]["item"] != $item["id"]) {
            // create an error response since this is not an expected item
            $response = [
                "error" => "Invalid Item",
                "details" => [
                    [
                        "issue" => "Invalid Item Provided",
                        "description" => "Item " . $item["id"] . " is not in our inventory!",
                    ]
                ],
                "debug_id" => "INTERNAL ERROR"
            ];
            return response()->json($response);
        }

        // get an access token & create our payload for the order capture
        $token = $this->getPayPalAccessToken();
        $payload = [
            'intent' => 'CAPTURE',
            'purchase_units' => [
                [
                    'amount' => [
                        'currency_code' => $item["currency"],
                        'value' => $item["price"],
                        'breakdown' => [
                            'item_total' => ['value' => $item["price"], 'currency_code' => $item["currency"]]
                        ]
                    ],
                    'items' => [
                        [
                            'name' => $item["name"],
                            'quantity' => 1,
                            'description' => $item["description"],
                            'sku' => $item["id"],
                            'category' => 'DIGITAL_GOODS',
                            'unit_amount' => ['value' => $item["price"], 'currency_code' => $item["currency"]]
                        ]
                    ],
                    "custom_id" => $item["id"], // used as out internal ID for the product for later retreival
                ]
            ]
        ];

        // create the PayPal order
        $response = $this->createPayPalOrder($token, $payload);

        // return the json response
        return response()->json($response);
    }

    /**
     * capture an order based on a transaction ID
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
     */
    public function captureOrder(Request $request)
    {
        // get the orderID and get access token
        $orderID = $request->input('orderID');
        $token = $this->getPayPalAccessToken();

        // capture the PayPal order and store the captured payment
        $response = $this->capturePayPalOrder($token, $orderID);

        // if we got a succesful payment, then store it in our payments database
        if ($response["statusCode"] >= 200 && $response["statusCode"] < 300) {

            // store the payment
            $this->storePayment($response);

            // attach the purchased good to the response
            $itemContent = config('paypal.sample_item_content');
            $response = Arr::add($response, 'purchased_content', $itemContent);

        }

        // return the json response
        return response()->json($response);
    }

    /**
     * store a captured payment
     * @see https://developer.paypal.com/docs/api/orders/v2/#orders_create
     */
    private function storePayment($capturedPayment)
    {
        // get the sample item details from our configuration file
        $item = $this->getItem();

        // add the transaction in our transactions Database.
        if (!empty($capturedPayment) && !empty($capturedPayment['payer'])) {

            // get the order details
            $orderID = $capturedPayment['id'];
            $orderStatus = $capturedPayment['status'];

            // get the payment details
            $purchaseUnit = $capturedPayment['purchase_units'][0];
            $paidAmount = 0;
            $paidAmountCurrency = "N/A";
            $transactionID = "N/A";
            $transactionStatus = "UNKNOWN";
            $transactionItemID = "UNKNOWN";
            if (!empty($purchaseUnit['payments']['captures'][0])) {
                $payment_capture = $purchaseUnit['payments']['captures'][0];
                $transactionID = $payment_capture['id'];
                $transactionStatus = $payment_capture['status'];
                $transactionItemID = $payment_capture["custom_id"];
                $paidAmount = $payment_capture['amount']["value"];
                $paidAmountCurrency = $payment_capture['amount']["currency_code"];
            }


            // get the sample item details from our configuration file
            $itemCurrency = $item['currency'];
            $itemPrice = $item['price'];
            $itemName = $item['name'];
            $itemDesc = $item['description'];
            $itemNumber = $item['id'];

            // confirm that the item is our item. You may want to do extra validation here.
// i'm only doing basic validation to confirm that the item is recognized
            if ($transactionItemID != $item['id']) {
                $itemCurrency = "UNKNOWN";
                $itemPrice = "UNKNOWN";
                $itemName = "UNKNOWN";
                $itemDesc = "UNKNOWN";
            }


            // get the payer details
            $payer = $capturedPayment['payer'];
            $payerID = $payer['payer_id'];
            $payerName = $payer['name'];
            $payerGivenName = !empty($payerName['given_name']) ? $payerName['given_name'] : '';
            $payerSurName = !empty($payerName['surname']) ? $payerName['surname'] : '';
            $payerFullName = trim($payerGivenName . ' ' . $payerSurName);
            $payerEmailAddress = $payer['email_address'];
            $payerAddress = $payer['address'];
            $payerCountryCode = !empty($payerAddress['country_code']) ? $payerAddress['country_code'] : '';

            // get the payment source
            $paymentSource = '';
            if (!empty($capturedPayment['payment_source'])) {
                foreach ($capturedPayment['payment_source'] as $key => $value) {
                    $paymentSource = $key;
                }
            }


            // create a payment entry to store this captured payment
            $payment = new Payment;

            // assign the payment attributes
            $payment->item_number = $transactionItemID;
            $payment->item_name = $itemName;
            $payment->item_price = $itemPrice;
            $payment->item_price_currency = $itemCurrency;
            $payment->payer_id = $payer['payer_id'];
            $payment->payer_name = $payerFullName;
            $payment->payer_email = $payerEmailAddress;
            $payment->payer_country = $payerCountryCode;
            $payment->transaction_id = $transactionID;
            $payment->transaction_status = $transactionStatus;
            $payment->paid_amount = $paidAmount;
            $payment->paid_amount_currency = $paidAmountCurrency;
            $payment->payment_source = $paymentSource;
            $payment->order_id = $orderID;
            $payment->order_status = $orderStatus;

            // write out payment to the database
            $payment->save();
        }
    }

    /**
     * returns the stample item from our configuration file
     */
    private function getItem(){
        // get the sample item details from our configuration file
        $item = [
            "currency" => config('paypal.sample_item_currency'),
            "price" => config('paypal.sample_item_price'),
            "name" => config('paypal.sample_item_name'),
            "description" => config('paypal.sample_item_description'),
            "id" => config('paypal.sample_item_number')
        ];
        return $item;
    }

}

Step 8: create the view

As I mentioned earlier, the payment process will stay on the same page so we just need to load one view that displays the PayPal button and uses Javascript to communicate with the backend using AJAX. Since this tutorial was heavily influenced by the PayPal integration builder, the Javascript is quite similar to the PayPal example.

Before we go over the payment flow, let’s do a quick overview of the PayPal Javascript SDK. To use the PayPal JavaScript SDK, you need to add the javascript library and provide your client ID. This is done with the following line of code

   <script src="https://www.paypal.com/sdk/js?client-id=YOUR-CLIENT-ID"></script>

To initiate the SDK, you must call paypal.Buttons().render() to instantiate the buttons on the page. The render() function expects the ID of the HTML container element where the button will be rendered in. In case you are wondering, you can have multiple PayPal buttons on the same page. Since the SDK uses events to determine what needs to be done, we need to define the behaviour for the 2 most important events that are defined by the SDK. Here are the functions related to these events:

1. createOrder(): is called when the buyer clicks the PayPal button, which launches the PayPal Checkout window where the buyer logs in and approves the transaction on the paypal.com website.
2. onApprove() function is called after the buyer approves the transaction on paypal.com.

Here is the flow of events in our application once the PayPal buttons are rendered.

1. The user clicks on the PayPal button to begin the payment process. This calls the createOrder() event handler
2. The createOrder() event collects the item data and builds a POST request to the ‘purchase’ route which is the createOrder() function in the checkout Controller. As mentioned earlier, in the case of a successful request, the createOrder() function will return an order ID.
3. The order ID from the POST request is passed to the PayPal window as it is displayed to the user.
4. Once the user has entered their information inside the PayPal window and confirmed their purchase, the onApprove() event is triggered and an order ID is passed from the PayPal window.
5. The order ID from the PayPal window is then passed to the capture route which calls the captureOrder() function in the controller.If the order ID is valid then a success is returned from PayPal. Along with the PayPal response code, the item content is also added to the content returned by captureOrder().
6. If a success response is received by the frontend, then we call displayContent() function which will make the content visible on the frontend.

Note that any form in Laravel, including AJAX forms, need to include the CSRF token otherwise the POST request will fail. That is why the CSRF token from Laravel is passed in the header with this line.

<meta name="csrf-token" content="{{ csrf_token() }}">

I can then use jQuery to add the CSRF token in the header of the POST requests made to the backend.

                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },

Finally, I load bootstrap from the bootstrap CDN so that we can make the page look good. Below are is the content of the view:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>PayPal JS SDK Standard Integration with Laravel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="jumbotron text-center">
        <h1>PayPal Standard Checkout Example</h1>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <div id="result-message" class="text-center">
                    <h3>Purchase {{$item['name']}}</h3>
                    <p>You are about to purchase <strong>{{$item['name']}}</strong> for <strong>${{$item['price']}}
                            {{$item['currency']}}</strong></p>
                </div>
                <div id="paypal-button-container"></div>
                <script
                    src="https://www.paypal.com/sdk/js?client-id={{$clientID}}&currency={{$item['currency']}}&components=buttons&enable-funding=paylater,venmo,card"
                    data-sdk-integration-source="integrationbuilder_sc"></script>
                <div id="bottom-container" class="text-center"></div>
            </div>
            <div class="col-sm-4">
                <h3 class="text-center">PayPal Standard Checkout PHP Example using Laravel 10</h3>
                <p class="text-center">View the full tutorial at <a href="https://miftyisbored.com/" target="_blank">MiftyIsBored.com</a></p>
                <p><em>Note: This is a <strong>Sandbox setup</strong> so you can test with <strong>any Sandbox PayPal
                            account</strong> or use the following test account to purchase the digital item:
                        <ul>
                            <li>email: sb-kkhf028891454@personal.example.com</li>
                            <li>password: J>!][0Wt</li>
                        </ul>

                    </em></p>
            </div>
        </div>
    </div>



    <script>
        window.paypal
            .Buttons({
                style: {
                    shape: "rect",
                    layout: "vertical",
                },
                async createOrder() {
                    try {
                        const response = await fetch("{{ route('order') }}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            // use the "body" param to pass the order information
                            body: JSON.stringify({
                                cart: [
                                    {
                                        item: "{{ $item['id'] }}",
                                        quantity: "1",
                                    },
                                ],
                            }),
                        });

                        const orderData = await response.json();

                        if (orderData.id) {
                            return orderData.id;
                        } else {
                            const errorDetail = orderData?.details?.[0];
                            const errorMessage = errorDetail
                                ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                                : JSON.stringify(orderData);

                            throw new Error(errorMessage);
                        }
                    } catch (error) {
                        console.error(error);
                        resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
                    }
                },
                async onApprove(data, actions) {
                    var oID = data.orderID;
                    try {
                        const response = await fetch(`{{ route('capture') }}`, {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            // use the "body" param to pass the orderID
                            body: JSON.stringify({
                                orderID: oID,
                            }),
                        });

                        const orderData = await response.json();
                        // Three cases to handle:
                        //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                        //   (2) Other non-recoverable errors -> Show a failure message
                        //   (3) Successful transaction -> Show confirmation or thank you message

                        const errorDetail = orderData?.details?.[0];

                        if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
                            // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                            // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
                            return actions.restart();
                        } else if (errorDetail) {
                            // (2) Other non-recoverable errors -> Show a failure message
                            throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
                        } else if (!orderData.purchase_units) {
                            throw new Error(JSON.stringify(orderData));
                        } else {
                            // (3) Successful transaction -> Show confirmation or thank you message
                            // Or go to another URL:  actions.redirect('thank_you.html');
                            const transaction =
                                orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
                                orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
                            resultMessage(
                                `Transaction <strong>${transaction.status}<\/strong>: ${transaction.id}. (<em>See console for all available details<\/em>)`,
                            );
                            displayContent(orderData?.purchased_content);
                            console.log(
                                "Capture result",
                                orderData,
                                JSON.stringify(orderData, null, 2),
                            );
                        }
                    } catch (error) {
                        console.error(error);
                        resultMessage(
                            `Sorry, your transaction could not be processed...<br><br>${error}`,
                        );
                    }
                },
            })
            .render("#paypal-button-container");

        // Example function to show a result to the user. Your site's UI library can be used instead.
        function resultMessage(message) {
            const container = document.querySelector("#result-message");
            container.innerHTML = message;
        }

        // Example function to make the purchased item available upon payment confirmation.
        function displayContent(content) {
            const containerPayPal = document.querySelector("#paypal-button-container");
            containerPayPal.innerHTML = "<div class='text-center'><h2>Congratulations on the purchase!</h2><p>Here is your purchased image.</p><br/>" + content + "</div>";

            const containerBottom = document.querySelector("#bottom-container");
            containerBottom.innerHTML = "Reload this page to make another transaction";

        }

    </script>
</body>

</html>

Step 9: Add the Item to our public folder

Since the purpose of the application is to instantly deliver the item once it is purchased, we need to make sure that the item is stored somewhere on our server. For this tutorial, I have the file “Frosty_Krusty_Flakes_comic.png” located inside the public/images folder. (click on the link to download the file)

Step 10: Test the code

You can now run the app using Laravel’s serve command

php artisan serve

that’s it. the tutorial is complete and you are good to go. You can see a live demo of this tutorial by clicking here. As usual, if you have any questions, leave a comment and I’ll respond whenever I can.

The post PayPal Standard Checkout Integration with Laravel 10 appeared first on Mifty is Bored.

Today, Amir is getting a raptor! A RAPTOR! Today, Amir is getting a raptor and nobody can change his mind. That’s right, a VE-LO-CI-RAPTOR! Since no one wants to play with Amir, a raptor will be Amir’s new best friend.

The post Amir Gets A Raptor appeared first on Mifty is Bored.

The post Random Nick Fury Artwork appeared first on Mifty is Bored.

This tutorial will cover how I got my comic book MIFT #0 published on Amazon’s KDP Platform. You can view the actual Amazon listing here and purchase the kindle book for just 3$.

The tutorial is separated into 2 sections:

• How to create a digital version of your comic (a .mobi file) from your comic pages using Amazon’s Comic Creator
• How to upload your .mobi file to KDP and get your comic or graphic novel published

One thing to note is that I am assuming in this tutorial is that you have already created your comic pages and that you already have a KDP account. So let’s jump into part 1: creating a kindle version o your comic book.

In order for you to get your comic published through KDP, you have to use Amazon’s Kindle Comic Creator, which is a free tool provided by Amazon. According to Amazon:

Kindle Comic Creator is a free tool for authors and publishers to turn their comics, graphic novels and manga into Kindle books. The tool makes it easy for authors and publishers to import artwork, create their preferred customer reading experience, and see how their book will look on Kindle devices.

Here is a screenshot of Kindle Comic Creator:

Comic Creator is available for both MAC and PC. I used the PC version on multiple PCs (all my work is saved on Dropbox so that I can access the files from multiple devices) With Comic Creator, you are able to:

• Import your artwork from common file formats like jpg, pdf, tiff, png and ppm
• Create guided navigation experience with Kindle Panel View (Which is super awesome by the way. Definitely my favorite part of the Kindle comic reading experience)
• Create books with double page spreads or facing pages
• Preview content across Kindle devices before publishing

Overall, Kindle Comic Creator is a pretty simple and easy-to-use application. But be warned: Kindle Comic Creator is not very stable. In fact, it crashes… a lot! While trying to create my comic, it must have crashed at least 10 times, on 3 different PCs running Windows 10. So my advice when using Kindle Comic Creator is to save fast and save often or risk losing all your work.

So here are the steps for creating a Kindle version of your comic book:

Step 1: open Kindle Comic Creator and add your comic pages

Once you open Comic Creator, it will ask you to create a new project or open an existing project. Since this tutorial is assuming that we are creating our project from scratch, choose “Create a New Book”.

Once You choose to create a new book, you will be presented with 2 option screens. The first screen is your panel selection options and the second screen is your book settings.

Panel Selection Options

The panel selection option allows you to choose the layout of your book and if you want to use Kindle Panel View (which every comic book or graphic on Kindle should use).

The panel selection options that you need to choose include:

• What is the language of your book: This is an irrelevant option since the words of our comic book is embedded into the art, so I simply chose English. (But According to KCC, the language is used to recommend various settings)
• Would you like to create Kindle Panel View: Kindle Panel View is a guided navigation experience. It allows the author to control the flow of story as readers progress through the book. Kindle Comic Creator can automatically detect Kindle Panels but its not always very good so you should manually edit your panels. (more about the panel view later in this tutorial)
• What is the orientation of your book: Options include Portrait, Landscape and Unlocked. Note: If you are using panel view, you will not be able to select the Unlocked mode. It took me several hours to discover this but Panel View does not let you choose unlocked mode. And you can only create 2-page spreads if Panel mode is off.
• What is the page turn direction of your book: Options include Left-to-Right and Right-to-Left. For page turn direction, select Left-to-Right or Right-to-Left based on the page turn used for language of your book
• What is the canvas size of your book (original resolution): Original resolution size reflects the full dimensions of the image. The default values are width: 800 px, height: 1280 px. The maximum value permitted for either setting is 1280 px. If the image dimensions are wider or taller than 1280 px, please enter scaled down values in correct aspect ratio of your images. Kindle will maintain aspect ratio for your book based on values you enter.

Book Setting Options

The book setting section allows you to define your book’s metadata. This includes things like the title, author and publisher. Many of these options can be changed later on as well

The options that we need to set are:

• Title: The title of the book
• Author: the name of the author
• Publisher: the name of the publisher (it can be the same as the author)
• Cover Image: the path to the cover image for your book.
• Location: The path to where all the files for your Kindle comic book project will be saved. This is also where your .mobi output file will be created.

Adding pages to your comic book project

Once your project is created, you can now add pages to your comic book. Here is what the main screen will look like:

At this point, you can start dragging files into your comic book project. Whenever you add a file, it will show you that file’s content and you can drag the file up or down. You can import one or multiple files at a time. And what I really like is the fact that Kindle Comic Creator will create resized versions of your files if the original files are larger than the 800×1280 pixel size that it is expecting. (For anybody curious, the scaled images are located inside the html/scaled-images folder of your comic project.)

Once you’ve added all your pages, you will be able to scroll through the various pages of your book. Here is a look at the comic project for my book MIFT Issue #0:

Since this is a digital book for Kindle, you do not have to worry about which page needs to match with which page. If you have a 2-page spread, you can simply import your 2-page spread as a single page into the application and it will readjust the view for your 2-page spread. Keep in mind that this is only true for comics and graphic novels that use panel view. If you have disabled panel view, then you will have to worry about matching the various pages and comic creator will give you an option to collect pages into a 2-page spread. But remember, Panel View is the selling point of comic books on Amazon’s Kindle viewer. So you want to make sure to take advantage of the panel view.

Step 2: Add Panels for Panel View

Once all of our pages have been created, we are ready to define panels for Panel view. This option will only be available if you chose Panel view when you created your project. I honestly think that every comic book for a Kindle device should use the Panel View feature because it allows you to easily guide the user from panel to panel as they read your book. I setup panel view for my book and here are a couple of screenshots of panel view using the previewer:

Now that you see how cool panel view is, let’s go ahead and add panels for our panel view. To add a panel for any page, right-click to get the context menu and choose “New Kindle Panel”

Once you have crated your panel you will see it as a green box around your panel. There is also an option to manually detect all panels on the current page or all pages. However, this option only works well if all your panels are well laid out with nothing fancy. It did not work well for me so I ended up manually creating my panels for my comic. Here is a sample page with all panels created inside Kindle Comic Creator:

The nice thing about the panel view is the element of surprise that it creates since all other panels are blocked off except the current panel that you are looking at.

Don’t worry if your panels overlap. Its not recommended and comic creator will give you a warning but you are allowed to overlap panels.

Step 3: Preview and Export your Comic to .mobi format

Now that your pages have been imported into comic creator and your panels have been defined for your various pages, you are ready to export your file to .mobi format.

In the file menu, click the “Build and Preview” option, located under the build menu section. This will start the process of creating a .mobi file from your comic book project. The export process is pretty long (It can take several minutes.) but the application does a pretty good job of telling you what is going on. Below is a screenshot of my project as it is building.

Once the export process is complete, comic creator will automatically launch the kindle previewer with your comic book loaded. This is your chance to preview how your comic book or graphic novel will look on a kindle device.  Below is a screenshot of my comic on the previewer.

If you enabled panel view, you can double-click on any panel to start panel view. Once panel view is started, you can navigate from panel to panel by using the left and right arrow buttons. This is the time where you should look for errors with panels such as the ordering of our panels or maybe a panel size.

You should write down any issues that you find while previewing your comic. Once you close the previewer, you can go back to your comic project to make whatever changes you need to make. Once your changes have been made, you can rebuild your project and re-check your changes.

Once all your changes have been made and you are happy with the preview, you are ready to upload your .mobi file on KDP. The mobi file is located inside your project folder.

Now that you have a .mobi file version of your comic book, you are ready to get it published on KDP. Hop on over to the second part of this tutorial to learn how to publish your comic on KDP.

The post A tutorial on publishing a comic book or Graphic Novel on Amazon’s KDP Platform (Part 1) appeared first on Mifty is Bored.

It’s crazy! I never met Stan Lee and he does not know who I am. Yet, when I heard that he passed away, I felt like one of my Uncles passed away. Thanks Stan Lee for being such an influence in my life. Thank you for your creativity, charm and . R.I.P Stan “The Man” Lee, you will be missed. “Excelsior!”.

Below is a series of illustrations of Stan Lee dressed as the various Marvel characters that he helped create I don’t know who created these images but I think that they are a great way to remember Stan”The Man” Lee!

The post RIP Stan Lee appeared first on Mifty is Bored.

So far, Marvel has released images of 10 variant covers that will be coming out this December. This includes alternate covers for All New Wolverine, Avengers, Daredevil, Punisher, Amazing Spider-Man, Falcon, Venom, Spider-Gwen, Thanos and Spirits of Vengeance. I must say that, apart from the Venom and Falcon covers, all of these covers look amazing! I love the Punisher cover with fire coming out of the Punisher’s nipples but my all-time favorite is the Spirit of Vengance cover which would make an excellent poster. Check out the Marvel alternate Phoenix covers below..

The post Marvel is Releasing Phoenix Variant Covers And They Look Awesome appeared first on Mifty is Bored.

The shirt above was inspired by the Retro Nintendo controller and Adventure Time. That’s why I called it the Classically Trained Dancing Nintendo Controller. I know that there are a lot of shirts out there that feature the retro Nintendo NES controller but none have a badass dancing remote like mine. And if you like the shirt, you can purchase it on Amazon here.

This artwork was actually inspired by the art below..

The post 020 – Classically Trained Dancing Nintendo Controller appeared first on Mifty is Bored.

Howver, anybody running MariaDB or older versions of MySQL might see the following error when trying to run migrations:

[Illuminate\Database\QueryException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table users add unique users_email_unique(email))

[PDOException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

Although this tutorial and the migrations update guide say to edit your AppServiceProvider.php file and inside the boot method set a default string length like so:

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

I found that this solution did not fully fix the problem and it was something of a hack. The proper fix is to actually edit your database.php file inside the config foler. Inside the file, I simply set the MySQL character set back to UTF8 and this fixes the problem at the core. So here is a sample of my database.php file:

    'connections' => [

        ...

        'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'collation' => 'utf8_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],
        ...
     ]

This should resolve the “Specified key was too long error” problem cleanly for MariaDB and older versions of MySQL.

The post How to fix Laravel 5.4: Specified key was too long error appeared first on Mifty is Bored.

Luckily, I was able to get around this blockade thanks to the magic of Christmas. This Christmas, my wife told me that I had to choose 2 gifts for Christmas: something that I needed and something that I wanted. The choices were simple:

1. something that I needed: The Amazon Echo Dot
2. something that I wanted: The Google Home

Luckily, I have friends and family in the states, and many of them come home for the holidays. And through the miracle of Christmas, I was able to get both gadgets for the holidays. I knew that there would be limitations since both devices are currently not supported in Canada but I didn’t care, I was getting my hands on the coolest gadgets of the holidays.

So let’s jump right in and review both the Google Home and Amazon Echo Dot, Canadian Style!

In This Corner: Amazon Echo Dot (2nd Generation)

The Amazon Echo Dot is a hands-free, voice-controlled device with a small built-in speaker. With the Echo Dot, you can dim the lights just by asking, or control the thermostat with your voice. It can also connect to your speakers or headphones over Bluetooth or through a 3.5 mm audio. Dot connects to the Alexa Voice Service to play music, provide information, news, sports scores, weather, and more—instantly. The Echo Dot can control lights, fans, switches, thermostats, garage doors, sprinklers, and more with compatible connected devices from WeMo, Philips Hue, Samsung SmartThings, Nest, ecobee, and others.

When you want to use Echo Dot, just say the wake word “Alexa” and Dot responds instantly. With a price tag of only US$49, and Alexa’s usefulness, the Dot is a perfect option for anybody who wants to start building a connected home on the cheap. Echo Dot can hear you from across the room, even while music is playing. Check out the promotional video below:

In The Other Corner: Google Home

Google Home is Google’s latest gadget. It is an always-on, always-listening little speaker that can be used as the hub for your connected home. Google Home is powered by the Google Assistant. Ask it questions and it will give you answers. Google Home can retrieve your flight information, set alarms and timers, and even tell you about the traffic on your way to work.

The Google Home sells for US$129, and just like the Echo Dot, it can be used as the starting point for your connected home. Similar to Amazon Echo, Home can listen and respond to your voice commands. You can’t change the “OK Google” or “Hey Google” wake words, and you must say them every single time you want to interact with Home. Check out the promotional video below

Amazon Echo has been around for nearly 2 years while Google Home was launched in October 2016. Many United States reviewers point out that Google Home is “smarter” than Echo and has the ability to understand more complex questions. Unlike the Echo, Google Home can understand context for follow-up questions; it will answer correctly when a person first asks “what’s the weather” followed by “what about tomorrow?”. But Amazon Echo leads in range of functionalities. Its open platform has allowed it to amass over 3,000 skills. (think of skills as apps that you can download to improve Alexa) Google Home, on the other hand, only opened its SDK recently and its power to integrate with Internet of Things (IoT) devices and apps is still limited.

Part 1: Setup

Both systems were pretty easy to setup. One important point is that both devices require you to already have an account with their services. In the case of Amazon, used my amazon.com account. Echo Dot will not work with your Amazon.ca account so you will have to create an Amazon.com account if you plan on using Echo. In the case of Google Home, I used my regular Gmail address. Both devices need to access your WiFi in order to complete the setup.

The Echo Dot Setup

In the case of Echo Dot, there is a web interface for installing the Alexa app and it doesn’t require a device such as a phone or tablet to install. You simply go to http://alexa.amazon.com and follow the instructions. In my case, I used my laptop to go to http://alexa.amazon.com. The instructions asked me to locate my Echo Dot device with the name “Amazon-UXX” as one of the available networks that I could connect to. Once connected, I was asked to provide my WiFi information and Alexa was good to go. All settings and updates were done through the Alexa desktop app and I never needed or used the Alexa Android app.

Now on to the basic information. The default location for Alexa is Seattle. So you will have to change it from Seattle to the closest US city. Remember, the Echo Dot does not support any Canadian city at the moment. Since I live in Montreal, I chose Plattsburg. So, unfortunately, all location information for my Alexa is currently based in Plattsburg. Besides this annoyance, everything else was a breeze. I was able to choose my news providers, link my Gmail account and choose my favorite sports teams so that I could get flash updates.

The Google Home Setup

To setup the Google Home, I had to download the Google Home app,(which was previously called the Google Cast app). Since I had a couple of Chromecasts in the house, I already had the app. Once you load the app, it will locate your Google home and ask you to link it to a Google account. Since I knew my kids were going to be using this account, I used a family account that I had created a while back. Once you do this, all your basic information is already known by Google and you are good to go. One important thing to mention is that during the setup, I got a warning message saying that my device was made in another country and that all features may not work. But that warning was quickly ignored…

Through the Google Home app, you can setup your home and work address. You can also define the various rooms in your house and connect your devices.

The Winner: It’s A Draw

Both systems were relatively easy to setup. It took me less than 5 minutes to setup each of the devices and the instructions are pretty straightforward.

Part 2: Aesthetics

I’m not going to lie about it, I am pretty vain. I like pretty things and both devices are pretty to look at. Yeah, the Echo dot looks like a hockey puck while the google home looks like an air freshener. But once you ask them a question and the lights come on, both systems take you to the future.

Google Home’s Aeasthtics

As one reviewer put it: Home is a minimalist’s dream. It’s a short device that complements anything from Ikea. The Google home also has various optional base plates that you can buy to customize the Google Home to any room in your home. These bases are currently available in seven colors and make it easy to fit with any space and decor.

Once you say “Hey Google”, four dots appear on top of the Google Home. The dots spin while Google home is thinking and then fade out once she has responded to your question.

Echo Dot’s Aeasthtics

Sleek and compact design makes Echo Dot a convenient addition to any room in the house. The Echo Dot only comes in black or white. However, you can customize your Dot for any room with the optional Echo Dot Case. Available in leather or fabric and a range of colors.

Once you say “Hey Alexa”, a blue ring of light surrounds the top edge of the Echo Dot. The blue streak flashes while Alexa is answering a question and disappears once Alexa has responded to your question.

The Winner: It’s A Draw

Both devices look great. I was able to make the Google Home blend in with the rest of the house and I am in love with the blue ring of Alexa.

Part 3: Sound Quality

With both systems setup, my daughters and I quickly began sending voice commands to both devices. (Both devices are installed in our Livingroom, so the two most common phrases in our house are “Hey Alexa” and “Hey Google”). With both devices being Wifi speakers, we wanted to compare the sound quality of both systems.

Sound Quality of Echo Dot

For such a small device, the Echo Dot has surprisingly clear audio quality. When Alexa responds to your command, Alexa sounds crisp and clear. The audio is not muffled at all and it almost feels like Alexa is actually someone sitting in the room with you.

Sound Quality of Google Home

The Sound Quality for the Google Home was good but not as impressive as the Echo Dot. It felt like there was too much base on the voice and it just did not have the clarity that the Echo Dot had. We thought it might have been a positioning issue so we switched both devices and the Google Home still felt like the voice of the Google Assistant had too much base. My kids and I are far from an Audio specialist and we were able to pick this up.

Winner: Echo Dot

The Echo Dot wins this category easily. My 6-year old kept telling me that Alexa sounds like she is right there in the room with us while the Google Assistant sounds like she is on the car radio.

Part 4: Personality

Since both devices interact with you by talking to you, you want to at least feel that they have a personality. To test the personality of both virtual assistants, we did everything from asking for a random joke or a Christmas song to asking both assistants to make a rap song. In this category, there was no clear winner.

Alexa’s Personality

Alexa has been around for 2-years and it shows. She seems more personable and fun when compared to the Google assistant. When I asked Alexa for a recipe, she provides a link on where to get the instructions but she ended the conversation with “Good luck with dinner tonight”. Her jokes are so terrible that they are good and she will even do a freestyle if you ask her for a rap song. Alexa feels like a quirky AI with a little character.

Google Assistant’s Personality

The Google assistant is very bland and right to the point. She is like an extremely efficient secretary that you see in movies. She answers your questions (very efficiently) and waits fo the next task at hand. In the beginning, I thought that she did not have a sense of humor until we started asking pop questions. Then there were plenty of Easter eggs to discover. There were plenty of fun responses to weird questions like “hey Google, I am your father” and “are you Skynet”.

Winner: Tie

I know that they are just AI but both of these assistants have personality. For example when I asked “when is the world going to end”, both devices said that it will happen in a couple billion of years from now, but Alexa also added “unless we collide with a very big rock or some future technology goes wrong.” Google Assistant, on the other hand told me that we still have time to “perfect space travel and colonize other worlds.”

Here ae a couple of answers to some random questions from both devices:

If I had to choose, I would give a slight edge to Alexa because she knows all the rules to fight club!

Part 5: Ease of Use:

Both devices are voice controlled personal assistants with speakers. If you are a tech enthusiast, and/or are getting into the Internet of Things (IoT) and home automation, then this is the important part of the review. Both the Google Home and the Amazon Echo Dot can be given voice commands and they will respond. If you have smart home automation devices set up, you can tell either device to “turn on the kitchen lights” and they will turn them on for you without you having to lift a finger.

Google Home Ease of Use

If you have a Chromecast or Chromecast Audio, you can tell your Google Home to cast videos to your TV. You can say, “Hey Google, play my YouTube music video list in the Livingroom” and it will cast it straight to your Livingroom TV. We have a Google Nexus Player, and we were able to cast with the Google Home perfectly. In short, itt can be used with any hardware that can cast. I have also read that it works with other Android boxes too, like the MiBox and other Sony Android TVs.

The other strong feature about the Google Home is that its search function is powered by Google. As the guys at 9to5Google.com put it: One advantage that Google Home has over the Amazon Echo is its knowledge on random trivia and facts. But Google Home has also had a leg up on Alexa since launch in its ability to converse with you about those topics in a contextual manner. For example, you can ask Google Home “tell me about nearby restaurants”, followed by the query “what about coffee shops?” and Google Assistant knows that you still want to know about coffee shops near you.

A couple of days ago, we were hungry and wanted pizza. I asked Google Home for the phone number of Pizza Hut and it responded by asking me if I wanted the pizza hut across the street from my house. It even gave me their address and asked me to confirm before giving me their phone number. Alexa does the same thing but I got the location of a Pizza Hut located somewhere in Plattsburg.

Asking for questions is less restrictive with the Google Home and it is more forgiving on mistakes compared to Alexa. Talking just feels more natural with the Google Home.

Echo Dot Ease of Use

The Echo Dot is incredibly easy to use. The list of commands that Alexa can understand is pretty impressive. Echo Dot can also be used as an alarm clock. Despite being a smart device and constantly learning, we found that the Echo Dot often didn’t understand or hear us properly, even with commands we have said a bunch of times before.

The Echo is powered by Bing (who the heck uses Bing to search??), and will often redirect you to a Bing link on the Alexa app page. The Echo Dot can also handle questions like “Who is Kanye West?”, followed by “How old is he?” or “How old is Barack Obama?” followed by “Who is his wife?”. But it is more limited when compared to Google Home.

Another disappointing thing is that you cannot purchase products on Amazon with Alexa voice commands. Since these items come from Amazon.com, you will run into shipping issues with makes delivery into Canada impossible.

The Winner: Google Home

Ease of Use easily goes to Google Home. There is simply no comparison in terms of ease of use and intelligence. With the Echo, you are basically using commands while the Google Home feels more like natural speaking. I’m a Google fanboy so I use Google services for just about everything. So when I ask “Hey Google, what do I have on today?” Home was able to read back my calendar appointments, then tell me how long it would take to drive to work. Alexa was also able to read back my calendar appointments but no local information was available because of the US restriction thingy.

Another reason why Google Home is the clear winner is that it is geo-located for pretty much everywhere in the world. Even though it is only sold in the US for the time being, it will work with any postal code. This is a major weakness with the Amazon Echo Dot. With the Echo, you cannot specify your specific home address. This means that, if you want to know the weather in Montreal, with the Echo, you have to say, “Alexa, what’s the weather like today in Montreal?” instead of simply asking “Alexa, what’s the weather like?”

Part 6: Music and Video Integration

One important feature of a home assistant is the ability to provide entertainment. We tried both audio and video integration with Alexa and Google Home.

Music and Video Playback with the Echo Dot

Playing music and video was not very easy with the Echo. Your choices for music are Amazon Music, which does not work in Canada or Spotify. The good news is that Canadian Spotify accounts work with the Echo Dot but the bad news is that you need to have a premium account to use it. Although I was able to link my Spotify account with the Echo Dot, I couldn’t do anything because I don’t have a premium Spotify account. Apparently, TuneIn is also supported, but so far, I have not managed to make it work. In terms of video playback, I was not able to get anything working at all.

Music and Video Playback with the Google Home

On the other hand, the Google home just worked right out of the box. I was able to listen to my music library from Google Play with no problem. Since I have a Chromecast in every room, I was able make Google Home play YouTube videos on various TVs around the house. And you can even pause playback by simply telling Google Home to pause. I also linked our Netflix account to the Google Home but I have not tested the Netflix integration yet.

The Winner: Google Home

Because of the border restrictions, it’s pretty hard to get music or video functionality easily with the Echo Dot. On the other hand, music and video just work with the Google home. There were no limitations for Canadians. My kids were able to request various YouTube videos and Google Home had no problems finding them. We were also able to have a house party with our Google Play music library with no problems at all.

The demo that always impresses our guests is the YouTube demo. We just say “hey google play Guardians of the Galaxy trailer on YouTube in Livingroom “. The TV turns itself on, input set, and the video starts.

Part 6 Home Integration

I have to be honest. The home integration is that part that I have not tested yet and also the part that I am looking most forward to. It’s true that Amazon Echo has the advantage over Google Home in some ways mostly thanks to its two-year head-start and close integration with third-party services. But none of that matters to us Canadians because we have never had the device! So I believe that both devices will be equal in the eyes of us Canadians. But like I said, I have not tested yet. I’m still waiting on my Hues lights to be delivered from Best Buy. Maybe I’ll do a follow-up article once I’ve connected a few devices to both systems.

Conclusion: The Overall Winner:

Before announcing the winner, its important to go over the features of both digital assistants. Here is a short recap below:

Amazon Echo

Surprisingly, most of the Echo Dot’s functionality works in Canada. You are able to change Alexa’s temperature settings from Fahrenheit to Celsius but there is no way to change your location to a Canadian city. However, you can do some funky tricks to get your local weather such as “Alexa, what’s the weather like in Montreal?”

According to many Americans who have the fully functional version of Alexa, the Echo shines when it comes to connecting smart devices. The echo can act as a central hub for a variety of different smart home products such as a nest thermostat, some Phillips hue lights and other connected devices.

Google Home

Unlike the Echo, the Google Home works perfectly for Canadians! So far, all of Google Home’s functionalities work in Canada. I have also read reports that it is working very well in the UK, Germany, and Australia. We were able to link it to our Google account with no problem and it provides relevant local information. There were no border restrictions and all features worked.

The Winner: Google Home

The clear winner is Google Home. Why? Because it just works with your Canadian data! Amazon has locked down its geo-location for Echo to be US only. With Google Home, I don’t have to pretend to live in the United States. I am able to put my actual Canadian address and Google recognizes it and doesn’t block me from any of its core features. As soon as I finished the setup, I was able to ask for restaurants around me and I actually got local restaurants instead of restaurants in Plattsburg.

Another advantage is that the Google Home understands human speech better and often replies smarter. (Even though the Echo Dot will sometimes surprise you with some responses). Google Home can also tell you the local weather, and read from selected news services that you can customize. Google also allows you to peek at all the data Home sends back and forth (go to http://myactivity.google.com).

Although Google Home is the clear winner, it does have its flaws. Right now the Home is limited to just one Google account, so a family can’t really expect to share a device. In our case, I created a family account that we all share. The other knock on Google is their “reputation” for abandoning projects. While this is true to an extent, (who remembers Google Glass), I haven’t seen them do this with their Chromecast devices. The Google Home is perfect for integrating into your Canadian life, which Google has already done with Gmail, Calendar, Keep, Photos, etc.

The post Google Home vs. Amazon Echo Dot: The Canadian Review appeared first on Mifty is Bored.

The post 019 – Superman is a Jerk! appeared first on Mifty is Bored.