Wallet Widgets

Enhance your checkout experience with embeddable Accrue components for displaying wallet balances, rewards, and streamlined payment flows.

Overview​

Accrue provides two types of widget integrations:

1. Wallet Widgets – Prebuilt UI components to display wallet balances, rewards, and payment details.
2. Inline Flow – A full, embedded checkout experience that retains customers on your site.

Getting Started​

Loading Widget Data (Required)​

Wallet widgets require user-specific data fetched from the Accrue API. Without it, widgets won’t render.

Option 1: Server-Side Rendering​

GET /api/v1/widgets/wallet/:walletId

Response:

{
  "data": {
    "id": "wwd_123",
    "type": "WalletWidgetData",
    "attributes": {
      "payload": "base64_encoded_payload"
    }
  }
}

Include this in your page:

<script
  data-script="accrue-pay"
  defer
  src="https://pay[-sandbox].accruesavings.com/main.js"
  data-client-id="{your-client-id}"
  data-wallet-widget="{data.attributes.payload}"
></script>

Option 2: Client-Side Fetching​

fetch('/api/accrue-wallet-widget/' + walletId)
  .then(res => res.json())
  .then(data => {
    window.accruePay.setWalletWidgetData(data.payload);
  });

Include Accrue Pay Script​

<script
  data-script="accrue-pay"
  defer
  src="https://pay[-sandbox].accruesavings.com/main.js"
  data-client-id="{your-client-id}"
></script>

Widget Types​

Wallet Widgets​

wallet-balance Example​

<accrue-pay widget="wallet-balance"></accrue-pay>

Script Setup:

<script
  data-script="accrue-pay"
  defer
  src="https://pay[-sandbox].accruesavings.com/main.js"
  data-client-id="{your-client-id}"
  data-wallet-widget="{data.attributes.payload}"
></script>

<script>
  document.addEventListener("AccruePay::Ready", () => {
    window.accruePay.onApplyBalanceToggle((payload) => {
      console.log("Balance toggled:", payload);
    });
  });
</script>

Programmatic control:

// To auto apply the wallet balance
window.accruePay.setBalanceApplied(true);
// To control the apply balance toggle's visibility (true to hide, false to show):
window.accruePay.setHideBalanceToggle(true);

wallet-rewards​

<accrue-pay widget="wallet-rewards"></accrue-pay>

wallet-payment-success​

<accrue-pay widget="wallet-payment-success"></accrue-pay>

Go to Wallet Event:

window.accruePay.onGoToWallet(() => {
  console.log("Go to Wallet clicked");
});

Bank Widgets​

Bank Data Example​

GET /api/v1/widgets/bank

Response:

{
  "data": {
    "id": "bwd_456",
    "type": "BankWidgetData",
    "attributes": {
      "payload": "base64_encoded_payload"
    }
  }
}

Inject Script:

<script
  data-script="accrue-pay"
  defer
  src="https://pay[-sandbox].accruesavings.com/main.js"
  data-client-id="{your-client-id}"
  data-bank-widget="{data.attributes.payload}"
></script>

Or dynamically:

window.accruePay.setBankWidgetData("{payload}");

Bank Widget Examples​

<accrue-pay widget="bank-rewards"></accrue-pay>
<accrue-pay widget="bank-payment-method"></accrue-pay>

Bank Rewards Widget:

Bank Payment Method Widget:

Cart Value and Subtotal​

Widgets require cart amounts in cents.

window.accruePay.setAmount(9999); // $99.99
window.accruePay.setSubtotal(4999); // optional subtotal
window.accruePay.setSubtotal(undefined); // resets to total

Total: $694.25

Subtotal: $499.00

Rewards: 1% calculated on subtotal

Inline Flow​

✅ Controlled Integration​

<accrue-pay flow="[wallet|bank]"></accrue-pay>

document.addEventListener("AccruePay::Ready", () => {
  window.accruePay.onGetUserData(() => ({
    referenceId: "user-123",
    email: "user@email.com",
    phoneNumber: "+12125559999"
  }));

  window.accruePay.onPaymentIntentStart(() => ({
    walletId: "wallet-abc",
    amount: 9999,
    reference: "cart-xyz"
  }));

  window.accruePay.onPaymentIntentUpdate(intent => {
    console.log("Updated intent:", intent);
  });
});

🧩 Uncontrolled (iframe)​

<iframe
  id="accrue-pay"
  src="https://pay[-sandbox].accruesavings.com/_/[flow]/?client={client-id}&wallet={wallet-id}&amount=9999&reference=order123"
  width="340"
  height="420"
  style="border:none;"
  onload="loadWalletWidgetData()"
></iframe>

function loadWalletWidgetData() {
  const iframe = document.querySelector("#accrue-pay");
  iframe.contentWindow.postMessage(
    {
      key: "AccruePay::WalletWidgetDataUpdated",
      data: { payload: "{payload}" }
    },
    "https://pay[-sandbox].accruesavings.com"
  );
}

window.addEventListener("message", (event) => {
  if (
    event.origin === "https://pay[-sandbox].accruesavings.com" &&
    event.data?.key === "AccruePay::PaymentIntentUpdated"
  ) {
    const intent = event.data.paymentIntent;
    console.log("Intent received:", intent);
  }
});

✅ Best Practices​

🧪 Environments​

• Use sandbox credentials in dev/test
• Never expose production credentials in dev

🔐 Security​

• Do not expose secret keys
• Use server-side proxies to retrieve widget data

⚙️ Performance​

• Use defer when loading SDK
• Avoid unnecessary widget re-renders
• Group API requests when possible

🧠 UX Guidelines​

• Display rewards before payment
• Place widgets close to cart totals
• Show loading states while fetching data

🚨 Error Handling​

• Handle missing/invalid payloads
• Log SDK errors
• Provide graceful fallback when widgets fail

📬 Need Help?​

Have questions or need onboarding support?

Email us: 📧 info@byaccrue.com

Accrue Pay's widget system helps increase conversions, reward loyalty, and reduce checkout friction with zero redesign required.