Implementing the PaymentFields Widget

Current version

Before You Begin

To get started, you will need a Subscribe Pro account with a sandbox environment provisioned.

Implement the PaymentFields Widget on Your Page

  1. Insert the Subscribe Pro JavaScript <script> tag onto a new page your website to load the PaymentFields Widget. The page is typically located in the checkout area of the website.

    <script src="https://hosted.subscribepro.com/payment-fields/payment-fields-0.9.4.js"></script>

  2. Call the PaymentFields.on() function to register event handlers for the PaymentFields Widget. For example:

    <script>
  PaymentFields.on('tokenize', (data) => {
    console.log(`'tokenize' event received.`);
    console.log(data);
  });
</script>

  3. Call the PaymentFields.init() function to initialize the PaymentFields Widget. For example:

    <script>
  PaymentFields.init({
    oauthApiToken: 'XXXX',
    spVaultEnvironmentId: 'XXXX',
    paymentMethodType: 'credit_card',
    ...
    numberIframe: {
      container: 'number',
      inputStyle: '...'
    },
    ...
  });
</script>

  4. Call the PaymentFields.tokenize() function to tokenize a customer's credit card data. For example:

    <script>
  PaymentFields.tokenize({
    authenticateCardholder: true,
    authenticationType: 'payment',
    paymentDetails: {
      amount: '10.00',
    },
    cardDetails: {
      creditcardMonth: '01',
      creditcardYear: '2025',
    },
    customerEmail: '[email protected]',
    billingAddress: {
     ...
    },
    shippingAddress: {
     ...
    },
  });
</script>

Basic Example

Where you fill in the proper credentials for XXXX:

<html lang="en">
  <body>
    <script src="https://hosted.subscribepro.com/payment-fields/payment-fields-0.9.4.js"></script>

    <script>
      window.onload = (event) => {
        PaymentFields.on('tokenize', (data) => {
          console.log(`'tokenize' event received.`);
          console.log(data);
        });

        PaymentFields.on('error', (data) => {
          console.log(`'error' event received.`);
          console.log(data);
        });

        PaymentFields.on('inputEvent', (data) => {
          console.log(`'inputEvent' event received.`);
          console.log(data);
        });

        PaymentFields.on('challengeShown', (data) => {
          console.log(`'challengeShown' event received.`);
          console.log(data);
        });

        PaymentFields.on('challengeHidden', (data) => {
          console.log(`'challengeHidden' event received.`);
          console.log(data);
        });

        PaymentFields.init({
          apiBaseUrl: 'https://api.subscribepro.com/',
          oauthApiToken: 'XXXX',
          spVaultEnvironmentId: 'XXXX',
          paymentMethodType: 'credit_card',
          enableThreeDs: true,
          enableCvv: true,
          numberIframe: {
            container: 'number',
            inputStyle:
              'width: 100%; padding: 8px; line-height: 20px; font-size: 14px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";',
          },
          cvvIframe: {
            container: 'cvv',
            inputStyle:
              'width: 100%; padding: 8px; line-height: 20px; font-size: 14px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";',
          },
          threeDsChallengeIframe: {
            container: 'challenge',
          },
        });
      };

      function tokenizeCard() {
        PaymentFields.tokenize({
          authenticateCardholder: true,
          authenticationType: 'payment',
          paymentDetails: {
            amount: '10.00',
          },
          cardDetails: {
            creditcardMonth: '01',
            creditcardYear: '2025',
          },
          customerEmail: '[email protected]',
          billingAddress: {
            firstName: 'Test',
            lastName: 'Customer',
            street1: '123 Some St',
            street2: 'Apt 2',
            street3: '3rd Floor',
            city: 'Baltimore',
            region: 'MD',
            postcode: '21212',
            country: 'US',
          },
          shippingAddress: {
            firstName: 'Test',
            lastName: 'Customer',
            street1: '123 Some St',
            street2: 'Apt 2',
            street3: '3rd Floor',
            city: 'Baltimore',
            region: 'MD',
            postcode: '21212',
            country: 'US',
          },
        });
      }
    </script>

    <div class="content">
      <header></header>
      <main>
        <div class="container" style="max-width: 24rem">
          <br /><br />
          <div
            id="number"
            style="
              height: 38px;
              width: 18rem;
              border: 1px solid #ccc;
              border-radius: 8px;
            "
          ></div>
          <br />
          <div
            id="cvv"
            style="
              height: 38px;
              width: 8rem;
              border: 1px solid #ccc;
              border-radius: 8px;
            "
          ></div>
          <br />
          <button onclick="tokenizeCard();">Tokenize Card</button>
          <br /><br />
          <div id="challenge" style="height: 40rem; width: 32rem"></div>
          <br /><br />
        </div>
      </main>
      <footer>
        <div class="container">
          <ul class="footer-menu">
            <li class="footer-menu-item"><a href="#">Footer Link 1</a></li>
          </ul>
        </div>
      </footer>
    </div>
  </body>
</html>