### Local Server and ngrok Setup Source: https://docs.withflex.com/developer-guides/webhooks/using-redirects This snippet demonstrates how to start a local development server using npm and then expose it to the internet using ngrok. It includes the commands for starting the server and initiating ngrok, along with an example of how to configure ngrok URLs within a checkout session. ```bash # Start your local server npm start # or your preferred method # In another terminal, expose your local server ngrok http 3000 ``` ```json { "success_url": "https://abc123.ngrok.io/success?session_id={CHECKOUT_SESSION_ID}", "cancel_url": "https://abc123.ngrok.io/cancel" } ``` -------------------------------- ### Install Flex Shopify Payments App Source: https://docs.withflex.com/developer-guides/integration/shopify/installation Instructions for installing the Flex Shopify Payments App from the Shopify App Listing Page. This process leads to the configuration page for further setup. ```shell Navigate to the Flex Shopify Payments App Listing Page and select **Install**. ``` -------------------------------- ### Create a Price for a Product with Flex API Source: https://docs.withflex.com/developer-guides/integration/checkout/quick-start This code example shows how to create a price for an existing product using the Flex API. It requires the product ID and specifies the price details, including the unit amount. ```curl curl --request POST \ --url https://api.withflex.com/v1/prices \ --header 'authorization: Bearer fsk_test_YzNiYjdhNWItN2FkOS00ZTMyLWE5MmQtZTdhNzMzYzE2NTIy' \ --header 'content-type: application/json' \ --data '{"price": {"product": "fprod_01HW5MXAPBE79RHMMJJGB4ACAB","description": "Our awesome new price","unit_amount": 5099}}' ``` -------------------------------- ### WooCommerce Flex Plugin Installation Source: https://docs.withflex.com/developer-guides/integration/woocommerce/installation Instructions for downloading and installing the Flex payment gateway plugin for WooCommerce. This involves obtaining the zip file from the latest release and uploading it through the WordPress admin interface. ```HTML

Navigate to Plugins → Add Plugin which is located at `/wp-admin/plugin-install.php`.

Click on the “Upload Plugin” button.

Attach the zip file that was obtained in step 3.Click “Install Now” and follow the steps to install and activate the plugin.

