From 19c5f1023dfa84ca1c2e6d1e15ba2efb24eb89f9 Mon Sep 17 00:00:00 2001
From: 2ro <17595647+2ro@users.noreply.github.com>
Date: Sat, 4 Jul 2026 22:27:23 -0400
Subject: [PATCH] brand: black GoblinPay badge (Apple Pay style) for light
checkout surfaces
Add the light-surface counterpart to the white wordmark: a flat black
rounded-rect badge with the goblin mark (reused wallet head geometry) next
to the "Pay" wordmark. Does the job the black Apple Pay badge does at
checkout: a compact, instantly recognisable payment-method mark.
- static/goblinpay-badge-black.svg: self-contained inline SVG, no external
font (mark reuses goblin-mark-white geometry; "Pay" uses the same system
font stack as the existing wordmark).
- gp-server: serve it at /static/goblinpay-badge-black.svg.
- WooCommerce: wire the badge into the checkout payment-method row for both
the classic gateway (get_icon override) and the Blocks checkout (data-URI
icon in the method label).
- BADGE-INTEGRATION.md: note for applying the badge to the hosted pay page
after the grin1 rail work merges (pay.html left untouched to avoid conflict).
The existing white wordmark stays for dark surfaces; this only adds the
black-badge variant.
---
BADGE-INTEGRATION.md | 61 +++++++++++++++++++
connectors/woocommerce/assets/js/blocks.js | 13 +++-
.../woocommerce/goblinpay-woocommerce.php | 40 ++++++++++++
.../woocommerce/includes/class-blocks.php | 7 +++
crates/gp-server/src/main.rs | 13 ++++
static/goblinpay-badge-black.svg | 48 +++++++++++++++
6 files changed, 181 insertions(+), 1 deletion(-)
create mode 100644 BADGE-INTEGRATION.md
create mode 100644 static/goblinpay-badge-black.svg
diff --git a/BADGE-INTEGRATION.md b/BADGE-INTEGRATION.md
new file mode 100644
index 0000000..fba7563
--- /dev/null
+++ b/BADGE-INTEGRATION.md
@@ -0,0 +1,61 @@
+# Black GoblinPay badge: pay.html integration note
+
+This branch (`badge-black`) adds the black GoblinPay badge, the light-surface
+counterpart to the existing white wordmark. It is the mark that does the job the
+black Apple Pay badge does at checkout: a compact "this payment method is
+GoblinPay" lockup (goblin mark + "Pay") for light surfaces.
+
+## What is already wired on this branch
+
+- Asset: `static/goblinpay-badge-black.svg` (self-contained inline SVG, no
+ external font: the mark reuses the wallet's goblin head geometry, "Pay" uses
+ the same system font stack as the existing wordmark).
+- Route: served at `/static/goblinpay-badge-black.svg`
+ (`crates/gp-server/src/main.rs`, alongside the wordmark route).
+- WooCommerce checkout row: the classic gateway `get_icon()` and the Blocks
+ checkout label both render the badge next to the method title
+ (`connectors/woocommerce/`).
+
+So the badge asset and its serving route are ready. `pay.html` needs no code
+from this branch to keep working; the snippet below is the only optional edit,
+and it is intentionally left for after the grin1 rail work merges to avoid
+touching a file another agent owns.
+
+## Why the pay-page header was NOT changed
+
+`templates/pay.html` renders the header on a dark surface and correctly uses the
+**white** wordmark (`/static/goblinpay-wordmark.svg`). The black badge is a
+**light-surface** asset; dropping it onto the dark header would put a black
+rectangle on a dark background. So the pay page keeps the white wordmark, and
+the black badge is used where a shopper picks the method on a light surface
+(the WooCommerce checkout row, done on this branch).
+
+## Optional pay.html snippet (only if a light-surface method chip is wanted)
+
+If a light-surface "you are paying with" chip is later added to the pay page
+(for example a light card summarising the method), drop the badge in with a
+single self-contained ``. It touches only the header block the branding
+commit already added, so the conflict surface is one line.
+
+Replace, in `templates/pay.html`, the brand link (currently):
+
+```html
+
+```
+
+with a version that also carries the method badge (kept in the same header
+block, so it will not restructure the page):
+
+```html
+
+
+```
+
+Then, if a light backing is desired behind the badge, add to `static/style.css`:
+
+```css
+.method-badge { display: inline-block; vertical-align: middle; }
+```
+
+No template logic, no new variables: the badge is a static asset served by the
+route already added on this branch.
diff --git a/connectors/woocommerce/assets/js/blocks.js b/connectors/woocommerce/assets/js/blocks.js
index 426226a..b7bc978 100644
--- a/connectors/woocommerce/assets/js/blocks.js
+++ b/connectors/woocommerce/assets/js/blocks.js
@@ -22,14 +22,25 @@
var data = getSetting( 'goblinpay_data', {} );
var title = decodeEntities( data.title || 'Pay with Grin (GRIN)' );
var description = decodeEntities( data.description || '' );
+ var icon = data.icon || '';
var Content = function () {
return createElement( 'div', { className: 'goblinpay-blocks-description' }, description );
};
+ // Label: the black GoblinPay badge (when present) followed by the method title.
+ var Label = icon
+ ? createElement(
+ 'span',
+ { style: { display: 'inline-flex', alignItems: 'center', gap: '0.5em' } },
+ createElement( 'img', { src: icon, alt: 'GoblinPay', style: { height: '22px' } } ),
+ createElement( 'span', null, title )
+ )
+ : createElement( 'span', null, title );
+
registerPaymentMethod( {
name: 'goblinpay',
- label: createElement( 'span', null, title ),
+ label: Label,
content: createElement( Content, null ),
edit: createElement( Content, null ),
canMakePayment: function () { return true; },
diff --git a/connectors/woocommerce/goblinpay-woocommerce.php b/connectors/woocommerce/goblinpay-woocommerce.php
index dd4893d..40b98a8 100644
--- a/connectors/woocommerce/goblinpay-woocommerce.php
+++ b/connectors/woocommerce/goblinpay-woocommerce.php
@@ -88,11 +88,26 @@ add_action('plugins_loaded', function () {
$this->title = $this->get_option('title', __('Grin (GRIN)', 'goblinpay-woocommerce'));
$this->description = $this->get_option('description');
$this->enabled = $this->get_option('enabled', 'no');
+ // Compact GoblinPay badge shown in the checkout payment-method row
+ // (Apple Pay style). Rendered inline via get_icon() below.
add_action('woocommerce_update_options_payment_gateways_' . $this->id, array($this, 'process_admin_options'));
add_action('woocommerce_thankyou_' . $this->id, array($this, 'thankyou_page'));
}
+ /**
+ * The checkout payment-method row icon: the black GoblinPay badge
+ * (goblin mark + "Pay"), self-contained inline SVG. Overrides the
+ * parent's behaviour so the badge needs no external asset
+ * request (the shop cannot reach the GoblinPay static dir).
+ */
+ public function get_icon() {
+ $icon = ''
+ . goblinpay_wc_badge_black()
+ . '';
+ return apply_filters('woocommerce_gateway_icon', $icon, $this->id);
+ }
+
public function init_form_fields() {
$webhook_url = esc_html(rest_url(GOBLINPAY_WC_WH_NS . '/webhook'));
$this->form_fields = array(
@@ -522,6 +537,31 @@ function goblinpay_wc_wordmark() {
. '';
}
+/**
+ * The black GoblinPay badge: the goblin mark (reused wallet geometry, white)
+ * next to the "Pay" wordmark, on a flat black rounded rectangle. This is the
+ * light-surface counterpart to the white wordmark, built to do the job the
+ * black Apple Pay badge does at checkout: a compact, instantly recognisable
+ * "this payment method is GoblinPay" mark. Self-contained inline SVG, no
+ * external font or asset request. Trusted, plugin-authored markup.
+ *
+ * Kept byte-for-byte in sync with GoblinPay's static/goblinpay-badge-black.svg.
+ */
+function goblinpay_wc_badge_black() {
+ return <<<'SVG'
+
+SVG;
+}
+
/**
* Sanitise a GoblinPay-generated QR SVG for safe output. Allows only the small
* tag/attribute set the server emits (svg/g/rect/path/circle/image), so a
diff --git a/connectors/woocommerce/includes/class-blocks.php b/connectors/woocommerce/includes/class-blocks.php
index 4c0ea52..9bc0418 100644
--- a/connectors/woocommerce/includes/class-blocks.php
+++ b/connectors/woocommerce/includes/class-blocks.php
@@ -42,9 +42,16 @@ final class GoblinPay_WC_Blocks_Support extends AbstractPaymentMethodType {
}
public function get_payment_method_data() {
+ // The black GoblinPay badge as a data URI so the Blocks checkout row
+ // shows it next to the method title with no external asset request.
+ $icon = function_exists('goblinpay_wc_badge_black')
+ ? 'data:image/svg+xml;base64,' . base64_encode(goblinpay_wc_badge_black())
+ : '';
+
return array(
'title' => !empty($this->gw_settings['title']) ? $this->gw_settings['title'] : 'Grin (GRIN)',
'description' => isset($this->gw_settings['description']) ? $this->gw_settings['description'] : '',
+ 'icon' => $icon,
'supports' => array('products'),
);
}
diff --git a/crates/gp-server/src/main.rs b/crates/gp-server/src/main.rs
index 86ea113..cf58b5a 100644
--- a/crates/gp-server/src/main.rs
+++ b/crates/gp-server/src/main.rs
@@ -66,6 +66,15 @@ async fn goblinpay_wordmark() -> impl Responder {
.body(include_str!("../../../static/goblinpay-wordmark.svg"))
}
+/// The black GoblinPay badge (goblin mark + "Pay"), Apple Pay style. The
+/// light-surface counterpart to the white wordmark: a compact payment-method
+/// mark for connector checkout rows and light pay-page surfaces.
+async fn goblinpay_badge_black() -> impl Responder {
+ HttpResponse::Ok()
+ .content_type("image/svg+xml")
+ .body(include_str!("../../../static/goblinpay-badge-black.svg"))
+}
+
/// Route table, shared by `main` and the tests.
fn routes(cfg: &mut web::ServiceConfig) {
cfg.route("/", web::get().to(index))
@@ -76,6 +85,10 @@ fn routes(cfg: &mut web::ServiceConfig) {
.route(
"/static/goblinpay-wordmark.svg",
web::get().to(goblinpay_wordmark),
+ )
+ .route(
+ "/static/goblinpay-badge-black.svg",
+ web::get().to(goblinpay_badge_black),
);
// Payment status + signed-receipt reads (public-by-token, M4).
payments::configure(cfg);
diff --git a/static/goblinpay-badge-black.svg b/static/goblinpay-badge-black.svg
new file mode 100644
index 0000000..bbef89a
--- /dev/null
+++ b/static/goblinpay-badge-black.svg
@@ -0,0 +1,48 @@
+
+```
+
+Then, if a light backing is desired behind the badge, add to `static/style.css`:
+
+```css
+.method-badge { display: inline-block; vertical-align: middle; }
+```
+
+No template logic, no new variables: the badge is a static asset served by the
+route already added on this branch.
diff --git a/connectors/woocommerce/assets/js/blocks.js b/connectors/woocommerce/assets/js/blocks.js
index 426226a..b7bc978 100644
--- a/connectors/woocommerce/assets/js/blocks.js
+++ b/connectors/woocommerce/assets/js/blocks.js
@@ -22,14 +22,25 @@
var data = getSetting( 'goblinpay_data', {} );
var title = decodeEntities( data.title || 'Pay with Grin (GRIN)' );
var description = decodeEntities( data.description || '' );
+ var icon = data.icon || '';
var Content = function () {
return createElement( 'div', { className: 'goblinpay-blocks-description' }, description );
};
+ // Label: the black GoblinPay badge (when present) followed by the method title.
+ var Label = icon
+ ? createElement(
+ 'span',
+ { style: { display: 'inline-flex', alignItems: 'center', gap: '0.5em' } },
+ createElement( 'img', { src: icon, alt: 'GoblinPay', style: { height: '22px' } } ),
+ createElement( 'span', null, title )
+ )
+ : createElement( 'span', null, title );
+
registerPaymentMethod( {
name: 'goblinpay',
- label: createElement( 'span', null, title ),
+ label: Label,
content: createElement( Content, null ),
edit: createElement( Content, null ),
canMakePayment: function () { return true; },
diff --git a/connectors/woocommerce/goblinpay-woocommerce.php b/connectors/woocommerce/goblinpay-woocommerce.php
index dd4893d..40b98a8 100644
--- a/connectors/woocommerce/goblinpay-woocommerce.php
+++ b/connectors/woocommerce/goblinpay-woocommerce.php
@@ -88,11 +88,26 @@ add_action('plugins_loaded', function () {
$this->title = $this->get_option('title', __('Grin (GRIN)', 'goblinpay-woocommerce'));
$this->description = $this->get_option('description');
$this->enabled = $this->get_option('enabled', 'no');
+ // Compact GoblinPay badge shown in the checkout payment-method row
+ // (Apple Pay style). Rendered inline via get_icon() below.
add_action('woocommerce_update_options_payment_gateways_' . $this->id, array($this, 'process_admin_options'));
add_action('woocommerce_thankyou_' . $this->id, array($this, 'thankyou_page'));
}
+ /**
+ * The checkout payment-method row icon: the black GoblinPay badge
+ * (goblin mark + "Pay"), self-contained inline SVG. Overrides the
+ * parent's