<script type="module">
import 'https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.sdk.esm.js';
const sdk = window.ShopSDK.initialize({
apiKey: 'YOUR_CLIENT_ID',
locale: 'en',
features: { login: true },
});
const login = await sdk.create('login', {
attributes: {
buttonType: 'continue',
buttonLayout: 'standalone',
scope: 'shop_app:oauth',
},
appearance: {
variables: {
'--buttons-radius': '12px',
'--x-spacing-base': '14px',
'--font-paragraph--size': '16px',
'--font-paragraph--line-height': '20px',
},
},
onComplete(event) {
if (event.signedIn) {
console.log('User signed in:', event.email);
}
},
onError(event) {
console.error('Login error:', event.code, event.message);
},
});
document.querySelector('#login-container').appendChild(login.element);
</script>
<div id="login-container"></div>