<!------ Plugin Overview —---!>

The “Cash App Pay 360 Payment Gateway” plugin is a lightweight, user-friendly plugin that creates a custom payment method for Woocommerce, which enables a woocommerce store to accept Cash App Payments and offers helpful features such as automated payment settlement, simple and fast UX, and end-to-end order routing.
<!------ Plugin Activation—---!>

Once installed and activated, the plugin will create a “Cash App Pay” payment method in the Woocommerce Payment Method Settings (which is disabled by default), create custom order fields to be used for storing data for the plugins functionality as described below, and install any required libraries via Composer or curl, depending on the websites environment.

<!------ General Information —---!>

The Plugin Settings can be accessed from the Payment Methods page or a “Settings” link found on in the action links section of the plugin listing in the Wordpress Plugins page in the WP Admin.

The Cash App 360 Payment Gateway Settings Page will featuring the following elements:

## Page Title: “Cash App Pay 360 Payment Gateway”

• Message: “Easily accept payments via Cash App on your Woocommerce store with the Cash App 360 Payment Gateway by Alt Pay Solutions. Once enabled, your customers can choose to Pay via Cash App at checkout, and when selected, they will be presented a dynamic QR code with the order amount embedded along with your Cash App handle and instructions to include their order ID in the Notes section of their Cash App payment. Once a Cash App payment is sent by the customer, our Smart Cash API will automatically verify and settle the payment. Configure the plugin settings below to get started and enable the Cash App 360 Payment method from the Woocommerce Payment Methods settings to get started!”

