--- title: JavaScript SDK description: >- Load the Shop Pay button and login web components into your site using the JavaScript SDK. api_name: commerce-components source_url: html: 'https://shopify.dev/docs/api/commerce-components/pay/javascript-sdk' md: 'https://shopify.dev/docs/api/commerce-components/pay/javascript-sdk.md' --- # JavaScript SDK **Note:** This API is **only available to select merchants and partners** using third-party checkout solutions. For more information, contact [our enterprise sales team](https://www.shopify.com/solutions/shop-pay/enterprise#contact-sales). Shopify provides **Shop Pay button** and **Shop Pay Login** Web Components that you can add to your store. Use the following code to load the script into your webpage from the CDN and embed the components. ```javascript // This script must be placed in the of your site on any pages where Shop Pay components exist. // In most cases this will be in your checkout, however it may also be included on product and/or cart pages where necessary.

``` *** ## `configure` parameters | **Parameter** | **Type** | **Description** | | - | - | - | | `shopId` | Number | A required parameter. This is the ID for the shop. The `shopId` (integer) can be retrieved from the `shop` object in the [Admin API](https://shopify.dev/docs/api/admin-graphql/latest/queries/shop). | | `clientId` | String | A required parameter. This is the unique identifier for the client. The `clientId` is provided by Shopify. | | `debug` | Boolean | An optional parameter. When set to `true`, it enables debug mode, which will console log additional information that can be useful for development and troubleshooting. This should be omitted in production environments. | | `onAnalyticsEvent` | Function | An optional parameter. This is a callback function that will be invoked with specific `Event` objects. This can be useful for monitoring user interactions and gathering data. See below for supported events. | | `locale` | ShopPayLocale | An optional parameter. Specifies the desired locale for the checkout experience. Expects a valid ISO language code, optionally followed by an ISO country code. Defaults to English (`en`). For a list of supported locales, see the [Supported Locales List](https://shopify.dev/docs/api/commerce-components/pay/localization#supported-locales-list) section. | ### Analytics The following events are currently supported: * `loginpromptdisplayed`: This event is triggered when the Shop Pay login modal prompt is displayed. * `windowopened`: This event is triggered when the Shop Pay popup checkout window is opened. * `windowclosed`: This event is triggered when the Shop Pay popup checkout window is closed. Here's an example of how you might handle these events in your `onAnalyticsEvent` callback: ```javascript ``` *** ## Shop Pay Login ### `createLogin` parameters | **Parameter** | **Type** | **Description** | | - | - | - | | `emailInputId` | String | A required parameter. The unique identifier of the email input element to listen to. This is also used to anchor the login modal to an element. | *** ## Shop Pay button ### `createButton` parameters | **Parameter** | **Type** | **Description** | | - | - | - | | `buyWith` | Boolean | An optional parameter. If true, displays the "Buy with" variant of the button. Defaults to `false`. | ### CSS Properties | **Name** | **Description** | **Constraints** | | - | - | - | | `--shop-pay-button-width` | The width of the button. | Default: `262px` Minimum: `120px` Minimum (`buy-with`): `193px` | | `--shop-pay-button-height` | The height of the button. | Default: `42px` Minimum: `40px` | | `--shop-pay-button-border-radius` | The border radius of the button. | Default: `4px` | The following example styles the button with the default height of 42 pixels, a width of 200 pixels, and a border radius of 0 pixels: ```javascript ``` **Note:** Upon invoking the `.render` method, the button is optimistically rendered while an HTTP request is dispatched to Shopify to check the availability of Shop Pay in the configured shop. If the Shopify Payments setup is incomplete or Shop Pay is deactivated in the payment settings, the button element is removed from the DOM. ### Enabling and disabling the Shop Pay button If you need to disable and re-enable the Shop Pay button for specific user interactions or other conditions in your application, you can use the following methods. ```javascript // Disable the Shop Pay button window.ShopPay.PaymentRequest.Buttons.disable(); // Re-enable the Shop Pay button window.ShopPay.PaymentRequest.Buttons.enable(); ``` Example: Disable the Shop Pay button until a valid variant is selected ```javascript // Disable the payment request button to prevent a customer from opening Shop Pay before a variant is selected window.ShopPay.PaymentRequest.Buttons.disable(); const addProductToCartButton = document.getElementById('addProductToCartButton'); addProductToCartButton.addEventListener('click', function() { // Once the selected valid variant has been successfully processed, re-enable the button window.ShopPay.PaymentRequest.Buttons.enable(); }); ``` ***