``` ```PHP echo 'pay-with-flex.X.X.X.zip'; ``` -------------------------------- ### Create a Product with Flex API Source: https://docs.withflex.com/developer-guides/integration/checkout/quick-start This snippet demonstrates how to create a new product using the Flex API. It requires an API key for authentication and sends product details in JSON format. ```curl curl --request POST \ --url https://api.withflex.com/v1/products \ --header 'authorization: Bearer fsk_test_YzNiYjdhNWItN2FkOS00ZTMyLWE5MmQtZTdhNzMzYzE2NTIy' \ --header 'content-type: application/json' \ --data '{"product": {"name": "Test Product","description": "Test Product Description","visit_type": "gym","hsa_fsa_eligibility": "letter_of_medical_necessity"}}' ``` -------------------------------- ### Redirect to Checkout Session Source: https://docs.withflex.com/developer-guides/integration/checkout/quick-start This JSON snippet shows the response structure containing a `redirect_url` which should be used to send the user to the payment checkout page. ```JSON { "checkout_session": { "redirect_url": "https://checkout.withflex.com/pay/c/fcs_01HW5Q2A08N6A0YGZ6T1KARN8S", … } } ``` -------------------------------- ### Shipping and Setup Intent Data Structures Source: https://docs.withflex.com/api-reference/checkout-sessions/reauth-checkout-session Defines structures for handling shipping options and setup intents. Includes shipping rate IDs, amounts, address collection preferences, and details for setup intents. ```json { "setup_intent": "", "shipping_options": { "shipping_rate_id": "", "shipping_amount": 123 }, "shipping_address_collection": true, "shipping_details": { "shipping_address_id": "" } } ``` -------------------------------- ### Shipping and Setup Intent Data Structures Source: https://docs.withflex.com/api-reference/checkout-sessions/get-checkout-session Defines structures for handling shipping options and setup intents. Includes shipping rate IDs, amounts, address collection preferences, and details for setup intents. ```json { "setup_intent": "", "shipping_options": { "shipping_rate_id": "", "shipping_amount": 123 }, "shipping_address_collection": true, "shipping_details": { "shipping_address_id": "" } } ``` -------------------------------- ### Generate a Checkout Session with Flex API Source: https://docs.withflex.com/developer-guides/integration/checkout/quick-start This snippet illustrates how to generate a checkout session using the Flex API. It includes line items, success and cancel URLs, and the payment mode. ```curl curl --request POST \ --url https://api.withflex.com/v1/checkout/sessions \ --header 'authorization: Bearer fsk_test_YzNiYjdhNWItN2FkOS00ZTMyLWE5MmQtZTdhNzMzYzE2NTIy' \ --header 'content-type: application/json' \ --data '{ \ "checkout_session": { \ "line_items": [{"price": "fprice_01HW5NTAB88NK7HPD0H688EPG9","quantity": 1}], \ "success_url": "https://withflex.com/thank-you?success=true", \ "cancel_url": "https://withflex.com/thank-you?canceled=true", \ "mode": "payment" \ } \ }' ``` -------------------------------- ### Create Checkout Session - cURL Source: https://docs.withflex.com/developer-guides/integration/checkout/how-checkout-works This cURL command demonstrates how to create a checkout session for collecting HSA/FSA payments. It includes line items, success and cancel URLs, and specifies the payment mode. This is a common example used in quickstart guides. ```cURL curl --request \ POST \ --url \ https://api.withflex.com/v1/checkout/sessions \ --header 'authorization: Bearer fsk_test_YzNiYjdhNWItN2FkOS00ZTMyLWE5MmQtZTdhNzMzYzE2NTIy' \ \ --header 'content-type: application/json' \ \ --data '{"checkout_session": {"line_items": [{"price": "fprice_01HT5GKN33F6E31WE2RF1GYYKH","quantity": 1}],"success_url": "https://withflex.com","mode": "payment","cancel_url": "https://withflex.com/cancel",}}' \ ``` -------------------------------- ### Shipping and Setup Intent Data Structures Source: https://docs.withflex.com/api-reference/checkout-sessions/cancel-auth-checkout-session Defines structures for handling shipping options and setup intents. Includes shipping rate IDs, amounts, address collection preferences, and details for setup intents. ```json { "setup_intent": "", "shipping_options": { "shipping_rate_id": "", "shipping_amount": 123 }, "shipping_address_collection": true, "shipping_details": { "shipping_address_id": "" } } ``` -------------------------------- ### Setup Intent and Shipping Information Source: https://docs.withflex.com/api-reference/checkout-sessions/patch-v1checkoutsessions This snippet covers the structure for setup intents and shipping-related details. It includes shipping options with rates and amounts, address collection preferences, and detailed shipping address information. ```json { "setup_intent": "", "shipping_options": { "shipping_rate_id": "", "shipping_amount": 123 }, "shipping_address_collection": true, "shipping_details": { "shipping_address_id": "", "line1": "", "line2": "", "city": "", "state": "", "postal_code": "", "country": "" } } ``` -------------------------------- ### Create Checkout Session Request Body Example Source: https://docs.withflex.com/api-reference/checkout-sessions/list-checkout-sessions An example of the JSON structure for creating a checkout session, including customer details, subscription data, and tax information. ```json { "customer_details": { "email": "", "phone": "", "address": { "line1": "", "line2": "", "city": "", "state": "", "postal_code": "", "country": "" } }, "metadata": {}, "created_at": "", "test_mode": true, "status": "incomplete", "cancel_at_period_end": true, "current_period_end": "", "current_period_start": "", "client_secret": { "setup_secret": "", "payment_secret": "" }, "proration_behavior": "always_invoice", "trial_start": "", "trial_end": "", "cancel_at": "" } ``` -------------------------------- ### Configure Flex Payment Gateway in WooCommerce Source: https://docs.withflex.com/developer-guides/integration/woocommerce/installation Steps to manage Flex payment gateway settings within WooCommerce. This includes enabling the gateway, entering API keys obtained from the Flex Dashboard, and saving the configuration. ```HTML

Navigate to WooCommerce → Settings → Payments which is located at `/wp-admin/admin.php?page=wc-settings&tab=checkout`.

