Hey, we’re building an app using checkout extensions. One of our extensions (Order bump) needs access to the Storefront API.
The extension does effectively render but we don’t have the capability api_access even though we activated it in our configuration. The weird part is that the network_access is correctly applied.
extensions/order-bump/shopify.ui.extension.toml:
type = "checkout_ui_extension"
name = "Order Bump"
extension_points = [
'Checkout::Dynamic::Render'
]
[capabilities]
network_access = true # this gets enabled
api_access = true # but this doesnt
extensions/order-bump/src/index.tsx:
import { useState, useEffect } from 'react';
import {
useExtensionApi,
render,
View,
Button,
} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => <App />);
function App() {
const api = useExtensionApi();
const { query, extension } = api;
console.log(extension.capabilities.current) // ['network_access'] → api_access is missing
return (
<Button
kind="primary"
onPress={async () => {
const res = await query(`
{
shop {
id
name
}
}
`); // will throw an error because we don't have access to the Storefront API that should be enabled
console.log('query');
console.log(res);
}}
Sample button
</Button>
);
}