Pay Monthly Selectors

Overview

The Pay Monthly Selector lets customers choose Flex Pay as their payment method during checkout. Drop an <up-from-pricing> component inside your existing payment options and customers instantly see up-to-date monthly pricing - no extra wiring required.

If your site already has payment selectors for different methods, you add Flex Pay as a new option alongside them.

When clicked, the selector activates the Flex Pay iFrame (Step 5) where customers complete their financing application.

Required Elements

The Pay Monthly Selector is composed of:

1. Selector container - wraps the entire option
2. "Pay Monthly" label - text identifying the payment method
3. From Pricing component - shows the monthly offer amount and handles the error state when an offer is unavailable

Configuration

The Pay Monthly selector is your component - you build it to match your payment page design. The SDK provides the <up-from-pricing> component that goes inside and handles all the pricing logic automatically.

What You Build vs What the SDK Handles

Basic Example

Add <up-from-pricing> inside your payment method selector:

<div class="payment-methods">
  <!-- Your existing payment options -->
  <label class="payment-option">
    <input type="radio" name="payment" value="credit-card" checked>
    <span>Credit Card</span>
  </label>

  <!-- Pay Monthly option -->
  <label id="pay-monthly-option" class="payment-option">
    <input type="radio" name="payment" value="pay-monthly" id="pay-monthly-radio">
    <span>Pay Monthly</span>
    <up-from-pricing
      price-value="70000"
      context="pay_monthly_selector"
      show-error="true"
      tooltip-enabled="true"
    ></up-from-pricing>
  </label>
</div>

Key Attributes

show-error Behavior

Callback Handler Integration

The callback handler tells you when Pay Monthly is available. Use it to enable or disable your selector:

var payMonthlyOption = document.getElementById("pay-monthly-option");
var payMonthlyRadio = document.getElementById("pay-monthly-radio");

// In your callback handler (Step 4)
OFFER_AVAILABLE: function() {
  // Enable the Pay Monthly option
  payMonthlyRadio.disabled = false;
  payMonthlyOption.classList.remove("disabled");
},

OFFER_UNAVAILABLE: function() {
  // Keep Pay Monthly visible (recommended), but disable selection
  payMonthlyRadio.disabled = true;
  payMonthlyOption.classList.add("disabled");

  // Optional fallback:
  // If your UX requires auto-switching to another method, implement it carefully.
  // Avoid forced focus changes when possible (accessibility).
}

How it works: When the offer is unavailable, the <up-from-pricing> component automatically displays "NOT AVAILABLE" with a tooltip explaining why. You just need to disable the selector so customers can't select it.

Activating the iFrame

When the customer selects Pay Monthly, show the Flex Pay iFrame:

document.getElementById("pay-monthly-radio").addEventListener("change", function() {
  if (this.checked) {
    // Show the iFrame container (see Step 5)
    document.getElementById("up-pay-monthly-container").style.display = "block";
  }
});

See Step 5: Setup Flex Pay iFrame for iFrame configuration.

Styling Guidelines

Style the selector to match your payment page.

1. Offer available - component renders the monthly pricing inside the selector

2. Offer unavailable - component renders error state (when show-error="true")

Style the component using CSS Custom Properties:

#pay-monthly-option up-from-pricing {
  --fp-font-size: 14px;
  --fp-price-color: inherit;
}

/* Disabled state styling */
.payment-option.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

French Translations

The <up-from-pricing> component handles French translations automatically when locale="fr-CA" is set (either globally via init() or per component). This includes both pricing text and error messages.

1. Offer Available

2. Offer Unavailable

<label id="pay-monthly-option" class="payment-option">
  <input type="radio" name="payment" value="pay-monthly" id="pay-monthly-radio">
  <span>Pay Monthly</span>
  <up-from-pricing
    price-value="70000"
    context="pay_monthly_selector"
    show-error="true"
    tooltip-enabled="true"
    modal-enabled="false"
  ></up-from-pricing>
</label>

Next Steps

• From Pricing attributes and styling: From Pricing Configurations
• iFrame setup: Step 5: Setup Flex Pay iFrame