Click “Manage” on the Flex payment gateway which will bring you to `/wp-admin/admin.php?page=wc-settings&tab=checkout§ion=flex`.

Click the “Flex Dashboard” link which will bring you to the API Keys page.

Create a new API Key by clicking “New API Key” you may name it whatever you would like.

Copy the created API Key Token and return to the Flex Settings in WooCommerce.

Select “Enable Flex” and add the API Key in the box provided. Click “Save changes.”

``` -------------------------------- ### Activate Flex Payment Method Source: https://docs.withflex.com/developer-guides/integration/shopify/installation Instructions for ensuring 'Pay with Flex' is active in Shopify's payment settings. If not visible, it details how to add the payment method by searching for Flex. ```shell Navigate to Settings and select **Payments** to verify that “Pay with Flex” is set to ‘Active’. If you do not see “Pay with Flex,” select **Add payment method** and search for Flex. ``` -------------------------------- ### List Invoices Response Example Source: https://docs.withflex.com/api-reference/invoices/list-invoices This is an example JSON response when listing invoices. It includes a list of invoice objects, each containing details like invoice ID, amounts, payment intent, customer information, and subscription details. ```json { "invoices": [ { "invoice_id": "", "total": 123, "amount_due": 123, "amount_paid": 123, "payment_intent": { "payment_intent_id": "", "amount": 123, "amount_capturable": 123, "amount_received": 123, "application_fee_amount": 123, "customer": { "customer_id": "fcus_01HACM7FZ1084XB1GB6053VM0D", "first_name": "John", "last_name": "Doe", "email": "joh.doe@example.com", "phone": "+15555555555", "employer": "Flex", "shipping": { "shipping_address_id": "", "line1": "", "line2": "", "city": "", "state": "", "postal_code": "", "country": "" }, "metadata": {}, "created_at": "", "test_mode": true }, "transfer_data": { "amount": 123, "destination": "" }, "status": "canceled", "latest_charge": "", "created_at": "", "invoice": {}, "capture_method": "automatic", "client_secret": "", "metadata": {}, "payment_method": "", "test_mode": true, "transfer_group": "" }, "charge": "", "customer": { "customer_id": "fcus_01HACM7FZ1084XB1GB6053VM0D", "first_name": "John", "last_name": "Doe", "email": "joh.doe@example.com", "phone": "+15555555555", "employer": "Flex", "shipping": { "shipping_address_id": "", "line1": "", "line2": "", "city": "", "state": "", "postal_code": "", "country": "" }, "metadata": {}, "created_at": "", "test_mode": true }, "period_end": "", "period_start": "", "subscription": { "subscription_id": "", "created_at": "", "items": [ { "subscription_item_id": "", "price": { "price_id": "", "description": "", "trial_period_days": 123, "unit_amount": 123, "recurring": { "interval": "daily", "interval_count": 1, "trial_period_days": 1 }, "active": true, "product": { "product_id": "", "name": "", "description": "", "created_at": "", "visit_type": "cbtSleep", "active": true, "upc_code": "", "gtin": "", "reference_gtin": "", "hsa_fsa_eligibility": "not_eligible", "eligibility_rationale": "", "test_mode": true, "metadata": {}, "url": "" }, "created_at": "", "type": "one_time", "metadata": {}, "hsa_fsa_eligibility": "not_eligible", "test_mode": true }, "quantity": 123, "created_at": "", "updated_at": "", "test_mode": true } ], "latest_invoice": {}, "customer": { "customer_id": "fcus_01HACM7FZ1084XB1GB6053VM0D", "first_name": "John", "last_name": "Doe", "email": "joh.doe@example.com", "phone": "+15555555555", "employer": "Flex", "shipping": { "shipping_address_id": "", "line1": "", "line2": "", "city": "", "state": "", "postal_code": "", "country": "" }, "metadata": {}, "created_at": "", "test_mode": true }, "status": "incomplete", "cancel_at_period_end": true, "current_period_end": "" } } ] } ``` -------------------------------- ### List Payment Links Response Example Source: https://docs.withflex.com/api-reference/payment-links/list-payment-links An example JSON response when listing payment links, showing the structure of payment link objects including IDs, line items, and completion settings. ```JSON { "payment_links": [ { "payment_link_id": "", "label": "", "active": true, "line_items": [ { "price": "", "price_data": { "product": "", "description": "", "unit_amount": 1, "recurring": { "interval": "daily", "interval_count": 1, "trial_period_days": 1 }, "metadata": {} }, "quantity": 123, "shipping_options": { "shipping_rate_id": "", "shipping_rate_data": { "display_name": "", "amount": 123, "metadata": {} } }, "tax_rate": { "amount": 123 } } ], "allow_promotion_codes": true, "shipping_address_collection": true, "shipping_options": { "shipping_rate_id": "", "shipping_amount": 123 }, "metadata": {}, "url": "", "created_at": "", "payment_intent_data": { "capture_method": "automatic", "metadata": {} }, "after_completion": { "type": "redirect", "hosted_confirmation": { "custom_message": "" }, "redirect": { "url": "" } }, "origin": "shopify", "test_mode": true } ] } ``` -------------------------------- ### Shopify Reimbursement Link Example Source: https://docs.withflex.com/developer-guides/integration/shopify/shopify-subscriptions This example shows how to construct a reimbursement link for Shopify subscriptions, including passing customer and order details as URL parameters to pre-fill the Flex form. ```Liquid https://checkout.withflex.com/test/pay/l/fplink_01k18vwxbeknstaq51q0eq24j4?client_reference_id={{ order.id | url_encode }}&email={{ customer.email | url_encode }}&first_name={{ customer.first_name | url_encode }}&last_name={{ customer.last_name | url_encode }} ``` -------------------------------- ### Flex API GET /v1/checkout/sessions/ Example Response Source: https://docs.withflex.com/developer-guides/webhooks/using-redirects This is an example JSON response from the Flex API's GET /v1/checkout/sessions/ endpoint. It details a completed checkout session, including its ID, status, amount, currency, customer information, and URLs for success and cancellation. Key fields like status, amount_total, and customer_details are highlighted. ```json { "checkout_session": { "id": "cs_1234567890", "status": "complete", "amount_total": 2000, "currency": "usd", "customer_details": { "email": "customer@example.com", "name": "John Doe" }, "success_url": "https://yoursite.com/success?session_id=cs_1234567890", "cancel_url": "https://yoursite.com/cancel", "line_items": [...], "created": 1647887400, "expires_at": 1647973800 } } ``` -------------------------------- ### Checkout Session Configuration Example Source: https://docs.withflex.com/api-reference/checkout-sessions/capture-checkout-session Demonstrates the structure of a checkout session object, including settings for subscription cancellation, trial periods, tax rates, and detailed cost breakdowns. ```json { "cancel_at_period_end": true, "trial_period_days": 123 }, "tax_rate": { "amount": 123 }, "tax_calculation_mode": "exclusive", "test_mode": true, "total_details": { "amount_discount": 123, "amount_tax": 123, "amount_shipping": 123, "amount_iias": 123, "amount_vision": 123, "amount_prescription": 123, "amount_service": 123, "amount_fee": 123 }, "visit_type": "cbtSleep", "setup_future_use": "" } ``` -------------------------------- ### Set Tax Amount in Checkout Session Source: https://docs.withflex.com/developer-guides/integration/checkout/guides This JSON example shows how to specify a tax amount for a checkout session. Note that Flex does not calculate tax; this amount should be pre-calculated. ```json { "checkout_session": { "line_items": [ { "price": "fprice_01HW5NTAB88NK7HPD0H688EPG9", "quantity": 1 } ], "success_url": "https://withflex.com/thank-you?success=true", "mode": "payment", "cancel_url": "https://withflex.com/thank-you?canceled=true", "tax_rate": { "amount": 599 } } } ``` -------------------------------- ### Create a Product with Flex API Source: https://docs.withflex.com/developer-guides/subscriptions/getting-started This snippet demonstrates how to create a new product in Flex using the API. It requires an authorization header with a test API key and sends product details like name, description, visit type, and HSA/FSA eligibility in JSON format. ```curl curl --request POST \ --url https://api.withflex.com/v1/products \ --header 'authorization: Bearer fsk_test_YzNiYjdhNWItN2FkOS00ZTMyLWE5MmQtZTdhNzMzYzE2NTIy' \ --header 'content-type: application/json' \ --data '{"product": {"name": "Test Product","description": "Test Product Description","visit_type": "gym","hsa_fsa_eligibility": "letter_of_medical_necessity"}}' ``` -------------------------------- ### Check Flex Plugin Sync Status Source: https://docs.withflex.com/developer-guides/integration/woocommerce/installation Guidance on how to monitor the background sync status of products and prices after enabling the Flex for WooCommerce plugin. This involves checking the scheduled actions in WooCommerce. ```HTML

