README

This module implements the "Develop in Paradise" custom payment method for the Hyva Developer Paradise CSP workshop. It collects developer information during checkout and demonstrates Hyva Checkout integration patterns — including intentional CSP violations for students to discover and fix.

Module Name

HyvaParadise_Checkout

Installation

Install via the metapackage:

composer require friends-of-hyva/magento2-paradise-csp-workshop-meta

Or install directly:

composer require friends-of-hyva/magento2-paradise-csp-workshop-checkout
bin/magento setup:upgrade --keep-generated

If the package isn't on Packagist yet

If composer require can't find the package, add the GitHub repository manually to your project's composer.json.

{
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/friends-of-hyva/magento2-paradise-csp-workshop-checkout"
        }
    ]
}

Then run:

composer require friends-of-hyva/magento2-paradise-csp-workshop-checkout
bin/magento setup:upgrade --keep-generated

What This Module Does

During checkout, students encounter the "Develop in Paradise" payment method. Selecting it reveals a form asking for:

• Their developer name
• Their favourite song
• Whether they're ready for their CSP journey

This data is stored on the quote and order, and displayed in the admin order view. The checkout form template contains intentional CSP violations — part of the workshop teaching exercise.

Features

1. Custom Payment Method

• Offline payment method with code paradise_developer
• Title: "Develop in Paradise"
• Configurable via Admin > Stores > Configuration > Sales > Payment Methods

2. Magewire Checkout Form

• Real-time field validation via Magewire component
• Developer name: required, max 100 characters
• Favourite song: optional, max 150 characters
• CSP journey consent: checkbox
• Validation errors surfaced via Hyva Checkout messenger

3. Data Persistence

• Fields stored as custom columns on quote and sales_order
• Exposed via extension attributes on CartInterface and OrderInterface
• Quote columns synced to order on placement via event observer

4. Admin Order Display

• Collected developer info shown in the order view under "Additional Information"
• Only rendered for orders placed with the paradise_developer payment method

Data Collected

Directory Structure

magento2-paradise-checkout/
├── Block/
│   └── Adminhtml/Order/View/
│       └── ParadiseDeveloperInfo.php       # Block for admin order template
├── Magewire/
│   └── Components/Checkout/PaymentMethods/
│       └── ParadiseDeveloper.php           # Magewire checkout component
├── Model/
│   ├── PaymentMethod.php                   # Offline payment method definition
│   └── PlaceOrderService.php              # Place order service
├── Observer/
│   └── QuoteSubmitBeforeObserver.php       # Copies data from quote → order
├── Plugin/
│   ├── Magento/Quote/Api/
│   │   └── CartRepository.php             # Syncs quote columns ↔ extension attributes
│   └── Magento/Sales/Api/
│       └── OrderRepository.php            # Syncs order columns ↔ extension attributes
├── Setup/
│   └── Patch/Data/
│       └── AddParadiseOrderAttributes.php # Data patch stub
├── etc/
│   ├── adminhtml/
│   │   └── system.xml                     # Admin payment method config
│   ├── config.xml                         # Default payment method settings
│   ├── db_schema.xml                      # Custom columns on quote and sales_order
│   ├── di.xml                             # DI wiring
│   ├── events.xml                         # Observer registration
│   └── extension_attributes.xml          # Extension attributes for Quote and Order
├── view/
│   ├── adminhtml/
│   │   ├── layout/
│   │   │   └── sales_order_view.xml       # Injects info block into order view
│   │   └── templates/order/view/
│   │       └── paradise-developer-info.phtml  # Admin order display
│   └── frontend/
│       ├── layout/
│       │   └── hyva_checkout_components.xml   # Wires component into Hyva Checkout
│       └── templates/checkout/
│           └── paradise-developer-info.phtml  # Checkout form (intentional CSP violations)
├── composer.json
├── registration.php
├── COPYING.txt
├── LICENSE.txt
└── SECURITY.md

Technical Details

Payment Method

Defined in Model/PaymentMethod.php as an offline method (no capture, no authorization). Default configuration in etc/config.xml:

• Active by default
• Sort order: 999
• New order status: pending

Magewire Component

Magewire/Components/Checkout/PaymentMethods/ParadiseDeveloper.php manages the checkout form:

• Live validation on every field update
• Persists data directly to quote extension attributes on each change
• Emits validation errors to the Hyva Checkout messenger

Data Flow

Checkout form (Magewire)
  → quote extension attributes
  → CartRepository plugin → quote columns (paradise_developer_*)
  → QuoteSubmitBeforeObserver → order columns (paradise_developer_*)
  → OrderRepository plugin → order extension attributes
  → Admin order view template

Database Schema

Custom columns added by etc/db_schema.xml (declarative schema):

Extension Attributes

Defined on both CartInterface and OrderInterface in etc/extension_attributes.xml:

• paradise_developer_name (string)
• paradise_developer_song (string)
• paradise_developer_ready (boolean)

Intentional CSP Violations

The frontend checkout template (view/frontend/templates/checkout/paradise-developer-info.phtml) contains intentional CSP violations as part of the workshop teaching exercise:

• Inline JavaScript without $hyvaCsp->registerInlineScript()
• Alpine inline expressions that are not CSP-safe
• Event handler patterns that need to be extracted to methods

Students are expected to identify and fix these violations using the patterns learned in the Frontend module and the hyva-csp-helper.php migration tool.

Dependencies

• Magento Framework 102.0+ or 103.0+
• Hyva Checkout 1.1.0+
• Module dependencies: Magento_Payment, Magento_Sales, Magento_Quote, Hyva_Checkout

License

Open Software License ("OSL") v. 3.0

Support

• Hyva Documentation: https://docs.hyva.io/
• Paradise Event: https://www.hyvadevparadise.com/
• Community: Hyva Slack & Discord