How to add an SSL trust seal on Easy Digital Downloads Stripe Checkout

From many articles, including one from Easy Digital Downloads themselves, adding a trust seal can increase… well, trust, during checkout. But how do you add one during the EDD checkout?

There are some more advanced setups like adding a popup verification when the logo is clicked, but this will get a static image placed beside your Stripe checkout fields.

Get Your Trust Logo

This depends on your SSL provider, search for something like the issuer of your SSL certificate (such as Comodo) and “trust seal” to find it, or contact the company you bought the SSL certificate from.

Insert the Logo Beside the Credit Card Fields

The following action will add a logo beside your checkout fields by either placing the code in your child theme’s functions.php or in a functional plugin. Edit to fit your SSL certificate’s issuer, and you should copy the image and host it on your own site somewhere (ie. by uploading it to your media library):

<?php
/***
Plugin Name: EDD SSL Seal on Stripe Checkout
Plugin URI: https://github.com/brianhogg
Description: Adds an SSL seal to the checkout when paying via Stripe
Version: 0.1
Author: Brian Hogg
Author URI: https://brianhogg.com
Contributors: brianhogg
License: GPL2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

function edd_ssl_during_stripe() {
    ?>
    <a id="ssl-seal" href="https://ssl.comodo.com">
        <img src="https://ssl.comodo.com/images/trusted-site-seal.png" alt="Comodo Trusted Site Seal" width="113" height="59" style="border: 0px;">
        <br>
        <span style="font-weight:bold; font-size:7pt">SSL Certificate</span>
    </a>
    <?php
}
add_action( 'edd_after_cc_expiration', 'edd_ssl_during_stripe' );

By default the logo will show up underneath the fields, which isn’t ideal:

So we’ll add a bit of CSS to fix.

Add the CSS

This CSS will add the logo to the right of the fields, but hide on mobile:

#edd_purchase_form_wrap #ssl-seal {
    position: absolute;
    top: 100px;
    right: 50px;
    text-align: center;
}

@media (max-width: 768px) {
    #ssl-seal {
       display: none;
    }
}

That’s it! Now you have a nice SSL logo beside your checkout fields to help your conversion rate.