Wallet Assist Widget


The Wallet Assist Widget is already implemented in our pre-built eCommerce platform integrations. The widget may also be implemented on any website by qualified web developer.

Steps To Implement

  1. Authenticate with Subscribe Pro API - Server Side
  2. Create a Page on Your Website with JavaScript Tags for the Widget

Authenticate with Subscribe Pro - Server-Side

Follow the instructions for server-side authentication step for the My Subscriptions Widget.

Create a Page on Your Website with JavaScript Tags for the Widget

Insert the Subscribe Pro JavaScript tags onto the Address Books page(s) of your website.

Template Variables

These values should be determined server-side and plugged into the HTML template below to render a page for the client.

apiAccessTokenAccess token returned by /oauth/v2/token
environmentKeyComes in response with access token - This is the spreedly_environment_key field
customerIdSubscribe Pro unique customer ID

Page Template

<html>
<head>
</head>
<body>

<div>
Main Body Content - This is the Wallet Listing Page on Your Site
</div>

<div id="sp-wallet-assist-widget"></div>

<!-- Load the Subscribe Pro widget script -->
<script type="text/javascript" src="https://static.subscribepro.com/wallet/widget-wallet-1.0.3.js"></script>

<!-- Pass configuration and init the Subscribe Pro widget -->
<script>
    // Setup config for Subscribe Pro
    var widgetConfig = {
        element: 'sp-address-book-widget',
        apiBaseUrl: '{{apiBaseUrl}}',
        apiAccessToken: '{{apiAccessToken}}',
        environmentKey: '{{spreedlyEnvironmentKey}}',
        customerId: '{{customerId}}',
        theme: 'my-custom-theme-name',
    };
    // Call widget init()
    WalletAssist.init(widgetConfig);

    var newCard = {
        "payment_profile": {
            "customer_id": "989889898",
            "payment_token": "ABCD-UNIQUE-PAY-TOKEN",
            "creditcard_type": "master",
            "creditcard_first_digits": "555555",
            "creditcard_last_digits": "4444",
            "creditcard_month": "3",
            "creditcard_year": "2025",
            "vault_specific_fields": {
                "sfcc": {
                "payment_instrument_id": "12341234123"
                }
            },
            "billing_address": {
                "first_name": "Bob",
                "middle_name": "A",
                "last_name": "Jones",
                "company": "Bobs Emporium",
                "street1": "123 Here St",
                "street2": "Apt B",
                "city": "Baltimore",
                "region": "MD",
                "postcode": "21212",
                "country": "US",
                "phone": "410-123-4567"
            }
        }
    };

    // Create a payment profile
    WalletAssist.onPaymentProfileCreated(newCard, function (result) {
        // result.id contains the payment profile ID
    });

    WalletAssist.onPaymentProfileUpdated({
        "payment_profile": {
            "customer_id": "9898989898",
            "payment_profile_id": "123123123",
            // ...
        }
    });

    WalletAssist.onPaymentProfileDeleted({
        "payment_profile": {
            "customer_id": "9898989898",
            "payment_profile_id": "123123123",
            // ...
        }
    });
</script>
</body>
</html>