Marketing · Gutenberg
Payment Methods block for WordPress
Display accepted payment brand logos and security trust badges with built-in SVG icons.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display accepted payment brand logos and security trust badges with built-in SVG icons.
Inspector panels on this block: Payment Methods, Security Badges, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Badge Position” options: Below icons, Beside icons; “Layout — Alignment” options: Center, Left, Right.
Where to find it
Gutenberg inserter → Marketing → search “Payment Methods” (block name `blockenberg/payment-methods` in block.json). Style it in the sidebar after insert.
How to use Payment Methods block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Payment Methods”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Payment Methods. Set “Badge Label”, “Show Security Badges”, “Badge Position”, “Layout — Alignment”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Badge Label | Text field in the inspector. Saved as `securityBadges`. |
| Show Security Badges | On/off toggle in the inspector. On by default. Saved as `showSecurityBadges`. |
| Badge Position | Select control; the chosen value is saved on the block. Options: Below icons; Beside icons. block.json default: below. Saved as `badgePosition`. |
| Layout — Alignment | Select control; the chosen value is saved on the block. Options: Center; Left; Right. block.json default: center. Saved as `align`. |
| Show Brand Labels | On/off toggle in the inspector. Off by default. Saved as `showLabels`. |
| Icon Size (px) | Numeric range control in the inspector. Range 24–80. block.json default: 44. Saved as `iconSize`. |
| Icon Corner Radius | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `iconRadius`. |
| Gap Between Icons | Numeric range control in the inspector. Range 4–32. block.json default: 10. Saved as `iconGap`. |
| Max Width (0 = full) | Numeric range control in the inspector. Range 0–1200. block.json default: 0. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Icon Background Override | Color control in the inspector. Saved as `iconBg`. |
| Icon Border Color | Color control in the inspector. Saved as `iconBorder`. |
| Label Color | Color control in the inspector. Saved as `labelColor`. |
| Badge Text Color | Color control in the inspector. Saved as `badgeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Display accepted payment brand logos and security trust badges with built-in SVG icons — that is the job of Payment Methods, not a generic content block.
- Use it when you need the editor control labeled “Badge Label”, which exists on this block’s inspector.
- It matches pages about payment, checkout, trust.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Payment Methods block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Payment Methods”. It sits under Marketing. After insert, open Payment Methods and set “Badge Label”, “Show Security Badges”, “Badge Position”, “Layout — Alignment”.
What makes Payment Methods different from other Blockenberg blocks?
Display accepted payment brand logos and security trust badges with built-in SVG icons. Inspector labels on this block include “Badge Label”, “Show Security Badges”, “Badge Position”, “Layout — Alignment”.
Is the Payment Methods Gutenberg block free?
Yes. Payment Methods ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Payment Methods to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Payment Methods, Security Badges, Layout).
Related marketing blocks
Trust Bar
A horizontal row of trust, security, and compliance badges — SOC 2, GDPR, SSL, uptime SLAs, etc. Different from Social Proof Bar (user counts) and Logo Wall (brand logos).
Guarantee Section
Money-back / risk-reversal section with badge seal, heading, description, bullet-point guarantee terms, optional CTA, and full color controls.
Social Proof Bar
Combined trust bar with avatar stack, star rating, review count, and partner / 'as seen in' logo strip.
Social Proof Section
Complete social proof landing section combining client logos, stats, and a featured testimonial quote — all in one configurable block.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Payment Methods from the Gutenberg inserter.