Sign Up to Sendinblue from the Checkout

Create a small amount of code to capture marketing sign-up consent in your WooCommerce checkout. Then register your new customer in your Sendinblue contact list.

We’ll inject a tick box into the WooCommerce checkout fields, then capture the user’s choice (sign-up or don’t sign-up) when the order is created. Finally, if the customer wants to sign-up, we’ll send a request to the Sendinblue servers via their API.

It sounds like a bit of a chunk, but there’s not much to it when you break it down into small pieces.

In our example, the Sendinblue contacts list has a ListId of 3 (yours will probably be different) and we’re passing attributes called FIRSTNAME and LASTNAME. If you’re using something like FNAME or LNAME, you’ll need to adjust things slightly.

importantMake sure you’re using a custom child theme so you can edit functions.php.

Scaffold the Code

To get started, go into your custom child theme’s folder, create a new file called wpt-checkout-sendinblue.php and paste the following into it:

<?php

/**
 * WP Tutorials Checkout Send in Blue (WPTCSIB)
 *
 * https://wp-tutorials.tech/refine-wordpress/signup-to-sendinblue-from-the-checkout/
 *
 */

// Block direct access.
defined('WPINC') || die();

const WPTCSIB_SIGNUP_FIELD_NAME = 'customer_signup_for_marketing';
const WPTCSIB_SENDINBLUE_API_KEY = 'xxxxxxxxxxxx'; // Enter your Sendinblue v3 API key in here
const WPTCSIB_LIST_ID = 3; // Get the List Id from your sendinblue account.

Then edit your theme’s functions.php file and add the following:

// WooCommerce checkout send-in-blue
require_once dirname(__FILE__) . '/wpt-checkout-sendinblue.php';

Save all that and then load some content on your site – everything should still be working. That’s the placeholder/scaffold code sorted out.

Add the Sign-up Checkbox

Next up, open wpt-checkout-sendinblue.php again and paste the following code into it.

/**
 * Inject a panel with a checkbox in it into our checkout form,
 * so customers can sign up to special offer emails.
 */
function add_marketing_signup_to_billing_form() {
	echo '<div class="marketing-fields">';

	printf(
		'<p class="form-row"><label><input name="%s" type="checkbox" /><span>%s</span></label></p>',
		WPTCSIB_SIGNUP_FIELD_NAME,
		esc_html__('Let me know when there are special offers and discounts')
	);

	printf(
		'<p class="form-row">%s</p>',
		esc_html__('We will not sell or give your details to anyone else, and you can opt-out if you want.')
	);

	echo '</div>'; // .marketing-fields
}
add_action('woocommerce_after_checkout_billing_form', 'add_marketing_signup_to_billing_form');

/**
 * Marketing fields on the checkout page.
 */
.woocommerce-checkout .marketing-fields {
	margin: 1em 0;
	border: 1px solid #dddddd;
	background-color: #f0f0f0;
	padding: 1em;
	border-radius: 0.5em;
}

.woocommerce-checkout .marketing-fields input[type="checkbox"] {
	margin-right: 0.5em;
}

Detect the Checkbox When the Order is Created

After WooCommerce creates a new order, it triggers the woocommerce_checkout_update_order_meta action. We can hook this and check if the $_POST array contains our checkbox field.

Edit wpt-checkout-sendinblue.php and add the following snippet at the end of the file:

/**
 * When a new order has been created, see if the customer has signed up
 * for notifications.
 */
function check_for_marketing_signup($order_id, $data) {
	if (!array_key_exists(WPTCSIB_SIGNUP_FIELD_NAME, $_POST)) {
		error_log(__FUNCTION__ . ' : The checkbox field has not been POSTed');
	} elseif (!filter_var($_POST[WPTCSIB_SIGNUP_FIELD_NAME], FILTER_VALIDATE_BOOLEAN)) {
		error_log(__FUNCTION__ . ' : The value in our checkbox field does not resolve to true');
	} elseif (empty($order = wc_get_order($order_id))) {
		error_log(__FUNCTION__ . ' : Failed to get the newly created WC_Order object. Weird');
	} else {
		add_contact_to_sendinblue(
			$order->get_billing_email(),
			$order->get_billing_first_name(),
			$order->get_billing_last_name()
		);
	}
}
add_action('woocommerce_checkout_update_order_meta', 'check_for_marketing_signup', 10, 2);

