Modern welcome screen

Welcome to your polished test checkout experience

Use this landing page as the front door to the full demo flow. It connects the password page, the premium checkout screen, and the shared dark and light theme into one clean experience.

Animated live card UI Visa / MasterCard / Amex detection Optional address, city, state, ZIP, phone

Open Test Page View Checkout

Password gate Login with the demo password before submitting the test form.

Live preview See the card brand, holder, and expiry update in real time.

Masked storage Only masked test card details are written to the text file.

Visa

4242 4242 4242 4242

Cardholder TEST USER

Expires 12/30

TEST MODE ONLY

Clean landing page, premium login, responsive checkout, optional billing fields plus phone, and shared styling across all files.

What this package includes

Separate index.php, login.php, checkout.php, and style.css
Dark and light premium theme toggle on every page
Brand detection for Visa, MasterCard, and Amex
Optional billing address, city, state, ZIP / postal code, and phone number fields

Quick flow

1Open the test page from the sidebar or hero button.

2Enter the demo password to unlock checkout.

3Submit approved fake card data only.

Demo data map

Optional billing and contact details are ready and correctly tagged

The checkout page now includes properly named and labeled optional fields for billing address, city, state, ZIP / postal code, and phone number, with matching ids, name attributes, autocomplete values, validation messages, and safe save handling.

Billing Address id="billing_address" name="billing_address"

City id="city" name="city"

State id="state" name="state"

ZIP / Postal Code id="postal_code" name="postal_code"

Phone Number id="phone_number" name="phone_number"