PluginProbe
Stripe Payment Forms by WP Simple Pay – Accept Credit Card Payments + Subscriptions with Stripe / trunk
Stripe Payment Forms by WP Simple Pay – Accept Credit Card Payments + Subscriptions with Stripe vtrunk
4.17.3 trunk 2.2.0 2.3.0 2.3.1 2.3.2 2.3.3 2.4.0 2.4.1 2.5.0 2.5.1 2.5.2 2.5.3 2.6.0 2.6.1 2.6.2 2.6.3 4.10.0 4.11.1 4.12.2 4.14.1 4.14.2 4.14.3 4.15.0 4.16.0 All 59 releases
stripe / src / Admin / FormBuilder / FormStyle / AdminUI.php

AdminUI.php in Stripe Payment Forms by WP Simple Pay – Accept Credit Card Payments + Subscriptions with Stripe trunk, at src/Admin/FormBuilder/FormStyle/AdminUI.php

1,222 lines 44.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Admin UI Handler
4 *
5 * @package SimplePay
6 * @since 4.17.0
7 */
8
9 namespace SimplePay\Core\Admin\FormBuilder\FormStyle;
10
11 if ( ! defined( 'ABSPATH' ) ) {
12 exit; // Exit if accessed directly.
13 }
14
15 /**
16 * Class AdminUI
17 *
18 * Handles the admin user interface for WP Simple Pay Styles.
19 * Adds style settings to the WP Simple Pay form editor and handles
20 * saving and retrieving style settings.
21 *
22 * @since 4.17.0
23 */
24 class AdminUI {
25
26 /**
27 * Instance.
28 *
29 * @since 4.17.0
30 * @access private
31 * @var AdminUI The single instance of the class.
32 */
33 private static $instance = null;
34
35 /**
36 * Ensures only one instance of AdminUI is loaded or can be loaded.
37 *
38 * @since 4.17.0
39 * @access public
40 * @static
41 * @return AdminUI An instance of the class.
42 */
43 public static function get_instance() {
44 if ( is_null( self::$instance ) ) {
45 self::$instance = new self();
46 }
47 return self::$instance;
48 }
49
50 /**
51 * Constructor.
52 *
53 * @since 4.17.0
54 * @access private
55 */
56 private function __construct() {
57 // Add hooks.
58 $this->hooks();
59 }
60
61 /**
62 * Initialize hooks.
63 *
64 * @since 4.17.0
65 * @access private
66 */
67 private function hooks(): void {
68 // Hook into the WP Simple Pay 'General' tab action.
69 add_action( 'simpay_form_settings_form_style_panel', array( $this, 'render_style_settings_in_tab' ), 20, 1 ); // Priority 20 to appear after core fields.
70
71 // Hook into the save action.
72 add_action( 'save_post_simple-pay', array( $this, 'save_style_settings' ), 10, 2 );
73
74 // Hook into the enqueue action for scripts/styles.
75 add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
76 }
77
78 /**
79 * Enqueue admin scripts and styles (like the color picker).
80 *
81 * Loads necessary CSS and JavaScript files for the admin interface,
82 * but only on the WP Simple Pay form edit screen.
83 *
84 * @since 4.17.0
85 *
86 * @param string $hook_suffix The current admin page.
87 * @return void
88 */
89 public function enqueue_admin_scripts( $hook_suffix ) {
90 global $post_type;
91
92 // Only load on the simple-pay post type edit screen.
93 if ( 'simple-pay' === $post_type && ( 'post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) ) {
94
95 // Enqueue WordPress color picker scripts and styles.
96 wp_enqueue_style( 'wp-color-picker' );
97 wp_enqueue_script( 'wp-color-picker' );
98
99 // Enqueue color picker alpha addon if available.
100 if ( ! wp_script_is( 'wp-color-picker-alpha', 'registered' ) ) {
101
102 wp_register_script(
103 'wp-color-picker-alpha',
104 SIMPLE_PAY_URL . 'src/Admin/FormBuilder/FormStyle/assets/js/wp-color-picker-alpha.min.js',
105 array( 'wp-color-picker' ),
106 '3.0.0',
107 true
108 );
109 }
110 wp_enqueue_script( 'wp-color-picker-alpha' );
111 // Enqueue custom admin styles and scripts.
112 wp_enqueue_style(
113 'wpsp-admin-admin-css',
114 SIMPLE_PAY_URL . 'src/Admin/FormBuilder/FormStyle/assets/css/admin.css',
115 array(),
116 SIMPLE_PAY_VERSION
117 );
118
119 wp_enqueue_script(
120 'wpsp-admin-admin-js',
121 SIMPLE_PAY_URL . 'src/Admin/FormBuilder/FormStyle/assets/js/admin.js',
122 array( 'jquery', 'wp-color-picker', 'wp-color-picker-alpha' ),
123 SIMPLE_PAY_VERSION,
124 true
125 );
126
127 // Pass localized data to the JS.
128 wp_localize_script(
129 'wpsp-admin-admin-js',
130 'simpayFormStyleData',
131 array(
132 'resetConfirmMessage' => __( 'Are you sure you want to reset all style settings to default values?', 'stripe' ),
133 )
134 );
135 }
136 }
137
138 /**
139 * Check if this is a new form without any saved style settings
140 *
141 * Determines if a form has any style settings saved yet.
142 * Used to apply default styles to new forms.
143 *
144 * @since 4.17.0
145 * @access private
146 *
147 * @param int $post_id The post ID to check.
148 * @return bool True if this is a new form, false otherwise
149 */
150 private function is_new_form( $post_id ) {
151 // Check if any style settings exist for this form.
152 foreach ( Settings::get_style_keys() as $key ) {
153 if ( Settings::setting_exists( $post_id, $key ) ) {
154 return false;
155 }
156 }
157
158 return true;
159 }
160
161 /**
162 * Get the available theme presets for the form styles UI.
163 *
164 * @since 4.17.0
165 * @access private
166 *
167 * @return array<string, array{name: string, description: string, colors: array{primary: string, secondary: string, text: string, background: string}}> Theme preset configuration.
168 */
169 private function get_theme_presets() {
170 return array(
171 'default' => array(
172 'name' => __( 'Default', 'stripe' ),
173 'colors' => array(
174 'primary' => '#0f8569',
175 'secondary' => '#0e7c62',
176 'text' => '#32325d',
177 'background' => '#ffffff',
178 ),
179 'description' => __( 'WP Simple Pay\'s default styling', 'stripe' ),
180 ),
181 'sunset' => array(
182 'name' => __( 'Sunset', 'stripe' ),
183 'colors' => array(
184 'primary' => '#e74c3c',
185 'secondary' => '#c0392b',
186 'text' => '#2c3e50',
187 'background' => '#ecf0f1',
188 ),
189 'description' => __( 'Warm red accents with light background', 'stripe' ),
190 ),
191 'forest' => array(
192 'name' => __( 'Forest', 'stripe' ),
193 'colors' => array(
194 'primary' => '#27ae60',
195 'secondary' => '#219955',
196 'text' => '#2c3e50',
197 'background' => '#f9f9f9',
198 ),
199 'description' => __( 'Fresh green theme with clean background', 'stripe' ),
200 ),
201 'ocean' => array(
202 'name' => __( 'Ocean', 'stripe' ),
203 'colors' => array(
204 'primary' => '#3498db',
205 'secondary' => '#2980b9',
206 'text' => '#2c3e50',
207 'background' => '#ecf0f1',
208 ),
209 'description' => __( 'Calming blue palette', 'stripe' ),
210 ),
211 'monochrome' => array(
212 'name' => __( 'Monochrome', 'stripe' ),
213 'colors' => array(
214 'primary' => '#333333',
215 'secondary' => '#555555',
216 'text' => '#333333',
217 'background' => '#ffffff',
218 ),
219 'description' => __( 'Simple black and white theme', 'stripe' ),
220 ),
221 'sunshine' => array(
222 'name' => __( 'Sunshine', 'stripe' ),
223 'colors' => array(
224 'primary' => '#f1c40f',
225 'secondary' => '#f39c12',
226 'text' => '#34495e',
227 'background' => '#ffffff',
228 ),
229 'description' => __( 'Bright and cheerful yellow accents', 'stripe' ),
230 ),
231 'coral' => array(
232 'name' => __( 'Coral', 'stripe' ),
233 'colors' => array(
234 'primary' => '#e67e22',
235 'secondary' => '#d35400',
236 'text' => '#2c3e50',
237 'background' => '#f9f9f9',
238 ),
239 'description' => __( 'Warm orange palette', 'stripe' ),
240 ),
241 'minimal' => array(
242 'name' => __( 'Minimal', 'stripe' ),
243 'colors' => array(
244 'primary' => '#bdc3c7',
245 'secondary' => '#95a5a6',
246 'text' => '#2c3e50',
247 'background' => '#ffffff',
248 ),
249 'description' => __( 'Clean, minimalist design', 'stripe' ),
250 ),
251 );
252 }
253
254 /**
255 * Renders the style settings within the WP Simple Pay 'General' tab.
256 *
257 * Creates the tabbed interface for style settings in the form editor.
258 * Includes tabs for themes, colors, typography, layout, and buttons.
259 *
260 * @since 4.17.0
261 *
262 * @param int $post_id The post ID.
263 * @return void
264 */
265 public function render_style_settings_in_tab( $post_id ) {
266
267 // Check if the license allows access to form styles (Plus or higher).
268 $license = simpay_get_license();
269 if ( ! $license->is_pro( 'plus', '>=' ) ) {
270 $this->render_style_upsell();
271 return;
272 }
273
274 // Determine if this is a new form.
275 $is_new_form = $this->is_new_form( $post_id );
276
277 // Add a nonce field for security. Must be inside the form.
278 wp_nonce_field( 'wpsps_save_styles', 'wpsps_styles_nonce' );
279
280 $style_keys = Settings::get_style_keys();
281
282 // Show a warning when the form type is off-site (Stripe Checkout).
283 $form_display_type = simpay_get_saved_meta( $post_id, '_form_display_type', '' );
284 $is_offsite = 'stripe_checkout' === $form_display_type;
285 ?>
286
287 <div
288 class="simpay-show-if notice notice-warning inline"
289 data-if="_form_type"
290 data-is="off-site"
291 <?php echo $is_offsite ? '' : 'style="display:none;"'; ?>
292 >
293 <p>
294 <?php
295 esc_html_e(
296 'Form Style settings only apply to on-site payment forms. Switch the form type to "On-site payment form" to use these styles.',
297 'stripe'
298 );
299 ?>
300 </p>
301 </div>
302
303 <?php
304 // Start the modern tabbed interface.
305 ?>
306 <div class="wpsp-admin-tabs-container">
307 <!-- Tabs Navigation -->
308 <div class="wpsp-admin-tabs-nav">
309 <button type="button" class="wpsp-admin-tab-button active" data-tab="themes">
310 <span class="dashicons dashicons-admin-appearance"></span>
311 <?php esc_html_e( 'Themes', 'stripe' ); ?>
312 </button>
313 <button type="button" class="wpsp-admin-tab-button" data-tab="colors">
314 <span class="dashicons dashicons-art"></span>
315 <?php esc_html_e( 'Colors', 'stripe' ); ?>
316 </button>
317 <button type="button" class="wpsp-admin-tab-button" data-tab="typography">
318 <span class="dashicons dashicons-editor-textcolor"></span>
319 <?php esc_html_e( 'Typography', 'stripe' ); ?>
320 </button>
321 <button type="button" class="wpsp-admin-tab-button" data-tab="design">
322 <span class="dashicons dashicons-admin-customizer"></span>
323 <?php esc_html_e( 'Design & Layout', 'stripe' ); ?>
324 </button>
325 </div>
326
327 <!-- Tabs Content -->
328 <div class="wpsp-admin-tabs-content">
329 <!-- Themes Tab -->
330 <div class="wpsp-admin-tab-panel active" data-tab-content="themes">
331 <div class="wpsp-admin-theme-instructions">
332 <p><?php esc_html_e( 'Select a theme to instantly apply a complete set of coordinated styles. You can customize individual settings in the other tabs after applying a theme.', 'stripe' ); ?></p>
333 </div>
334 <div class="wpsp-admin-theme-grid">
335 <?php
336 // Get the current selected theme.
337 $current_theme = Settings::get_setting( $post_id, 'selected_theme', 'default' );
338
339 // Define theme presets.
340 $themes = $this->get_theme_presets();
341
342 // Store themes in a hidden field for JavaScript access.
343 echo '<input type="hidden" id="wpsps_theme_presets" value="' . esc_attr( (string) wp_json_encode( $themes ) ) . '">';
344
345 // Output theme selection cards.
346 foreach ( $themes as $theme_id => $theme ) {
347 $is_selected = $current_theme === $theme_id;
348 ?>
349 <div class="wpsp-admin-theme-card <?php echo $is_selected ? 'selected' : ''; ?>" data-theme-id="<?php echo esc_attr( $theme_id ); ?>" style="--theme-primary: <?php echo esc_attr( $theme['colors']['primary'] ); ?>; --theme-secondary: <?php echo esc_attr( $theme['colors']['secondary'] ); ?>; --theme-background: <?php echo esc_attr( $theme['colors']['background'] ); ?>; --theme-text: <?php echo esc_attr( $theme['colors']['text'] ); ?>; --theme-border: #e6e6e6; --theme-input-bg: <?php echo esc_attr( $theme['colors']['background'] ); ?>;">
350 <div class="wpsp-admin-theme-preview">
351 <div class="wpsp-admin-theme-colors">
352 <span class="wpsp-admin-theme-color primary" style="background-color: <?php echo esc_attr( $theme['colors']['primary'] ); ?>" data-color-name="Primary"></span>
353 <span class="wpsp-admin-theme-color secondary" style="background-color: <?php echo esc_attr( $theme['colors']['secondary'] ); ?>" data-color-name="Secondary"></span>
354 <span class="wpsp-admin-theme-color text" style="background-color: <?php echo esc_attr( $theme['colors']['text'] ); ?>" data-color-name="Text"></span>
355 <span class="wpsp-admin-theme-color background" style="background-color: <?php echo esc_attr( $theme['colors']['background'] ); ?>" data-color-name="Background"></span>
356 </div>
357 <!-- Mini form preview with consistent styling -->
358 <div class="wpsp-admin-theme-form-preview wpsp-admin-preview-wrapper" data-theme-id="<?php echo esc_attr( $theme_id ); ?>" style="background-color: <?php echo esc_attr( $theme['colors']['background'] ); ?>;">
359 <div class="preview-field">
360 <label class="preview-label wpsp-admin-preview-label" data-theme-color="label" style="color: <?php echo esc_attr( $theme['colors']['text'] ); ?>"><?php esc_html_e( 'Email Address', 'stripe' ); ?></label>
361 <input type="text" class="preview-input wpsp-admin-preview-input" placeholder="<?php esc_attr_e( 'Enter your email', 'stripe' ); ?>" style="background-color: <?php echo esc_attr( $theme['colors']['background'] ); ?>; color: <?php echo esc_attr( $theme['colors']['text'] ); ?>; border-color: #e6e6e6; border-radius: 4px;">
362 </div>
363 <div class="preview-field">
364 <label class="preview-label wpsp-admin-preview-label" data-theme-color="label" style="color: <?php echo esc_attr( $theme['colors']['text'] ); ?>"><?php esc_html_e( 'Amount', 'stripe' ); ?></label>
365 <input type="text" class="preview-input wpsp-admin-preview-input" placeholder="$50.00" style="background-color: <?php echo esc_attr( $theme['colors']['background'] ); ?>; color: <?php echo esc_attr( $theme['colors']['text'] ); ?>; border-color: #e6e6e6; border-radius: 4px;">
366 </div>
367 <div class="preview-field">
368 <button type="button" class="wpsp-admin-theme-button wpsp-admin-preview-button wpsp-admin-preview-btn" data-theme-color="button" style="background-color: <?php echo esc_attr( $theme['colors']['primary'] ); ?>; color: #ffffff; border-radius: 4px;">
369 <?php esc_html_e( 'Pay Now', 'stripe' ); ?>
370 </button>
371 </div>
372 </div>
373 </div>
374 <div class="wpsp-admin-theme-info">
375 <h4><?php echo esc_html( $theme['name'] ); ?></h4>
376 <p><?php echo esc_html( $theme['description'] ); ?></p>
377 <input
378 type="radio"
379 name="wpsps[selected_theme]"
380 value="<?php echo esc_attr( $theme_id ); ?>"
381 id="wpsps_theme_<?php echo esc_attr( $theme_id ); ?>"
382 <?php checked( $current_theme, $theme_id ); ?>
383 class="wpsp-admin-theme-radio"
384 >
385 </div>
386 </div>
387 <?php
388 }
389 ?>
390 </div>
391 </div>
392
393 <!-- Colors Tab -->
394 <div class="wpsp-admin-tab-panel" data-tab-content="colors">
395 <!-- Background Colors Section -->
396 <div class="wpsp-admin-color-section">
397 <h3 class="wpsp-admin-section-title">
398 <span class="dashicons dashicons-admin-appearance"></span>
399 <?php esc_html_e( 'Background Colors', 'stripe' ); ?>
400 </h3>
401 <div class="wpsp-admin-form-grid">
402 <!-- Form Container Background Color -->
403 <div class="wpsp-admin-form-field">
404 <label for="wpsps_form_container_background_color">
405 <?php esc_html_e( 'Form Background', 'stripe' ); ?>
406 </label>
407 <div class="wpsp-admin-color-preview-wrap">
408 <?php
409 // Get raw value to show saved value even if empty.
410 $form_bg_value = Settings::get_raw_setting( $post_id, 'form_container_background_color' );
411 ?>
412 <input
413 type="text"
414 id="wpsps_form_container_background_color"
415 name="wpsps[form_container_background_color]"
416 value="<?php echo esc_attr( $form_bg_value ); ?>"
417 class="wpspcolor-picker"
418 data-alpha-enabled="true"
419 />
420 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Form', 'stripe' ); ?></div>
421 </div>
422 <p class="wpsp-admin-field-description">
423 <?php esc_html_e( 'Background color of the entire form container', 'stripe' ); ?>
424 </p>
425 </div>
426
427 <!-- Input Background Color -->
428 <div class="wpsp-admin-form-field">
429 <label for="wpsps_background_color">
430 <?php esc_html_e( 'Input Background', 'stripe' ); ?>
431 </label>
432 <div class="wpsp-admin-color-preview-wrap">
433 <?php
434 // Get raw value to show saved value even if empty.
435 $input_bg_value = Settings::get_raw_setting( $post_id, 'background_color' );
436 ?>
437 <input
438 type="text"
439 id="wpsps_background_color"
440 name="wpsps[background_color]"
441 value="<?php echo esc_attr( $input_bg_value ); ?>"
442 class="wpspcolor-picker"
443 data-alpha-enabled="true"
444 />
445 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Input', 'stripe' ); ?></div>
446 </div>
447 <p class="wpsp-admin-field-description">
448 <?php esc_html_e( 'Background color of input fields, selects, and dropdowns', 'stripe' ); ?>
449 </p>
450 </div>
451 </div>
452 </div>
453
454 <!-- Text Colors Section -->
455 <div class="wpsp-admin-color-section">
456 <h3 class="wpsp-admin-section-title">
457 <span class="dashicons dashicons-editor-textcolor"></span>
458 <?php esc_html_e( 'Text Colors', 'stripe' ); ?>
459 </h3>
460 <div class="wpsp-admin-form-grid">
461 <!-- General Text Color -->
462 <div class="wpsp-admin-form-field">
463 <label for="wpsps_text_color">
464 <?php esc_html_e( 'General Text Color', 'stripe' ); ?>
465 </label>
466 <div class="wpsp-admin-color-preview-wrap">
467 <input
468 type="text"
469 id="wpsps_text_color"
470 name="wpsps[text_color]"
471 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'text_color' ) ); ?>"
472 class="wpspcolor-picker"
473 />
474 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Text', 'stripe' ); ?></div>
475 </div>
476 <p class="wpsp-admin-field-description">
477 <?php esc_html_e( 'Default color for all text elements', 'stripe' ); ?>
478 </p>
479 </div>
480
481 <!-- Label Text Color -->
482 <div class="wpsp-admin-form-field">
483 <label for="wpsps_label_text_color">
484 <?php esc_html_e( 'Label Text Color', 'stripe' ); ?>
485 </label>
486 <div class="wpsp-admin-color-preview-wrap">
487 <input
488 type="text"
489 id="wpsps_label_text_color"
490 name="wpsps[label_text_color]"
491 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'label_text_color' ) ); ?>"
492 class="wpspcolor-picker"
493 />
494 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Labels', 'stripe' ); ?></div>
495 </div>
496 <p class="wpsp-admin-field-description">
497 <?php esc_html_e( 'Color specifically for field labels (overrides General Text Color)', 'stripe' ); ?>
498 </p>
499 </div>
500
501 <!-- Input Text Color -->
502 <div class="wpsp-admin-form-field">
503 <label for="wpsps_input_text_color">
504 <?php esc_html_e( 'Input Text Color', 'stripe' ); ?>
505 </label>
506 <div class="wpsp-admin-color-preview-wrap">
507 <input
508 type="text"
509 id="wpsps_input_text_color"
510 name="wpsps[input_text_color]"
511 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'input_text_color' ) ); ?>"
512 class="wpspcolor-picker"
513 />
514 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Input Text', 'stripe' ); ?></div>
515 </div>
516 <p class="wpsp-admin-field-description">
517 <?php esc_html_e( 'Color specifically for text in input fields (overrides General Text Color)', 'stripe' ); ?>
518 </p>
519 </div>
520 </div>
521 </div>
522
523 <!-- Accent & Border Colors Section -->
524 <div class="wpsp-admin-color-section">
525 <h3 class="wpsp-admin-section-title">
526 <span class="dashicons dashicons-art"></span>
527 <?php esc_html_e( 'Accent & Border Colors', 'stripe' ); ?>
528 </h3>
529 <div class="wpsp-admin-form-grid">
530 <!-- Primary Color -->
531 <div class="wpsp-admin-form-field">
532 <label for="wpsps_primary_color">
533 <?php esc_html_e( 'Primary (Accent) Color', 'stripe' ); ?>
534 </label>
535 <div class="wpsp-admin-color-preview-wrap">
536 <input
537 type="text"
538 id="wpsps_primary_color"
539 name="wpsps[primary_color]"
540 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'primary_color' ) ); ?>"
541 class="wpspcolor-picker"
542 />
543 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Accent', 'stripe' ); ?></div>
544 </div>
545 <p class="wpsp-admin-field-description">
546 <?php esc_html_e( 'Used for focus states, highlights, and links', 'stripe' ); ?>
547 </p>
548 </div>
549
550 <!-- Border Color -->
551 <div class="wpsp-admin-form-field">
552 <label for="wpsps_border_color">
553 <?php esc_html_e( 'Border Color', 'stripe' ); ?>
554 </label>
555 <div class="wpsp-admin-color-preview-wrap">
556 <input
557 type="text"
558 id="wpsps_border_color"
559 name="wpsps[border_color]"
560 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'border_color' ) ); ?>"
561 class="wpspcolor-picker"
562 data-alpha-enabled="true"
563 />
564 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Border', 'stripe' ); ?></div>
565 </div>
566 <p class="wpsp-admin-field-description">
567 <?php esc_html_e( 'Border color for input fields and elements', 'stripe' ); ?>
568 </p>
569 </div>
570 </div>
571 </div>
572
573 <!-- Error Colors Section -->
574 <div class="wpsp-admin-color-section">
575 <h3 class="wpsp-admin-section-title">
576 <span class="dashicons dashicons-warning"></span>
577 <?php esc_html_e( 'Error Colors', 'stripe' ); ?>
578 </h3>
579 <div class="wpsp-admin-form-grid">
580 <!-- Error Border Color -->
581 <div class="wpsp-admin-form-field">
582 <label for="wpsps_error_border_color">
583 <?php esc_html_e( 'Error Border Color', 'stripe' ); ?>
584 </label>
585 <div class="wpsp-admin-color-preview-wrap">
586 <input
587 type="text"
588 id="wpsps_error_border_color"
589 name="wpsps[error_border_color]"
590 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'error_border_color' ) ); ?>"
591 class="wpspcolor-picker"
592 />
593 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Error Border', 'stripe' ); ?></div>
594 </div>
595 <p class="wpsp-admin-field-description">
596 <?php esc_html_e( 'Border color for fields with errors', 'stripe' ); ?>
597 </p>
598 </div>
599
600 <!-- Error Text Color -->
601 <div class="wpsp-admin-form-field">
602 <label for="wpsps_error_text_color">
603 <?php esc_html_e( 'Error Text Color', 'stripe' ); ?>
604 </label>
605 <div class="wpsp-admin-color-preview-wrap">
606 <input
607 type="text"
608 id="wpsps_error_text_color"
609 name="wpsps[error_text_color]"
610 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'error_text_color' ) ); ?>"
611 class="wpspcolor-picker"
612 />
613 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Error Text', 'stripe' ); ?></div>
614 </div>
615 <p class="wpsp-admin-field-description">
616 <?php esc_html_e( 'Text color for error messages', 'stripe' ); ?>
617 </p>
618 </div>
619 </div>
620 </div>
621
622 <!-- Form Title & Description Colors Section -->
623 <div class="wpsp-admin-color-section">
624 <h3 class="wpsp-admin-section-title">
625 <span class="dashicons dashicons-text"></span>
626 <?php esc_html_e( 'Form Title & Description Colors', 'stripe' ); ?>
627 </h3>
628 <div class="wpsp-admin-form-grid">
629 <!-- Title Color -->
630 <div class="wpsp-admin-form-field">
631 <label for="wpsps_title_color">
632 <?php esc_html_e( 'Title Color', 'stripe' ); ?>
633 </label>
634 <div class="wpsp-admin-color-preview-wrap">
635 <input
636 type="text"
637 id="wpsps_title_color"
638 name="wpsps[title_color]"
639 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'title_color' ) ); ?>"
640 class="wpspcolor-picker"
641 />
642 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Title', 'stripe' ); ?></div>
643 </div>
644 <p class="wpsp-admin-field-description">
645 <?php esc_html_e( 'Color for the form title', 'stripe' ); ?>
646 </p>
647 </div>
648
649 <!-- Description Color -->
650 <div class="wpsp-admin-form-field">
651 <label for="wpsps_description_color">
652 <?php esc_html_e( 'Description Color', 'stripe' ); ?>
653 </label>
654 <div class="wpsp-admin-color-preview-wrap">
655 <input
656 type="text"
657 id="wpsps_description_color"
658 name="wpsps[description_color]"
659 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'description_color' ) ); ?>"
660 class="wpspcolor-picker"
661 />
662 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Description', 'stripe' ); ?></div>
663 </div>
664 <p class="wpsp-admin-field-description">
665 <?php esc_html_e( 'Color for the form description', 'stripe' ); ?>
666 </p>
667 </div>
668 </div>
669 </div>
670 </div>
671
672 <!-- Typography Tab -->
673 <div class="wpsp-admin-tab-panel" data-tab-content="typography">
674 <!-- Label Typography Section -->
675 <div class="wpsp-admin-color-section">
676 <h3 class="wpsp-admin-section-title">
677 <span class="dashicons dashicons-editor-textcolor"></span>
678 <?php esc_html_e( 'Label Typography', 'stripe' ); ?>
679 </h3>
680 <div class="wpsp-admin-form-grid">
681 <!-- Label Font Size -->
682 <div class="wpsp-admin-form-field">
683 <label for="wpsps_label_font_size">
684 <?php esc_html_e( 'Label Font Size', 'stripe' ); ?>
685 </label>
686 <div class="wpsp-admin-input-with-unit">
687 <input
688 type="number"
689 id="wpsps_label_font_size"
690 name="wpsps[label_font_size]"
691 value="<?php echo esc_attr( Settings::get_setting( $post_id, 'label_font_size' ) ); ?>"
692 placeholder="<?php esc_attr_e( 'Theme default', 'stripe' ); ?>"
693 step="1"
694 />
695 <span class="wpsp-admin-unit">px</span>
696 </div>
697 <p class="wpsp-admin-field-description">
698 <?php esc_html_e( 'Size of form field labels', 'stripe' ); ?>
699 </p>
700 </div>
701
702 <!-- Label Font Weight -->
703 <div class="wpsp-admin-form-field">
704 <label for="wpsps_label_font_weight">
705 <?php esc_html_e( 'Label Font Weight', 'stripe' ); ?>
706 </label>
707 <select id="wpsps_label_font_weight" name="wpsps[label_font_weight]" class="wpsp-admin-select">
708 <?php
709 $current_weight = Settings::get_setting( $post_id, 'label_font_weight' );
710 $weight_options = array(
711 '' => __( 'Theme Default', 'stripe' ),
712 'normal' => __( 'Normal', 'stripe' ),
713 'bold' => __( 'Bold', 'stripe' ),
714 '100' => '100 (Thin)',
715 '200' => '200 (Extra Light)',
716 '300' => '300 (Light)',
717 '400' => '400 (Normal)',
718 '500' => '500 (Medium)',
719 '600' => '600 (Semi Bold)',
720 '700' => '700 (Bold)',
721 '800' => '800 (Extra Bold)',
722 '900' => '900 (Black)',
723 );
724
725 foreach ( $weight_options as $value => $label ) {
726 printf(
727 '<option value="%s" %s>%s</option>',
728 esc_attr( (string) $value ),
729 selected( $current_weight, $value, false ),
730 esc_html( $label )
731 );
732 }
733 ?>
734 </select>
735 <p class="wpsp-admin-field-description">
736 <?php esc_html_e( 'Font weight for form labels', 'stripe' ); ?>
737 </p>
738 </div>
739 </div>
740 </div>
741
742 <!-- Input Typography Section -->
743 <div class="wpsp-admin-color-section">
744 <h3 class="wpsp-admin-section-title">
745 <span class="dashicons dashicons-edit"></span>
746 <?php esc_html_e( 'Input Typography', 'stripe' ); ?>
747 </h3>
748 <div class="wpsp-admin-form-grid">
749 <!-- Input Font Size -->
750 <div class="wpsp-admin-form-field">
751 <label for="wpsps_input_font_size">
752 <?php esc_html_e( 'Input Font Size', 'stripe' ); ?>
753 </label>
754 <div class="wpsp-admin-input-with-unit">
755 <input
756 type="number"
757 id="wpsps_input_font_size"
758 name="wpsps[input_font_size]"
759 value="<?php echo esc_attr( Settings::get_setting( $post_id, 'input_font_size' ) ); ?>"
760 placeholder="<?php esc_attr_e( 'Theme default', 'stripe' ); ?>"
761 step="1"
762 />
763 <span class="wpsp-admin-unit">px</span>
764 </div>
765 <p class="wpsp-admin-field-description">
766 <?php esc_html_e( 'Size of text in form inputs', 'stripe' ); ?>
767 </p>
768 </div>
769 </div>
770 </div>
771
772 <!-- Form Title & Description Typography Section -->
773 <div class="wpsp-admin-color-section">
774 <h3 class="wpsp-admin-section-title">
775 <span class="dashicons dashicons-text"></span>
776 <?php esc_html_e( 'Form Title & Description Typography', 'stripe' ); ?>
777 </h3>
778 <div class="wpsp-admin-form-grid">
779 <!-- Title Font Size -->
780 <div class="wpsp-admin-form-field">
781 <label for="wpsps_title_font_size">
782 <?php esc_html_e( 'Title Font Size', 'stripe' ); ?>
783 </label>
784 <div class="wpsp-admin-input-with-unit">
785 <input
786 type="number"
787 id="wpsps_title_font_size"
788 name="wpsps[title_font_size]"
789 value="<?php echo esc_attr( Settings::get_setting( $post_id, 'title_font_size' ) ); ?>"
790 placeholder="<?php esc_attr_e( 'Theme default', 'stripe' ); ?>"
791 step="1"
792 />
793 <span class="wpsp-admin-unit">px</span>
794 </div>
795 <p class="wpsp-admin-field-description">
796 <?php esc_html_e( 'Font size for the form title', 'stripe' ); ?>
797 </p>
798 </div>
799
800 <!-- Title Font Weight -->
801 <div class="wpsp-admin-form-field">
802 <label for="wpsps_title_font_weight">
803 <?php esc_html_e( 'Title Font Weight', 'stripe' ); ?>
804 </label>
805 <select id="wpsps_title_font_weight" name="wpsps[title_font_weight]" class="wpsp-admin-select">
806 <?php
807 $current_weight = Settings::get_setting( $post_id, 'title_font_weight' );
808 $weight_options = array(
809 '' => __( 'Theme Default', 'stripe' ),
810 'normal' => __( 'Normal', 'stripe' ),
811 'bold' => __( 'Bold', 'stripe' ),
812 '100' => '100 (Thin)',
813 '200' => '200 (Extra Light)',
814 '300' => '300 (Light)',
815 '400' => '400 (Normal)',
816 '500' => '500 (Medium)',
817 '600' => '600 (Semi Bold)',
818 '700' => '700 (Bold)',
819 '800' => '800 (Extra Bold)',
820 '900' => '900 (Black)',
821 );
822
823 foreach ( $weight_options as $value => $label ) {
824 printf(
825 '<option value="%s" %s>%s</option>',
826 esc_attr( (string) $value ),
827 selected( $current_weight, $value, false ),
828 esc_html( $label )
829 );
830 }
831 ?>
832 </select>
833 <p class="wpsp-admin-field-description">
834 <?php esc_html_e( 'Font weight for the form title', 'stripe' ); ?>
835 </p>
836 </div>
837
838 <!-- Description Font Size -->
839 <div class="wpsp-admin-form-field">
840 <label for="wpsps_description_font_size">
841 <?php esc_html_e( 'Description Font Size', 'stripe' ); ?>
842 </label>
843 <div class="wpsp-admin-input-with-unit">
844 <input
845 type="number"
846 id="wpsps_description_font_size"
847 name="wpsps[description_font_size]"
848 value="<?php echo esc_attr( Settings::get_setting( $post_id, 'description_font_size' ) ); ?>"
849 placeholder="<?php esc_attr_e( 'Theme default', 'stripe' ); ?>"
850 step="1"
851 />
852 <span class="wpsp-admin-unit">px</span>
853 </div>
854 <p class="wpsp-admin-field-description">
855 <?php esc_html_e( 'Font size for the form description', 'stripe' ); ?>
856 </p>
857 </div>
858
859 <!-- Description Font Weight -->
860 <div class="wpsp-admin-form-field">
861 <label for="wpsps_description_font_weight">
862 <?php esc_html_e( 'Description Font Weight', 'stripe' ); ?>
863 </label>
864 <select id="wpsps_description_font_weight" name="wpsps[description_font_weight]" class="wpsp-admin-select">
865 <?php
866 $current_weight = Settings::get_setting( $post_id, 'description_font_weight' );
867 $weight_options = array(
868 '' => __( 'Theme Default', 'stripe' ),
869 'normal' => __( 'Normal', 'stripe' ),
870 'bold' => __( 'Bold', 'stripe' ),
871 '100' => '100 (Thin)',
872 '200' => '200 (Extra Light)',
873 '300' => '300 (Light)',
874 '400' => '400 (Normal)',
875 '500' => '500 (Medium)',
876 '600' => '600 (Semi Bold)',
877 '700' => '700 (Bold)',
878 '800' => '800 (Extra Bold)',
879 '900' => '900 (Black)',
880 );
881
882 foreach ( $weight_options as $value => $label ) {
883 printf(
884 '<option value="%s" %s>%s</option>',
885 esc_attr( (string) $value ),
886 selected( $current_weight, $value, false ),
887 esc_html( $label )
888 );
889 }
890 ?>
891 </select>
892 <p class="wpsp-admin-field-description">
893 <?php esc_html_e( 'Font weight for the form description', 'stripe' ); ?>
894 </p>
895 </div>
896 </div>
897 </div>
898 </div>
899
900 <!-- Design & Layout Tab -->
901 <div class="wpsp-admin-tab-panel" data-tab-content="design">
902 <!-- Layout Section -->
903 <div class="wpsp-admin-color-section">
904 <h3 class="wpsp-admin-section-title">
905 <span class="dashicons dashicons-layout"></span>
906 <?php esc_html_e( 'Layout Settings', 'stripe' ); ?>
907 </h3>
908 <div class="wpsp-admin-form-grid">
909 <!-- Form Border Radius -->
910 <div class="wpsp-admin-form-field">
911 <label for="wpsps_form_border_radius">
912 <?php esc_html_e( 'Form Border Radius', 'stripe' ); ?>
913 </label>
914 <div class="wpsp-admin-input-with-unit">
915 <input
916 type="number"
917 id="wpsps_form_border_radius"
918 name="wpsps[form_border_radius]"
919 value="<?php echo esc_attr( Settings::get_setting( $post_id, 'form_border_radius', '0' ) ); ?>"
920 step="1"
921 min="0"
922 />
923 <span class="wpsp-admin-unit">px</span>
924 </div>
925 <div class="wpsp-admin-radius-preview">
926 <div class="wpsp-admin-form-radius-box" style="border-radius: <?php echo esc_attr( Settings::get_setting( $post_id, 'form_border_radius', '0' ) ); ?>px;"></div>
927 </div>
928 <p class="wpsp-admin-field-description">
929 <?php esc_html_e( 'Rounded corners for the form container', 'stripe' ); ?>
930 </p>
931 </div>
932
933 <!-- Border Radius -->
934 <div class="wpsp-admin-form-field">
935 <label for="wpsps_border_radius">
936 <?php esc_html_e( 'Input & Button Border Radius', 'stripe' ); ?>
937 </label>
938 <div class="wpsp-admin-input-with-unit">
939 <input
940 type="number"
941 id="wpsps_border_radius"
942 name="wpsps[border_radius]"
943 value="<?php echo esc_attr( $is_new_form ? '3' : Settings::get_setting( $post_id, 'border_radius', '0' ) ); ?>"
944 step="1"
945 />
946 <span class="wpsp-admin-unit">px</span>
947 </div>
948 <div class="wpsp-admin-radius-preview wpsp-admin-radius-preview--inline">
949 <div class="wpsp-admin-radius-input-preview" style="border-radius: <?php echo esc_attr( $is_new_form ? '3' : Settings::get_setting( $post_id, 'border_radius', '0' ) ); ?>px;"><span><?php esc_html_e( 'Email address', 'stripe' ); ?></span></div>
950 <div class="wpsp-admin-radius-button-preview" style="border-radius: <?php echo esc_attr( $is_new_form ? '3' : Settings::get_setting( $post_id, 'border_radius', '0' ) ); ?>px;"><?php esc_html_e( 'Pay', 'stripe' ); ?></div>
951 </div>
952 <p class="wpsp-admin-field-description">
953 <?php esc_html_e( 'Rounded corners for inputs and buttons', 'stripe' ); ?>
954 </p>
955 </div>
956
957 <!-- Form Padding -->
958 <div class="wpsp-admin-form-field">
959 <label for="wpsps_form_padding">
960 <?php esc_html_e( 'Form Padding', 'stripe' ); ?>
961 </label>
962 <div class="wpsp-admin-input-with-unit">
963 <input
964 type="number"
965 id="wpsps_form_padding"
966 name="wpsps[form_padding]"
967 value="<?php echo esc_attr( Settings::get_setting( $post_id, 'form_padding', '' ) ); ?>"
968 step="1"
969 min="0"
970 />
971 <span class="wpsp-admin-unit">px</span>
972 </div>
973 <p class="wpsp-admin-field-description">
974 <?php esc_html_e( 'Padding around the form container', 'stripe' ); ?>
975 </p>
976 </div>
977 </div>
978 </div>
979
980 <!-- Button Styling Section -->
981 <div class="wpsp-admin-color-section">
982 <h3 class="wpsp-admin-section-title">
983 <span class="dashicons dashicons-button"></span>
984 <?php esc_html_e( 'Button Styling', 'stripe' ); ?>
985 </h3>
986 <div class="wpsp-admin-form-grid">
987 <!-- Button Background Color -->
988 <div class="wpsp-admin-form-field">
989 <label for="wpsps_button_background_color">
990 <?php esc_html_e( 'Button Background', 'stripe' ); ?>
991 </label>
992 <div class="wpsp-admin-color-preview-wrap">
993 <input
994 type="text"
995 id="wpsps_button_background_color"
996 name="wpsps[button_background_color]"
997 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'button_background_color' ) ); ?>"
998 class="wpspcolor-picker"
999 />
1000 <div class="wpsp-admin-button-preview" style="background-color: <?php echo esc_attr( Settings::get_setting( $post_id, 'button_background_color', '#0f8569' ) ); ?>; color: <?php echo esc_attr( Settings::get_setting( $post_id, 'button_text_color', '#ffffff' ) ); ?>">
1001 <?php esc_html_e( 'Button Preview', 'stripe' ); ?>
1002 </div>
1003 </div>
1004 <p class="wpsp-admin-field-description">
1005 <?php esc_html_e( 'Background color for form buttons', 'stripe' ); ?>
1006 </p>
1007 </div>
1008
1009 <!-- Button Text Color -->
1010 <div class="wpsp-admin-form-field">
1011 <label for="wpsps_button_text_color">
1012 <?php esc_html_e( 'Button Text Color', 'stripe' ); ?>
1013 </label>
1014 <div class="wpsp-admin-color-preview-wrap">
1015 <input
1016 type="text"
1017 id="wpsps_button_text_color"
1018 name="wpsps[button_text_color]"
1019 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'button_text_color' ) ); ?>"
1020 class="wpspcolor-picker"
1021 />
1022 <div class="wpsp-admin-color-preview-label"><?php esc_html_e( 'Text', 'stripe' ); ?></div>
1023 </div>
1024 <p class="wpsp-admin-field-description">
1025 <?php esc_html_e( 'Text color for form buttons', 'stripe' ); ?>
1026 </p>
1027 </div>
1028
1029 <!-- Button Hover Background Color -->
1030 <div class="wpsp-admin-form-field">
1031 <label for="wpsps_button_hover_background_color">
1032 <?php esc_html_e( 'Button Hover Color', 'stripe' ); ?>
1033 </label>
1034 <div class="wpsp-admin-color-preview-wrap">
1035 <input
1036 type="text"
1037 id="wpsps_button_hover_background_color"
1038 name="wpsps[button_hover_background_color]"
1039 value="<?php echo esc_attr( Settings::get_raw_setting( $post_id, 'button_hover_background_color' ) ); ?>"
1040 class="wpspcolor-picker"
1041 />
1042 <div class="wpsp-admin-button-preview wpsp-admin-button-hover" style="background-color: <?php echo esc_attr( Settings::get_setting( $post_id, 'button_hover_background_color', '#0e7c62' ) ); ?>; color: <?php echo esc_attr( Settings::get_setting( $post_id, 'button_text_color', '#ffffff' ) ); ?>">
1043 <?php esc_html_e( 'Hover Preview', 'stripe' ); ?>
1044 </div>
1045 </div>
1046 <p class="wpsp-admin-field-description">
1047 <?php esc_html_e( 'Background color when hovering over buttons', 'stripe' ); ?>
1048 </p>
1049 </div>
1050 </div>
1051 </div>
1052 </div>
1053 </div>
1054
1055 <!-- Reset Button and Action Area. -->
1056 <div class="wpsp-admin-actions">
1057 <button type="button" id="wpsp-admin-reset-styles" class="button button-secondary">
1058 <span class="dashicons dashicons-image-rotate"></span>
1059 <?php esc_html_e( 'Reset Styles', 'stripe' ); ?>
1060 </button>
1061 <p class="wpsp-admin-reset-description">
1062 <?php esc_html_e( 'Resets all style settings to default. This action cannot be undone.', 'stripe' ); ?>
1063 </p>
1064 </div>
1065 </div>
1066 <?php
1067 }
1068
1069
1070 /**
1071 * Saves the style settings data when the post is saved.
1072 *
1073 * Handles validation and saving of style settings
1074 * when a WP Simple Pay form is saved.
1075 *
1076 * @since 4.17.0
1077 *
1078 * @param int $post_id The post ID.
1079 * @param \WP_Post $post The post object.
1080 * @return void
1081 */
1082 public function save_style_settings( $post_id, $post ) {
1083 // Check if our nonce is set.
1084 if ( ! isset( $_POST['wpsps_styles_nonce'] ) ) {
1085 return;
1086 }
1087
1088 // Verify that the nonce is valid.
1089 if ( ! wp_verify_nonce( $_POST['wpsps_styles_nonce'], 'wpsps_save_styles' ) ) {
1090 return;
1091 }
1092
1093 // If this is an autosave, our form has not been submitted, so we don't want to do anything.
1094 if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
1095 return;
1096 }
1097
1098 // Check the user's permissions.
1099 if ( ! current_user_can( 'edit_post', $post_id ) ) {
1100 return;
1101 }
1102
1103 // Check if the post type is correct.
1104 if ( 'simple-pay' !== $post->post_type ) {
1105 return;
1106 }
1107
1108 // Check if reset action was triggered.
1109 $is_reset = isset( $_POST['wpsps_reset'] ) && 'true' === $_POST['wpsps_reset'];
1110
1111 if ( $is_reset ) {
1112 // Delete all style settings if reset was requested.
1113 $style_keys = Settings::get_style_keys();
1114 foreach ( $style_keys as $key ) {
1115 Settings::delete_setting( $post_id, $key );
1116 }
1117 return;
1118 }
1119
1120 $settings_data = isset( $_POST['wpsps'] ) && is_array( $_POST['wpsps'] ) ? $_POST['wpsps'] : array();
1121 $style_keys = Settings::get_style_keys();
1122
1123 foreach ( $style_keys as $key ) {
1124 // Check if the setting is in the POST data (even if empty).
1125 if ( array_key_exists( $key, $settings_data ) ) {
1126 $raw_value = $settings_data[ $key ];
1127
1128 // Save the setting (even if empty, to clear it).
1129 // Always save, even if the value is empty, to allow clearing settings.
1130 $result = Settings::save_setting( $post_id, $key, $raw_value );
1131
1132 } else {
1133 // Only delete setting if it's not in POST at all (not just empty).
1134 // This allows users to clear values by submitting empty strings.
1135 // Don't delete here - let existing values persist if not in POST.
1136 }
1137 }
1138 }
1139
1140 /**
1141 * Renders the upsell content for form styles when license is insufficient.
1142 *
1143 * Shows an upgrade notice for users who don't have Plus license or higher.
1144 *
1145 * @since 4.17.0
1146 *
1147 * @return void
1148 */
1149 private function render_style_upsell() {
1150 ?>
1151 <div class="simpay-settings-upgrade">
1152 <div class="simpay-settings-upgrade__inner">
1153 <span class="dashicons dashicons-admin-appearance" style="font-size: 40px; width: 40px; height: 50px;"></span>
1154 <h3>
1155 <?php esc_html_e( 'Unlock Payment Form Styles', 'stripe' ); ?>
1156 </h3>
1157 <p>
1158 <?php
1159 echo wp_kses(
1160 __( 'We\'re sorry, payment form styling is not available with your current license. Please upgrade to <strong>WP Simple Pay Pro</strong> or higher to unlock this and other awesome features.', 'stripe' ),
1161 array( 'strong' => array() )
1162 );
1163 ?>
1164 </p>
1165
1166 <ul>
1167 <li>
1168 <div class="dashicons dashicons-yes"></div>
1169 <?php esc_html_e( 'Professional Color Themes', 'stripe' ); ?>
1170 </li>
1171 <li>
1172 <div class="dashicons dashicons-yes"></div>
1173 <?php esc_html_e( 'Custom Colors & Typography', 'stripe' ); ?>
1174 </li>
1175 <li>
1176 <div class="dashicons dashicons-yes"></div>
1177 <?php esc_html_e( 'Button & Layout Customization', 'stripe' ); ?>
1178 </li>
1179 <li>
1180 <div class="dashicons dashicons-yes"></div>
1181 <?php esc_html_e( 'Match Your Brand Perfectly', 'stripe' ); ?>
1182 </li>
1183 </ul>
1184
1185 <p>
1186 <a href="<?php echo esc_url( simpay_pro_upgrade_url( 'form-style-settings', 'Form Styles' ) ); ?>" class="button button-primary button-large" target="_blank" rel="noopener noreferrer">
1187 <?php esc_html_e( 'Upgrade to WP Simple Pay Pro', 'stripe' ); ?>
1188 </a>
1189 </p>
1190
1191 <p class="description">
1192 <?php
1193 echo wp_kses(
1194 sprintf(
1195 /* translators: %1$s Opening anchor tag, do not translate. %2$s Closing anchor tag, do not translate. */
1196 __(
1197 'Already purchased? %1$sRetrieve your license key%2$s and enter it in the plugin settings.',
1198 'stripe'
1199 ),
1200 sprintf(
1201 '<a href="%s" target="_blank" rel="noopener noreferrer">',
1202 esc_url( 'https://wpsimplepay.com/my-account/licenses/' )
1203 ),
1204 '</a>'
1205 ),
1206 array(
1207 'a' => array(
1208 'href' => true,
1209 'target' => true,
1210 'rel' => true,
1211 ),
1212 )
1213 );
1214 ?>
1215 </p>
1216 </div>
1217 </div>
1218 <?php
1219 }
1220
1221 }
1222