Payment Methods Widget

The payment-methods flow allows users to manage and select backup payment methods for their wallet payments. This flow requires wallet widget data to be loaded from the Merchant API.

Accrue Pay Payment Methods Flow Integration
<html>
  <head>
    <!-- 1. Script tag with Client ID -->
    <!-- Optional: Add data-default-error-handling="true" for default error handling -->
    <!-- Optional: Add data-linking-flow="backup" to allow adding a backup payment method -->
    <script
      data-script="accrue-pay"
      defer
      src="https://pay[-sandbox].byaccrue.com/main.js"
      data-client-id="{your-client-id}"
      data-session-id="{current-session-id}"
      data-default-error-handling="true"
      data-linking-flow="link"
    ></script>

    <script>
      // 2. Configure the callback function when Accrue Pay is ready
      document.addEventListener("AccruePay::Ready", async () => {
        // Listen for linked account updates
        window.accruePay.onLinkAccountUpdate((data) => {
          const { linkedAccountId, paymentMethod } = data;
          console.log("Linked account updated:", {
            linkedAccountId,
            paymentMethod,
          });

          // Handle linked account update
          // You can update your checkout state here
        });

        // Listen for linked account errors
        window.accruePay.onLinkAccountUpdateError((error) => {
          const { errorCode, errorMessage, paymentMethod } = error;
          console.error("Linked account error:", {
            errorCode,
            errorMessage,
            paymentMethod,
          });

          // Custom error handling (optional)
          // You can show a toast, display error in UI, etc.
        });
      });
    </script>
  </head>
  <body>
    <!-- 3. Custom element where you want the widget -->
    <accrue-pay
      flow="payment-methods"
      wallet-id="{active-wallet-id}"
    ></accrue-pay>
  </body>
</html>

Script attribute: `data-linking-flow`

You can set the script attribute data-linking-flow to control whether users can add a backup payment method:

data-linking-flow="link" — Link a payment method only (default behavior when the attribute is omitted). Users will not be able to add a backup payment method.
data-linking-flow="backup" — Allow users to add a backup payment method for their wallet.

If you omit the attribute, the default is link; the widget will not offer the option to add a backup payment method. Use data-linking-flow="backup" only when you want to enable adding a backup payment method.

Optional Default Error Handling

You can enable default error handling by adding the data-default-error-handling="true" attribute to the script tag. When enabled, Accrue Pay will automatically display error messages to users without requiring custom error handling implementation.

Script attribute: data-linking-flow​

Optional Default Error Handling​

Script attribute: `data-linking-flow`

Optional Default Error Handling