Skip to main content

Implementing Checkout with Accrue Pay Widgets

Create a seamless payment experience using modular, embeddable components​

Introduction​

Accrue Pay widgets are plug-and-play web components designed to enhance your checkout experience. These widgets display key information such as Accrue Wallet balances, earned rewards, and available payment methods. With minimal setup, they integrate smoothly into your frontend, helping you accelerate implementation and deliver a cohesive, incentive-driven checkout flow.

This guide walks you through integrating the full widget suite—covering setup, event handling, and best practices for a robust implementation.

Widget Categories​

Accrue Pay provides two main types of widgets:

  • Wallet Widgets — Display wallet balances, applied amounts, and reward previews.
  • Bank Widgets — Present bank-based payment options and associated incentives.

Each widget supports distinct stages of the checkout journey and can be used independently or in combination to provide a fully branded customer experience.

Getting Started​

1. Load the Accrue Pay Script​

Add the script to your HTML <head> section. Make sure to insert your actual client ID.

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

✅ Tip: Use pay-sandbox.accruesavings.com for testing. Switch to pay.accruesavings.com in production.

2. Fetch Widget Data from Backend​

Your backend should call the Accrue Merchant API to fetch widget payloads and pass them to your frontend.

Wallet Widget Payload:

// Node.js Example
const response = await fetch('https://merchant-api.accruesavings.com/widgets/wallet', {
  headers: {
    'Authorization': `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
    'Content-Type': 'application/vnd.api+json'
  }
});
const widgetPayload = (await response.json()).attributes.payload;

Bank Widget Payload:

const response = await fetch('https://merchant-api.accruesavings.com/widgets/bank', {
  headers: {
    'Authorization': `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`,
    'Content-Type': 'application/vnd.api+json'
  }
});
const bankWidgetPayload = (await response.json()).attributes.payload;

⚠️ Never expose your client secret in frontend code. Always fetch widget data server-side.

Building the Checkout Flow​

Step 1: Display Wallet Balance in Cart Summary​

Use the Wallet Balance widget to show available funds and allow the customer to apply their balance.

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

Script with Widget Payload:

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

Step 2: Dynamically Update Totals​

You must set the transaction amount and respond to events like wallet balance application.

document.addEventListener("AccruePay::Ready", () => {
  window.accruePay.setAmount(9999); // $99.99 in cents

  window.accruePay.onApplyBalanceToggle((payload) => {
    if (payload.isApplied) {
      updateCartTotal(payload.amount);
    } else {
      resetCartTotal();
    }
  });
});

Step 3: Show Wallet Rewards Preview​

Display the potential rewards available from paying with wallet funds.

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

Step 4: Enable Bank Account Payments​

Let users choose to pay via linked bank accounts. Render the payment method widget conditionally:

<input type="radio" name="payment-method" value="accrue-bank" id="accrue-bank-radio" />
<div id="accrue-bank-details" style="display: none;">
  <accrue-pay widget="bank-payment-method"></accrue-pay>
</div>

<script>
  document.getElementById('accrue-bank-radio').addEventListener('change', function() {
    document.getElementById('accrue-bank-details').style.display = 'block';
  });
</script>

Step 5: Display Bank Payment Rewards​

If the customer opts for bank payment, show the rewards they’ll earn.

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

Step 6: Post-Purchase Confirmation​

After a successful order, use the Wallet Payment Success widget to highlight reward earnings.

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

Handling Events​

Accrue Pay widgets emit useful events you can use to update your UI:

document.addEventListener("AccruePay::Ready", () => {
  window.accruePay.onApplyBalanceToggle((payload) => {
    console.log("Balance applied:", payload.isApplied);
    console.log("Amount applied (cents):", payload.amount);
  });

  window.accruePay.onGoToWallet(() => {
    window.location.href = "/wallet"; // or open a modal
  });
});

Best Practices​

✅ Performance​

  • Use defer on the Accrue Pay script
  • Only render widgets relevant to the current screen
  • Reuse widget data when possible

✅ UX Design​

  • Place widgets near price totals or payment inputs
  • Show balance and rewards before final payment
  • Avoid scroll-hiding key widgets on mobile

✅ Integration Hygiene​

  • Always fetch widget data from your server
  • Sync cart totals and applied rewards in real-time
  • Implement error states (e.g. balance unavailable)

✅ Security​

  • Never expose secrets on the client
  • Validate payloads from the API
  • Use HTTPS and secure headers

Troubleshooting​

IssueResolution
Widget not renderingConfirm script loaded and valid widget payload provided
Wallet balance not updatingEnsure setAmount() is called and value is in cents
Styling conflictsUse scoped CSS or container elements to isolate styles

Summary​

Accrue Pay widgets offer a modular, embeddable solution for streamlining checkout and boosting conversions. From wallet-based incentives to seamless bank payments, integrating these widgets provides customers with greater transparency and value.

Ready to enhance your checkout with Accrue Pay?

Contact us at info@byaccrue.com to get started