You may check the status of the sync by navigating to WooCommerce → Status → Scheduled Actions → Pending which is located at `/wp-admin/admin.php?page=wc-status&tab=action-scheduler&status=pending`

``` -------------------------------- ### Create Checkout Session for Subscription Source: https://docs.withflex.com/developer-guides/subscriptions/overview This example demonstrates how to create a checkout session with Flex, passing appropriate prices to set up a subscription for recurring HSA/FSA payments. It outlines the interaction with the Flex API server to initiate the subscription process. ```API Interaction Your application will interact with the Flex API server to create a checkout session. Ensure you have passed the appropriate prices that match the amount and cadence you’d like to charge for your subscription. ``` -------------------------------- ### Verify Flex Checkout Functionality Source: https://docs.withflex.com/developer-guides/integration/shopify/installation Guidance on testing the Flex checkout process by adding a product to the cart and selecting 'Pay with HSA/FSA'. This verifies redirection to the Flex Checkout for payment details. ```shell Verify the checkout is working by adding a product to the cart and selecting ‘Pay with HSA/FSA’ at checkout. You should be redirected to the Flex Checkout to enter payment details. ``` -------------------------------- ### Verify Flex Pixel Status Source: https://docs.withflex.com/developer-guides/integration/shopify/installation Steps to confirm the Flex Pixel is connected within Shopify's Customer Events settings. This ensures the pixel is correctly retrieving cart information for HSA/FSA eligibility determination. ```shell Navigate to Settings and select **Customer Events** to verify the Flex Pixel status is ‘Connected’. ``` -------------------------------- ### Authorization Header Example Source: https://docs.withflex.com/api-reference/checkout-sessions/list-checkout-sessions Demonstrates how to use a Bearer token for API authentication. ```http Authorization: Bearer ``` -------------------------------- ### Expand Customer in Checkout Session Request Source: https://docs.withflex.com/api-reference/expanding-resources This example demonstrates how to make a GET request to the Flex API to retrieve checkout session details and expand the associated customer object. It includes query parameters for specifying the payment intent and expanding customer data. ```bash curl --request GET \ --url 'https://api.withflex.com/v1/checkout/sessions?payment_intent=fpi_01HWBS24Z8EFZ7VHJTSEWF2DPQ&expand_customer=true' \ --header 'authorization: Bearer fsk_test_YzNiYjdhNWItN2FkOS00ZTMyLWE5MmQtZTdhNzMzYzE2NTIy' \ --header 'content-type: application/json' \ --header 'user-agent: vscode-restclient' ``` -------------------------------- ### Subscription Data Example Source: https://docs.withflex.com/api-reference/checkout-sessions/list-checkout-sessions Illustrates the structure for subscription-related data within a checkout session. ```json { "subscription_data": { "cancel_at": "", "trial_end": "", "cancel_at_period_end": true, "trial_period_days": 123 } } ``` -------------------------------- ### React: Embed and Manage Flex Checkout iframe Source: https://docs.withflex.com/developer-guides/integration/checkout/guides This React component demonstrates how to embed the Flex checkout within a React application. It uses `useRef` to get a reference to the iframe element and `useEffect` to set up and clean up a message event listener. The listener ensures that messages are only processed if they come from the embedded iframe. ```jsx "use client"; import { useEffect, useRef } from "react"; export default function Frame({ src }: { src: string }) { const frame = useRef(null); useEffect(() => { const listener = ({ source, data }: MessageEvent) => { if (source !== frame.current?.contentWindow) { return; } console.log("[Frame] Message Received", data); }; window.addEventListener("message", listener); return () => { window.removeEventListener("message", listener); }; }, []); return