[Checkout extensibility] Adds iframe.sources capability

[rcaplanshopify]

WHY are these changes introduced?

Resolves #1811

Note: this should be released after the core PR below ships.

• https://github.com/Shopify/shopify/pull/519373

This PR introduces support for the new iframe nested checkout UI extension capability table and the iframe.sources capability.

The iframe.sources capability is an array of strings. These entries will be used as content security policy (CSP) sources, allowing specified initial and redirected iframe content to load.

WHAT is this pull request doing?

This PR updates the capabilities interfaces and introduces an IframeCapabilities interface, which contains a sources property. Unlike the other capabilities, the sources property is an array of strings.

How to test your changes?

The changes introduced in this PR were developed in tandem with the core updates in the linked PR. The 🎩 for both can be done using the steps in the linked core PR.

Alternatively, the steps below explain how to set up a new spin constellation that can be used to verify these changes.

schema: v1
extend: checkout-ui-extension-dev
repos:
  - cli

Save the above to a file and run spin up ./link/to/constellation.yml.

• If the core PR has not shipped, check out the rc/iframe-capabilities branch and run dev reup && dev restart in the shopify root folder.
• In the cli root, check out the rc/add-iframe-capabilities branch, and run pnpm install.
• Navigate to cli/packages/cli-kit and run pnpm install && pnpm build
• Navigate to cli/packages/cli and run pnpm install && pnpm build
• Run pnpm --global link
• Navigate to the root folder of checkout-ui-extension-dev and check out the rc/add-iframe-capability branch
• Run pnpm link --global @shopify/cli
• Run pnpm deploy
• Navigate to graphiql (there's a link in the Spin VS Code utility for shop 1) and make sure you replace shops/2/graphiql with shops/1/graphiql.
• Run the query below and confirm the populated iframe sources value for iframe.sources includes the values from the config
• Confirm the empty iframe sources, no defined iframe capability, and no defined iframe sources extensions return with empty arrays for the iframe.sources capability.
• Update any of the configs run pnpm deploy, and run the query again. Confirm your changes are reflected. If they're not, you may need to run pnpm --global link @shopify/cli in the checkout-ui-extension-dev folder again and then deploy.

Query

query Extensions($first: Int!, $after: String) {
  checkoutUiExtensions(first: $first, after: $after) {
    edges {
      node {
        name
        capabilities {
          apiAccess
          networkAccess
          blockProgress
          collectBuyerConsent {
            smsMarketing
            customerPrivacy
          }
          iframe {
            sources
          }
        }
      }
    }
  }
}

Variables

{
  "first": 10
}

Post-release steps

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes

[github-actions]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/advanced-edits
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/app-management

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	72.39% (+0.01% 🔼)	7761/10721
🟡	Branches	69.29% (+0.01% 🔼)	3817/5509
🟡	Functions	71.28%	2053/2880
🟡	Lines	72.67% (+0.01% 🔼)	7325/10080

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / payload.ts	100%	90% (-2.86% 🔻)	100%	100%

Test suite run success

1766 tests passing in 808 suites.

Report generated by 🧪jest coverage report action from e58a8b6

[jffortier]

:chef-kiss:

[rcaplanshopify]

/snapit

[github-actions]

🫰✨ Thanks @rcaplanshopify! Your snapshot has been published to npm.

Test the snapshot by intalling your package globally:

pnpm i -g @shopify/[email protected]

After installing, validate the version by running just shopify in your terminal
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.