Usually when processing form data, we’d want to have a nonce in the POST data and use wp_verify_nonce() to check it’s come from a valid source. In this case, WooCommerce has done all that for us… so all we need to do is grab a copy of the WC_Order object and pick up the relevant billing fields.

Create the Contact in Sendinblue

Now we’ve captured the customer’s consent to sign-up, we need to make a call to the Sendinblue API. We’ve wrapped this in a tidy little function so we can call it from elsewhere, if we want to. Add the following into wpt-checkout-sendinblue.php:

/**
 * Add a contact to your Send-in-blue contact list by calling their API.
 */
function add_contact_to_sendinblue(string $email_address, string $first_name, string $last_name) {
	if (!function_exists('curl_init')) {
		error_log(__FUNCTION__ . ' : Is the PHP Curl extension isntalled?');
	} elseif (strpos(WPTCSIB_SENDINBLUE_API_KEY, 'xkeysib-') !== 0) {
		error_log(__FUNCTION__ . ' : Invalid Sendinblue API key');
	} else if (empty($sanitised_email_address = sanitize_email($email_address))) {
		error_log(__FUNCTION__ . ' : The billing email address is not present or is not valid');
	} elseif (empty($first_name = sanitize_text_field($first_name))) {
		error_log(__FUNCTION__ . ' : The order does not have a billing first name');
	} elseif (empty($last_name = sanitize_text_field($last_name))) {
		error_log(__FUNCTION__ . ' : The order does not have a billing last name');
	} else {
		// Check that the attributes here are available in your
		// Sendinblue contact list.
		$request = array(
			'email' => $sanitised_email_address,
			'attributes' => array(
				'FIRSTNAME' => $first_name,
				'LASTNAME' => $last_name,
			),
			'emailBlacklisted' => false,
			'smsBlacklisted' => false,
			'listIds' => array(WPTCSIB_LIST_ID),
			'updateEnabled' => true,
		);

		// The options for our API call.
		$curl_options = array(
			CURLOPT_URL => 'https://api.sendinblue.com/v3/contacts',
			CURLOPT_RETURNTRANSFER => true,
			CURLOPT_ENCODING => '',
			CURLOPT_MAXREDIRS => 10,
			CURLOPT_TIMEOUT => 10,
			CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
			CURLOPT_CUSTOMREQUEST => 'POST',
			CURLOPT_POSTFIELDS => json_encode($request),
			CURLOPT_HTTPHEADER => array(
				'accept: application/json',
				'api-key: ' . WPTCSIB_SENDINBLUE_API_KEY,
				'content-type: application/json',
			),
		);

		// Create a Curl instance.
		$ch = curl_init();

		// Configure the Curl instance.
		curl_setopt_array($ch, $curl_options);

		// Diagnostics.
		// error_log(__FUNCTION__ . ' : Calling the Send-in-Blue API for ' . $sanitised_email_address);

		// Make the actual API call.
		// $json_response holds the returned JSON, in case you want to do
		// something with it.
		$json_response = curl_exec($ch);

		// HTTP response code from the Sendinblue server:
		// 201 means the contact was created.
		// 204 means an existing contact was updated.
		$response_code = intval(curl_getinfo($ch, CURLINFO_HTTP_CODE));

		// Release the Curl instance.
		curl_close($ch);
	}
}

This is a tidy reusable function. Like all tidy functions, it follows a standard pattern:

• Check the environment is OK (make sure that Curl is installed).
• Validate the inputs (make sure that the contact’s details are not garbage).
• Do the actual work (Call the Sendinblue API).
• Optionally return a result (We don’t return anything here).

Wrapping Up

That’s all there is to it. We render some HTML in a form, capture the data via $_POST, validate the data, then POST it to the Sendinblue API using PHP’s Curl functions.

More information on how to use a REST API from WordPress.

Happy marketing 😎 👍

Like This Tutorial?

Upvote this tutorial ---

Downvote this tutorial ---

Let us know