Embed the component

<govifi-payment> is a framework-agnostic web component. Card number and CVV render inside an iframe served from an isolated Govifi origin, so card data never enters your page’s JavaScript context — your PCI scope stays SAQ-A.

Use the interactive designer to configure everything visually and copy a ready-made snippet.

Loading

Script tag (no build step)

<script
  src="https://cdn.govifi.com/v1/govifi-payment.js"
  integrity="sha384-REPLACE_WITH_PUBLISHED_HASH"
  crossorigin="anonymous"
></script>

<govifi-payment
  session-id="cs_3oNkLp9aBcDeFgHi"
  client-secret="cs_3oNkLp9aBcDeFgHi_secret_..."
></govifi-payment>

The CDN bundle is pinned to v1 — breaking changes ship as v2/.

npm

npm install @caselle/payment-component

import '@caselle/payment-component/govifi-payment.js';

Angular

npm install @caselle/payment-component-angular

import { CivicGovifiPaymentComponent } from '@caselle/payment-component-angular';

@Component({
  standalone: true,
  imports: [CivicGovifiPaymentComponent],
  template: `
    <civic-govifi-payment
      [sessionId]="sessionId"
      [clientSecret]="clientSecret"
      (paymentComplete)="onPaid($event)"
      (feeQuote)="onFee($event)"
    ></civic-govifi-payment>
  `,
})
export class PayBillComponent { /* … */ }

Layout modes

layout	What renders	Use when
hosted	Full chrome: merchant branding, order summary, fee line, page message	The component is the page
embedded (default)	Methods + fields + pay button, no summary chrome	Your page already shows the order details
fields	Inputs only — you own the pay button	Maximum control; call tokenize() / submit() yourself

Each piece of chrome can be individually overridden with show-summary, show-branding, show-fee-line, show-page-message, and show-pay-button — see Attributes.

Fields-only submit

const payment = document.querySelector('govifi-payment');
document.querySelector('#my-pay-button').addEventListener('click', async () => {
  await payment.submit(); // or: const { token } = await payment.tokenize();
});

Direct iframe (advanced)

If you’d rather not load any Govifi script on your page, embed the session URL directly and talk postMessage:

<iframe
  src="https://checkout.govifi.io/embed/cs_3oNkLp9aBcDeFgHi"
  allow="payment"
  style="width:100%;height:680px;border:0"
></iframe>

Events arrive as { type: 'govifi:event', event, detail, sessionId } messages — identical payloads to the component’s CustomEvents. Always check event.origin === 'https://checkout.govifi.io'. Your origin must also be in the session’s allowlist or the embed route refuses to frame (frame-ancestors CSP).