Merge badge-black: black GoblinPay badge for light checkout surfaces
This commit is contained in:
2ro
@@ -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 `<img>`. 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
|
||||
<a class="brand" href="/"><img class="brandmark" src="/static/goblinpay-wordmark.svg" alt="GoblinPay"></a>
|
||||
```
|
||||
|
||||
with a version that also carries the method badge (kept in the same header
|
||||
block, so it will not restructure the page):
|
||||
|
||||
```html
|
||||
<a class="brand" href="/"><img class="brandmark" src="/static/goblinpay-wordmark.svg" alt="GoblinPay"></a>
|
||||
<img class="method-badge" src="/static/goblinpay-badge-black.svg" alt="Pay with GoblinPay" height="28">
|
||||
```
|
||||
|
||||
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.
|
||||
@@ -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; },
|
||||
|
||||
@@ -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 <img src> behaviour so the badge needs no external asset
|
||||
* request (the shop cannot reach the GoblinPay static dir).
|
||||
*/
|
||||
public function get_icon() {
|
||||
$icon = '<span class="goblinpay-badge" style="display:inline-block;vertical-align:middle;margin-left:.4em;line-height:0">'
|
||||
. goblinpay_wc_badge_black()
|
||||
. '</span>';
|
||||
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() {
|
||||
. '</svg>';
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 40" height="26" role="img" aria-label="GoblinPay" preserveAspectRatio="xMidYMid meet" style="display:block">
|
||||
<rect width="98" height="40" rx="8" fill="#000000"/>
|
||||
<g transform="translate(13,8) scale(0.039933)">
|
||||
<g transform="translate(0,601) scale(0.05,-0.05)" fill="#ffffff" stroke="none">
|
||||
<path d="M195 11784 c-515 -1551 98 -2966 1520 -3514 171 -66 171 -72 2 -72 -415 0 -893 215 -1273 572 -178 167 -181 163 -77 -83 478 -1130 1770 -1734 2963 -1384 283 83 309 101 420 292 376 648 1038 1116 1763 1245 l143 26 100 202 c887 1780 -911 3344 -3076 2675 l-170 -52 220 -14 c480 -32 818 -114 1118 -273 258 -137 548 -414 624 -597 l32 -76 -87 76 c-435 375 -938 524 -1557 461 -273 -28 -340 -39 -740 -120 -893 -182 -1449 24 -1756 650 l-98 200 -71 -214z"/>
|
||||
<path d="M9720 10053 c0 -146 -256 -556 -441 -705 -381 -308 -766 -380 -1559 -290 -1209 137 -2026 -255 -2519 -1208 -78 -151 -82 -156 -72 -77 18 140 128 450 210 592 43 74 73 135 67 135 -25 0 -397 -184 -512 -253 -966 -580 -1594 -1674 -1594 -2777 0 -104 -4 -190 -10 -190 -5 0 -65 43 -132 95 -650 503 -1118 775 -1606 935 -290 95 -302 94 -242 -15 52 -95 166 -372 191 -465 9 -33 34 -121 56 -195 48 -161 120 -508 194 -935 118 -684 437 -1371 795 -1715 185 -178 324 -239 594 -262 144 -13 150 -15 147 -63 -1 -27 -14 -174 -28 -326 -83 -902 258 -1568 1037 -2024 139 -81 161 -80 127 4 -37 96 -85 369 -96 546 l-10 170 46 -60 c328 -431 869 -753 1497 -891 351 -77 1285 -67 1426 15 9 5 -104 50 -250 98 -649 217 -1341 668 -1680 1096 -81 102 -88 147 -11 78 157 -142 653 -406 925 -493 783 -249 1542 -242 2332 20 l274 91 106 -83 c298 -236 798 -328 1259 -231 197 42 196 38 32 169 -156 124 -344 356 -443 546 l-60 116 70 52 c544 408 783 906 627 1300 l-41 102 170 138 c442 355 584 624 813 1537 186 742 257 952 452 1328 l118 227 -145 -14 c-693 -68 -1425 -411 -1729 -810 -99 -130 -112 -127 -165 44 -54 175 -217 511 -308 636 -64 88 -70 91 -224 117 -314 52 -637 184 -956 390 -260 168 -509 436 -280 302 127 -74 302 -160 430 -211 97 -38 146 -55 348 -118 335 -105 983 -129 1280 -47 961 264 1554 1048 1729 2286 28 199 45 685 23 677 -9 -4 -73 -77 -141 -163 -650 -810 -1594 -1147 -2451 -873 -251 80 -246 76 -171 121 395 240 638 767 578 1253 -25 209 -77 395 -77 278z m-682 -4962 c306 -158 601 -1396 416 -1747 -118 -224 -283 -345 -526 -387 -455 -78 -577 227 -456 1143 96 725 320 1118 566 991z m-3115 -156 c371 -172 699 -815 799 -1565 34 -251 19 -307 -108 -422 -575 -519 -1624 -162 -1931 657 -265 709 593 1630 1240 1330z m5261 -120 c20 -377 -135 -912 -290 -995 -70 -38 -72 -35 -157 230 l-64 200 -24 -90 c-50 -192 -144 -340 -215 -340 -111 0 -316 804 -228 893 53 53 200 -130 226 -283 l14 -80 36 105 c100 293 222 333 332 109 l54 -110 35 105 c89 260 271 427 281 256z m-8491 -284 l75 -230 52 160 c89 272 210 336 295 154 126 -268 210 -757 142 -825 -44 -44 -163 120 -247 340 -12 33 -19 24 -39 -50 -89 -330 -286 -346 -374 -30 l-22 80 -35 -125 c-54 -196 -223 -428 -275 -377 -37 37 -29 448 11 608 70 276 219 524 314 524 17 0 56 -87 103 -229z m4164 -2698 c137 -311 883 -373 1408 -116 162 78 171 64 42 -61 -317 -305 -854 -408 -1271 -244 -223 87 -516 338 -516 442 0 53 140 267 212 324 l58 46 14 -152 c8 -84 31 -191 53 -239z"/>
|
||||
</g>
|
||||
</g>
|
||||
<text x="46" y="28" font-family="system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif" font-size="22" font-weight="700" letter-spacing="-0.5" fill="#ffffff">Pay</text>
|
||||
</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
|
||||
|
||||
@@ -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'),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 40" role="img" aria-label="GoblinPay" preserveAspectRatio="xMidYMid meet">
|
||||
<rect width="98" height="40" rx="8" fill="#000000"/>
|
||||
<!-- Goblin girl head mark (reused geometry, white for the black badge) -->
|
||||
<g transform="translate(13,8) scale(0.039933)">
|
||||
<g transform="translate(0,601) scale(0.05,-0.05)" fill="#ffffff" stroke="none">
|
||||
<path d="M195 11784 c-515 -1551 98 -2966 1520 -3514 171 -66 171 -72 2 -72
|
||||
-415 0 -893 215 -1273 572 -178 167 -181 163 -77 -83 478 -1130 1770 -1734
|
||||
2963 -1384 283 83 309 101 420 292 376 648 1038 1116 1763 1245 l143 26 100
|
||||
202 c887 1780 -911 3344 -3076 2675 l-170 -52 220 -14 c480 -32 818 -114 1118
|
||||
-273 258 -137 548 -414 624 -597 l32 -76 -87 76 c-435 375 -938 524 -1557 461
|
||||
-273 -28 -340 -39 -740 -120 -893 -182 -1449 24 -1756 650 l-98 200 -71 -214z"/>
|
||||
<path d="M9720 10053 c0 -146 -256 -556 -441 -705 -381 -308 -766 -380 -1559
|
||||
-290 -1209 137 -2026 -255 -2519 -1208 -78 -151 -82 -156 -72 -77 18 140 128
|
||||
450 210 592 43 74 73 135 67 135 -25 0 -397 -184 -512 -253 -966 -580 -1594
|
||||
-1674 -1594 -2777 0 -104 -4 -190 -10 -190 -5 0 -65 43 -132 95 -650 503
|
||||
-1118 775 -1606 935 -290 95 -302 94 -242 -15 52 -95 166 -372 191 -465 9 -33
|
||||
34 -121 56 -195 48 -161 120 -508 194 -935 118 -684 437 -1371 795 -1715 185
|
||||
-178 324 -239 594 -262 144 -13 150 -15 147 -63 -1 -27 -14 -174 -28 -326 -83
|
||||
-902 258 -1568 1037 -2024 139 -81 161 -80 127 4 -37 96 -85 369 -96 546 l-10
|
||||
170 46 -60 c328 -431 869 -753 1497 -891 351 -77 1285 -67 1426 15 9 5 -104
|
||||
50 -250 98 -649 217 -1341 668 -1680 1096 -81 102 -88 147 -11 78 157 -142
|
||||
653 -406 925 -493 783 -249 1542 -242 2332 20 l274 91 106 -83 c298 -236 798
|
||||
-328 1259 -231 197 42 196 38 32 169 -156 124 -344 356 -443 546 l-60 116 70
|
||||
52 c544 408 783 906 627 1300 l-41 102 170 138 c442 355 584 624 813 1537 186
|
||||
742 257 952 452 1328 l118 227 -145 -14 c-693 -68 -1425 -411 -1729 -810 -99
|
||||
-130 -112 -127 -165 44 -54 175 -217 511 -308 636 -64 88 -70 91 -224 117
|
||||
-314 52 -637 184 -956 390 -260 168 -509 436 -280 302 127 -74 302 -160 430
|
||||
-211 97 -38 146 -55 348 -118 335 -105 983 -129 1280 -47 961 264 1554 1048
|
||||
1729 2286 28 199 45 685 23 677 -9 -4 -73 -77 -141 -163 -650 -810 -1594
|
||||
-1147 -2451 -873 -251 80 -246 76 -171 121 395 240 638 767 578 1253 -25 209
|
||||
-77 395 -77 278z m-682 -4962 c306 -158 601 -1396 416 -1747 -118 -224 -283
|
||||
-345 -526 -387 -455 -78 -577 227 -456 1143 96 725 320 1118 566 991z m-3115
|
||||
-156 c371 -172 699 -815 799 -1565 34 -251 19 -307 -108 -422 -575 -519 -1624
|
||||
-162 -1931 657 -265 709 593 1630 1240 1330z m5261 -120 c20 -377 -135 -912
|
||||
-290 -995 -70 -38 -72 -35 -157 230 l-64 200 -24 -90 c-50 -192 -144 -340
|
||||
-215 -340 -111 0 -316 804 -228 893 53 53 200 -130 226 -283 l14 -80 36 105
|
||||
c100 293 222 333 332 109 l54 -110 35 105 c89 260 271 427 281 256z m-8491
|
||||
-284 l75 -230 52 160 c89 272 210 336 295 154 126 -268 210 -757 142 -825 -44
|
||||
-44 -163 120 -247 340 -12 33 -19 24 -39 -50 -89 -330 -286 -346 -374 -30
|
||||
l-22 80 -35 -125 c-54 -196 -223 -428 -275 -377 -37 37 -29 448 11 608 70 276
|
||||
219 524 314 524 17 0 56 -87 103 -229z m4164 -2698 c137 -311 883 -373 1408
|
||||
-116 162 78 171 64 42 -61 -317 -305 -854 -408 -1271 -244 -223 87 -516 338
|
||||
-516 442 0 53 140 267 212 324 l58 46 14 -152 c8 -84 31 -191 53 -239z"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- "Pay" wordmark: font-stack-safe, matches the existing GoblinPay wordmark treatment -->
|
||||
<text x="46" y="28" font-family="system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif" font-size="22" font-weight="700" letter-spacing="-0.5" fill="#ffffff">Pay</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
Reference in New Issue
Block a user