Skip to content

Brand WordPress admin and clarify verification results #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arosasg merged 1 commit into from
Oct 6, 2026
Merged

Brand WordPress admin and clarify verification results #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ Identity verification for WordPress & WooCommerce using the [Didit SDK](https://

## Verification decisions

The plugin settings use Didit branding and grouped configuration cards.
WordPress administrators see readable decision badges in **Users → Didit** and on WooCommerce order details.
The settings page links to both user results and the Didit Console, where the full verification report is available.

Use **API Session** mode for content gating and WooCommerce checkout.
UniLink is for launching a flow and reviewing the result manually in Didit.
The server binds each created session to its visitor or order, and retrieves the Didit decision before accepting a browser completion or checkout request.
Expand Down
58 changes: 58 additions & 0 deletions assets/css/didit-admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
.didit-admin {
--didit-ink: #111111;
--didit-muted: #616161;
--didit-line: #e5e5e5;
--didit-surface: #ffffff;
max-width: 1120px;
color: var(--didit-ink);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.didit-admin-header { display: flex; align-items: center; gap: 28px; padding: 28px 0; }
.didit-admin-logo { width: 104px; height: 36px; flex: 0 0 auto; }
.didit-admin-header > div { flex: 1; }
.didit-admin .didit-admin-header h1 { font-size: 25px; font-weight: 500; line-height: 1.3; padding: 0; }
.didit-admin p { color: var(--didit-muted); line-height: 1.6; }
.didit-admin-header p { margin: 8px 0 0; }
.didit-admin-results, .didit-admin-card {
background: var(--didit-surface);
border: 1px solid var(--didit-line);
border-radius: 12px;
padding: 24px 28px;
margin: 0 0 20px;
}
.didit-admin-results { display: flex; align-items: center; gap: 24px; }
.didit-admin-results > div:first-child { flex: 1; }
.didit-admin-results h2, .didit-admin-card h2 { margin: 0; font-size: 17px; font-weight: 500; }
.didit-admin-results p { margin: 8px 0 0; }
.didit-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.didit-admin .button { border: 1px solid var(--didit-line); border-radius: 999px; background: var(--didit-surface); color: var(--didit-ink); padding: 5px 16px; font-weight: 500; white-space: nowrap; }
.didit-admin .button:hover { border-color: var(--didit-ink); }
.didit-admin .button-primary { background: var(--didit-ink); color: var(--didit-surface); border-color: var(--didit-ink); padding: 8px 24px; }
.didit-admin .button:focus-visible, .didit-admin input:focus-visible, .didit-admin select:focus-visible { outline: 2px solid #2567ff; outline-offset: 3px; box-shadow: none; }
.didit-admin .form-table { margin-top: 12px; }
.didit-admin .form-table th { color: var(--didit-ink); font-weight: 500; padding: 20px 24px 20px 0; }
.didit-admin .form-table td { padding: 18px 0; }
.didit-admin .form-table tr + tr { border-top: 1px solid var(--didit-line); }
.didit-admin .form-table input:not([type=checkbox]):not([type=color]), .didit-admin .form-table select { border-color: #b8b8b8; border-radius: 8px; padding: 5px 10px; max-width: 100%; background-color: var(--didit-surface); color: var(--didit-ink); }
.didit-admin .form-table select { padding-right: 28px; }
.didit-admin .form-table .description { font-size: 12px; margin-top: 8px; }
.didit-admin .notice { border-radius: 8px; }
.didit-admin-status { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.5; background: #f0f0f0; color: #555; white-space: nowrap; }
.didit-admin-status-approved { background: #e7f5ed; color: #166534; }
.didit-admin-status-declined { background: #fdecec; color: #991b1b; }
.didit-admin-status-review { background: #fff4dc; color: #854d0e; }
.didit-admin-order { margin-top: 16px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fff; color: #111; }
.didit-admin-order strong { display: inline-block; margin: 0 8px 8px 0; }
.didit-admin-order code { display: block; overflow-wrap: anywhere; font-size: 11px; margin-top: 8px; }
@media (max-width: 960px) {
.didit-admin-header { flex-wrap: wrap; gap: 20px; }
.didit-admin-header > div { flex-basis: calc(100% - 124px); }
.didit-admin-results { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 782px) {
.didit-admin-card, .didit-admin-results { padding: 20px; }
.didit-admin .form-table th { padding: 16px 0 0; }
.didit-admin .form-table td { padding: 8px 0 16px; }
.didit-admin-header .didit-admin-logo { width: 86px; height: auto; }
.didit-admin .didit-admin-header h1 { font-size: 21px; }
}
11 changes: 11 additions & 0 deletions assets/didit-wordmark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 54 additions & 15 deletions didit-verify.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Plugin Name: Didit Verify
* Plugin URI: https://github.com/didit-protocol/plugin-wordpress
* Description: Identity verification for WordPress & WooCommerce using the Didit SDK.
* Version: 0.3.2
* Version: 0.3.3
* Author: Didit
* Author URI: https://didit.me
* License: GPL-2.0-or-later
Expand All @@ -18,7 +18,7 @@
exit;
}

define('DIDIT_VERIFY_VERSION', '0.3.2');
define('DIDIT_VERIFY_VERSION', '0.3.3');
define('DIDIT_VERIFY_URL', plugin_dir_url(__FILE__));
define('DIDIT_API_URL', 'https://verification.didit.me/v3/session/');

Expand Down Expand Up @@ -180,6 +180,9 @@ public function admin_register_settings()

public function admin_enqueue_scripts($hook)
{
if (in_array($hook, ['settings_page_didit-verify', 'users.php', 'post.php', 'post-new.php', 'woocommerce_page_wc-orders'], true)) {
wp_enqueue_style('didit-admin', DIDIT_VERIFY_URL . 'assets/css/didit-admin.css', [], DIDIT_VERIFY_VERSION);
}
if ('settings_page_didit-verify' !== $hook) {
return;
}
Expand Down Expand Up @@ -235,7 +238,7 @@ public function field_api_key()
'<input type="password" name="didit_api_key" value="%s" class="regular-text" autocomplete="off" />
<p class="description">%s</p>',
esc_attr(get_option('didit_api_key', '')),
esc_html__('Found in Didit Console → API & Webhooks. Stored server-side only — never sent to the browser.', 'didit-verify')
esc_html__('Found in Didit Console → API & Webhooks. Used by your WordPress server to create and confirm sessions. Keep it private.', 'didit-verify')
);
}

Expand Down Expand Up @@ -765,16 +768,42 @@ public function admin_render_page()
return;
}
?>
<div class="wrap">
<h1><?php esc_html_e('Didit Identity Verification', 'didit-verify'); ?></h1>
<div class="wrap didit-admin">
<header class="didit-admin-header">
<img class="didit-admin-logo" src="<?php echo esc_url(DIDIT_VERIFY_URL . 'assets/didit-wordmark.svg'); ?>" alt="Didit" width="104" height="36" />
<div>
<h1><?php esc_html_e('Identity verification', 'didit-verify'); ?></h1>
<p><?php esc_html_e('Connect your workflow, customize verification, and manage customer access.', 'didit-verify'); ?></p>
</div>
<a class="button" href="https://docs.didit.me/integration/web-sdks/wordpress-woocommerce" target="_blank" rel="noopener noreferrer"><?php esc_html_e('Documentation', 'didit-verify'); ?></a>
</header>
<hr class="wp-header-end" />
<div class="didit-admin-results">
<div><h2><?php esc_html_e('Verification results', 'didit-verify'); ?></h2>
<p><?php esc_html_e('See customer status in Users and session decisions on WooCommerce orders. Open Didit Console for the full verification report.', 'didit-verify'); ?></p></div>
<div class="didit-admin-actions">
<?php if (current_user_can('list_users')) : ?><a class="button" href="<?php echo esc_url(admin_url('users.php')); ?>"><?php esc_html_e('View users', 'didit-verify'); ?></a><?php endif; ?>
<a class="button" href="https://business.didit.me" target="_blank" rel="noopener noreferrer"><?php esc_html_e('Open Didit Console', 'didit-verify'); ?></a>
</div>
</div>
<form method="post" action="options.php">
<?php
settings_fields('didit_verify');
do_settings_sections('didit-verify');
global $wp_settings_sections;
foreach ($wp_settings_sections['didit-verify'] ?? [] as $section) {
echo '<section class="didit-admin-card" aria-labelledby="' . esc_attr($section['id']) . '">';
echo '<h2 id="' . esc_attr($section['id']) . '">' . esc_html($section['title']) . '</h2>';
if ($section['callback']) {
call_user_func($section['callback'], $section);
}
echo '<table class="form-table" role="presentation">';
do_settings_fields('didit-verify', $section['id']);
echo '</table></section>';
}
submit_button();
?>
</form>
<hr />
<section class="didit-admin-card">
<h3><?php esc_html_e('Shortcodes', 'didit-verify'); ?></h3>
<code>[didit_verify]</code>
<p class="description">
Expand All @@ -793,6 +822,7 @@ public function admin_render_page()
<p class="description">
<?php esc_html_e('Content inside is only visible to verified users. Others see a verification prompt.', 'didit-verify'); ?>
</p>
</section>
</div>
<?php
}
Expand Down Expand Up @@ -2055,18 +2085,27 @@ public function users_column_content($output, $column_name, $user_id)
if ('Approved' === $status) {
/* translators: %s: date when user was verified */
$title = $date ? sprintf(__('Verified on %s', 'didit-verify'), $date) : __('Approved', 'didit-verify');
return '<span style="color:#41D97F;font-size:1.2em;" title="' . esc_attr($title) . '">&#10004;</span>';
return $this->admin_status_badge($status, $title);
}
if ('Declined' === $status) {
/* translators: %s: date when the verification was declined */
$title = $date ? sprintf(__('Declined on %s', 'didit-verify'), $date) : __('Declined', 'didit-verify');
return '<span style="color:#FF4141;font-size:1.2em;" title="' . esc_attr($title) . '">&#10008;</span>';
return $this->admin_status_badge($status, $title);
}
if ($status) {
$title = $date ? sprintf(__('In review since %s', 'didit-verify'), $date) : __('In Review', 'didit-verify');
return '<span style="color:#F59E0B;font-size:1.2em;" title="' . esc_attr($title) . '">&#9202;</span>';
/* translators: %s: date when the verification status was last updated */
$title = $date ? sprintf(__('Updated on %s', 'didit-verify'), $date) : $status;
return $this->admin_status_badge($status, $title);
}

return '<span style="color:#9ca3af;" title="' . esc_attr__('Not verified', 'didit-verify') . '">&#8212;</span>';
return $this->admin_status_badge('');
}

private function admin_status_badge($status, $title = '')
{
$styles = ['Approved' => 'approved', 'Declined' => 'declined', 'In Review' => 'review'];
$label = $status ?: __('Not verified', 'didit-verify');
return '<span class="didit-admin-status didit-admin-status-' . esc_attr($styles[$status] ?? 'pending') . '" title="' . esc_attr($title ?: $label) . '">' . esc_html($label) . '</span>';
}

public function wc_hooks()
Expand Down Expand Up @@ -2189,10 +2228,10 @@ public function wc_show_order_meta($order)
if ($session_id) {
$status = (string) $this->confirmed_order_status($order);
printf(
'<p><strong>%s</strong> %s%s</p>',
'<div class="didit-admin-order"><strong>%s</strong> %s<code>%s</code></div>',
esc_html__('Didit Verification:', 'didit-verify'),
esc_html($session_id),
$status ? ' — ' . esc_html($status) : ''
$this->admin_status_badge($status), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- escaped by helper.
esc_html($session_id)
);
}
}
Expand Down
Loading
Loading