Skip to main content

Embedded checkout

You build plan browsing; PowerHQ hosts checkout. When a customer selects a plan, you embed that plan's enrollment URL and PowerHQ runs the regulated enrollment and disclosure steps inside it. You don't build or maintain the checkout.

Two URLs per plan​

Every plan returns:

  • headlessEnrollmentUrl — the embeddable checkout surface (partner-app.html). Use this in an iframe.
  • enrollmentUrl — the full-page hosted flow (app.html). Use this if you'd rather redirect the customer to a standalone page instead of embedding.

Both carry your partner attribution code.

Embed it​

<!-- headlessEnrollmentUrl comes from the plan the customer selected -->
<iframe
  src="PLAN_HEADLESS_ENROLLMENT_URL"
  width="100%"
  height="760"
  style="border:0"
  title="Energy enrollment"
  allow="payment">
</iframe>

Tips​

  • Width 100%. The flow is responsive; let it adapt to desktop, tablet, and mobile.
  • Give it height. Checkout collects customer and payment details — start around height="760" and adjust to avoid an inner scrollbar on mobile.
  • Use the selected plan's own URL. It carries the plan context, so the customer enrolls in exactly what they saw.
  • Embed only the checkout step. Plan browsing and selection stay in your UI, from the API data. You drop into the iframe once a plan is chosen.
  • Don't cache the URL indefinitely. Treat it as tied to a fresh plan lookup so a customer never checks out against stale pricing.
  • Allow the origin. If your page sets a Content-Security-Policy, permit powerhq.co in frame-src (and any redirect allow-list) so the iframe can load.

Going live​

To move from cert to production, swap the endpoint and key your backend uses. The enrollment URLs the API returns will resolve to production automatically. Confirm the iframe opens from the production URLs, and you're live.