Skip to content

Conversation

@wooslim
Copy link
Contributor

@wooslim wooslim commented Sep 25, 2025

What is the purpose of this PR?

Full Stack Subscriptions JS SDK changes are ready to be released so we want to allow external domains to use the new subscriptions props.

Original PR when adding subscriptions with paypal domain restriction: https://github.com/paypal/paypal-checkout-components/pull/2449/files

JIRA: https://paypal.atlassian.net/browse/DTPRP-3083

Type of change

  • New feature (backward compatible change that adds new capability).
  • UI change
  • Bug fix.
  • Breaking change (backward incompatible change). Provide references to customer impact and communication.
  • Refactor (no functional change)

Testing Plan

Below is information that validates the successful implementation of this feature and how a release manager can validate the success of a release candidate in the absence of the PR author.

PR Author: https://paypal.enterprise.slack.com/team/W5GDX9QHK

Backup Validator: https://paypal.enterprise.slack.com/team/W3Y29T22H

PR Author's Team: PPCP Subscriptions

Test Environment URL: TBD (Will be ready when testing alpha version)

Step-by-Step Validation

  1. Get a Client ID
    You need a client ID that is ramped to the experiment sdk_ppcp_fs_subscriptions
    See this document for client IDs ramped to this elmo: https://paypal.atlassian.net/wiki/spaces/PnM/pages/2712746465/FSS+JS+SDK+Client+IDs+for+stage

  2. Test script - save this test script as an HTML file and replace "<CLIENT_ID>" with a client ID from step 1

<html>
  <body>
    <div id="card-name-field-container"></div>
    <div id="card-number-field-container"></div>
    <div id="card-expiry-field-container"></div>
    <div id="card-cvv-field-container"></div>
  </body>
  <script
    src="https://localhost.paypal.com:8443/sdk/js?components=card-fields&client-id=<CLIENT_ID>"
    data-sdk-client-token="test"
  ></script>
  <script>
    const cardFields = window.paypal.CardFields({
      createSubscription: () => {},
      onApprove: () => {},
    });

    if (cardFields.isEligible()) {
      cardFields
        .NameField({})
        .render(document.getElementById('card-name-field-container'));
      cardFields
        .NumberField({})
        .render(document.getElementById('card-number-field-container'));
      cardFields
        .ExpiryField({})
        .render(document.getElementById('card-expiry-field-container'));
      cardFields
        .CVVField({})
        .render(document.getElementById('card-cvv-field-container'));
    } else {
      console.error('Card Fields not eligible to render');
    }
  </script>
</html>
  1. Setup localhost
    Use node http-server (either npx or global) to serve the HTML file to localhost:8080 or 127.0.0.1:8080

  2. Run JS SDK
    Run JS SDK v5 in First render mode using the changes for paypal-checkout-components from branch wooslim:feature/fss-remove-internal and clientsdknodeweb.

This should serve the script in https://localhost.paypal.com:8443/sdk/js with these code changes.

  1. Verify the changes
    Navigate to http://127.0.0.1:8080/card-fields-test.html to verify that the card-fields are rendering properly.
image

Before/After Screenshots

Before:
Props are not loaded for 127.0.0.1 domain. It only renders for localhost and *.paypal.* domains

Testing with locally hosted JS SDK test app:

Screenshot 2025-09-25 at 4 34 12 PM

After:
Props are loaded for any domains and card fields are rendered - tested with 127.0.0.1

Testing with locally hosted JS SDK test app:

Screenshot 2025-09-25 at 4 32 12 PM

E2E Test Recording

DataDog Graph to Monitor

CAL Logs & Regex

Rollback Considerations

Are there any services dependent on this change?

  • Yes
  • No

@wooslim wooslim marked this pull request as ready for review September 29, 2025 18:37
@wooslim wooslim requested a review from a team as a code owner September 29, 2025 18:37
Copy link

@maxmil7 maxmil7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@delbarrow
Copy link
Contributor

Can you include steps of how this can be tested so whoever is on call can validate it.
https://paypal.atlassian.net/wiki/spaces/MI/pages/2616202578/PayPal+JS+SDK+Contribution+Guidelines#New-PR-Template

@wooslim
Copy link
Contributor Author

wooslim commented Oct 1, 2025

Can you include steps of how this can be tested so whoever is on call can validate it. https://paypal.atlassian.net/wiki/spaces/MI/pages/2616202578/PayPal+JS+SDK+Contribution+Guidelines#New-PR-Template

Updated the PR description to the new template and added steps to reproduce! Let me know if anything else needs to be added

@wooslim
Copy link
Contributor Author

wooslim commented Oct 1, 2025

workflow failed due to unused import - updated to remove unused import

@ravishekhar ravishekhar merged commit 5937a2c into paypal:main Oct 2, 2025
1 check passed
@wooslim wooslim deleted the feature/fss-remove-internal branch October 2, 2025 15:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants