Wallet Assist Widget

The Wallet Assist Widget is already implemented in our pre-built e-commerce platform integrations and may also be implemented on any website by a 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 MySubscriptions 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
vaultEnvironmentKeyComes 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-wallet-widget',
        apiBaseUrl: '{{apiBaseUrl}}',
        apiAccessToken: '{{apiAccessToken}}',
        vaultEnvironmentKey: '{{spreedlyEnvironmentKey}}',
        customerId: '{{customerId}}',
        theme: 'my-custom-theme-name',
      };
      // Call widget init()
      WalletAssist.init(widgetConfig);

      var payment = {
        paymentProfile: {
          customerId: '989889898',
          paymentToken: 'ABCD-UNIQUE-PAY-TOKEN',
          creditcardType: 'master',
          creditcardFirstDigits: '555555',
          creditcardLastDigits: '4444',
          creditcardMonth: '3',
          creditcardYear: '2025',
          vaultSpecificFields: {
            sfcc: {
              payment_instrument_id: '12341234123',
            },
          },
          billingAddress: {
            firstName: 'Bob',
            middleName: 'A',
            lastName: '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
      const newPayment = WalletAssist.onPaymentProfileCreated({ payment });

      // Update a payment profile
      const updatedPayment = WalletAssist.onPaymentProfileUpdated({
        paymentProfile: {
          id: 12345,
          customerId: '9898989898',
          creditcardType: 'master',
          // ...
        },
        paymentProfile: {
          id: 12345,
          customerId: '9898989898',
          creditcardType: 'visa',
          // ...
        },
      });
    </script>
  </body>
</html>