• Link List Formatted in Horizontal List Format

  • Tutorials & Guides  (https://altpay360.com/docs/cashapp-pay/wp/quickstart)

  • Smart Cash API (https://altpay360.com/smart-cash-api)

  • Shortcode Variables (https://altpay360.com/docs/cashapp-pay/wp/shortcodes)

  • Alt Pay 360 Payment Suite (https://altpay360.com/payment-suite)
    
    

### Heading: General Settings

1. Payment Method Title

• Text Input

• Default Value: “Pay with Cash App”

• Required

2. Payment Method Description (text area input)

• Text Area Input

• Default Value: “Easy, quick, and secure payments via Cash App. Proceed to the next page to find our $cashtag and QR code.”

• Required

3. Cash App Tag (text input)

• Text Area Input

• Placeholder: “$yourhandle”

• Required

• Validation: Requires “$” at the beginning of the input

### Heading: Payment Page Settings

1. Payment Page Title

• Text Input

• Default Value “Complete Your Order”

2. Payment Page Message

• WYSIWYG Input

• Default Value: “Thank you for your purchase! Once you complete your payment our system will automatically verify your payment so it can be shipped out as soon as possible!”

3. Enable Cash App Web Receipt Collection

• Checkbox Input

• Default Value: False

• Description: When enabled, a form to collect the Cash App Web Receipt from the customer for additional payment verification will be shown below the Payment Form.

4. Web Receipt Form Instructions

• WYSIWYG Input

• Default Value: “Once you have completed your payment, please copy and paste the Cash App Web Receipt URL below. Your Cash App Web Receipt can be found by clicking on the “Web Receipt” button found at the bottom of the payment page.”

• Conditional Field that only shows if Enable Cash App Web Receipts is enabled.

### Heading: Automated Payment Settlements

1. Enable Automatic Payment Settlement via Smart Cash API

• Checkbox Input

• Default Value: False

2. Cash App Email Address

• Email Input

• Placeholder:youremail@gmail.com

• Description: “This must be the same email address used to receive email notifications from Cash App”

• Conditional Settings: Displays if “Enable Automatic Payment Settlement” is True

3. Payment Settlement Email Alias

• Non-Editable Email Input

• Value: [store_handle]+verify@altpayapp.com (“store_handle” variable equals the domain name of the website hostname)

4. Payment Settlement Status

• Uneditable Text Input

• Default Value: “Inactive”

• Description: Set up automated Cash App Payment Validation for your Cash App Orders with our Smart Cash API:https://cashapp.altpay360.com/register”

5. Payment Validation Webhook

• Non-Editable URL Input

• Hidden

• Value: [website_url]/wp-content/plugins/cashapp-pay]/webhooks/verify (website_url variable equals the full URL of the website and cash_app_pay equals the plugins folder name)

### Heading: Payment Page Appearance

1 . Payment Page Style

• Select Input (Options: Standard, Minimal, Bold, Cash App)

• Default Option: Standard

• Include a description area below that can be filled in with content later. 

2. Primary Color

• Color Input

• Default: #000080

3. Secondary Color

• Color Input

• Default: #111111

3. Form Box Color

• Select Input (Options: White, Charcoal, Black)

• Default Option: White

<!------ Plugin Frontend Functionality —---!>

When the plugin is enabled, the app should function by showing the custom payment option on the woo commerce checkout page along with the title and description input in the admin. When a customer selects this payment method, the Woocommerce Checkout “Place Order” button will be replaced with a “Proceed to Payment” button. 

When the “Proceed to Payment” button is clicked, the following events will happen:

1. The order total value will be extracted and passed as a URL variable parameter with the key “order_total”

2. An order will be created with a custom order status of “Pending Payment”

3. the user will be directed to a dynamic woocommerce thank you page endpoint (referred to as the “Cash App Payment Page”) with the following URL format: “[woo-thank-you-page-url]/cashapp-pay/[order_id]?total=[order_total]“ where [woo-thank-you-page-url] is the standard thank you page URL of the website, [order_id] is the woo commerce order ID, and [order_total] is the order_total variable extracted from the checkout page

The Cash App Payment Page will override Woocommerce’s thank you page template and display feature the following items (depending on the Payment Page Style selected above, a dynamic stylesheet should be used to style the page):

1. Payment Page Logo input from Admin Settings

2. Payment Form Container wit the following items:

   1. Payment Page Title Input from Admin Settings as an <h1> heading

   2. <div class=“pay-row”><span class=“recipient”>Send: <b>$[order_total]</b> to <u>[cashapp_tag]</u></div>

   3. Unique QR code generated using the “php-qrcode” library links to:https://cash.app/[cashapp_tag]/[order_total]

   4. Payment Page Message input from Admin Settings

3. Container with the following items:

   1. “Next Steps” as <h2> Heading

   2. <p>Once you have completed your payment, copy the “Web Receipt” URL from Cash App by Clicking the “Web Receipt” button at the bottom of the payment page in Cash App (<a id=“wr-example”>see example</a>), and paste it into the input below:</p> (the wr-example link will open a popup with an image)

   3. URL Input Box

      1. Label: “Cash App Web Receipt”

      2. Placeholder:https://cash.app/payments/######/receipt

   4. “Submit Web Receipt” Button

When the “Submit Web Receipt” Button is clicked, the following events will happen:

1. The status of the Order will be changed to “Verifying Payment”

2. The input from the “Cash App Web Receipt” field will be submitted and stored as a custom field for the order using the key “cash_app_web_receipt”

3. The user will be redirected to the standard Woocommerce Thank You Page

<!------ Plugin Webhooks —---!>

The plugin will have two webhook endpoints: the Payment Confirmation Webhook and the Automated settlement Status Webhook, both of which triggered via POST Request from an external API.

## Payment Confirmation Webhook Functionality

Once an order is payment receipt is submitted, the order will remain on hold, until a POST request with the order_id and payment amount is captured by the “Payment Validation Webhook” previously listed above, which will be sent from an external API that sends “order_id”, “conf_date”, “payment_amount” data values.

When a valid request is received, the webhook will automatically update the corresponding order ID defined in the POST request from “Verifying Payment” to “Processing”

## Automated settlement Status Webhook Functionality

The endpoint for this webhook will be [website_url]/wp-content/plugins/cashapp-pay]/webhooks/smart-cash and it will receive a simple post request that receives “Active” value for the key “Status” with the site URL via JSON POST Request from an external API. When this post request is received, the status of the Automated Settlement field in the plugin settings will change from “Inactive” to “Active”

<!------ Additional Information —---!>

The plugin should be lightweight, fastloading, and built with coding that is simple, modern, and futureproof in terms of compatibility.

Can you add the following stylesheets to the plugin:

1. base.css: Basic CSS Styling for the structure/responsiveness of the payment page

2. Standard.css: Modern, simple styling for the payment page built with Material UI CSS framework that’s enqueued by default or when the user has “Standard” selected for the payment page appearance

3. bold.css: Bold CSS Styling using the Tailwind CSS framework that’s enqueued when the user has the “Bold” option selected for the Payment Page Appearance

4. Minimal.css: MInimal CSS styling that uses the Material UI framework that’s enqueued the user has the “Minimal” option selected for the Payment Page Appearance.

5. cashapp.css Styling themed to match the branding of Cash App built using the Tailwind CSS framework that’s enqueued when the user has the “Cash App” option selected for the payment page appearance

All should have dynamic variables containing the “primary”, “secondary” “payment box appearance” values from the plugin settings. In addition, all style sheets should be highly optimized, well documented, and organized.