Skip to main content

JavaScript SDK

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.

// This script must be placed in the <head> 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.
<script src="https://cdn.shopify.com/shopifycloud/shop-js/shop-pay-payment-request.js"></script>

<div id="shop-pay-button-container"></div>
<div id="shop-pay-login-container">
<input type="email" id="email-input"/>
</div>

<script>
window.ShopPay.PaymentRequest.configure({
shopId: 1,
clientId: "[REPLACE-ME]",
debug: true, // Optional parameter. When set to true, it enables debug mode, which can be useful for development and troubleshooting.
discountCodeField: false, // Optional parameter. When set to false, the discount code input field is hidden on Shop Pay checkout.
})

window.ShopPay.PaymentRequest
.createButton().render('#shop-pay-button-container');

window.ShopPay.PaymentRequest
.createLogin({emailInputId: 'email-input'}).render('#shop-pay-login-container');
</script>

Anchor to [object Object], parametersconfigure parameters

ParameterTypeDescription
shopIdNumberA required parameter. This is the ID for the shop. The shopId (integer) can be retrieved from the shop object in the Admin API.
clientIdStringA required parameter. This is the unique identifier for the client. The clientId is provided by Shopify.
debugBooleanAn 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.
onAnalyticsEventFunctionAn 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.
localeShopPayLocaleAn 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 section.
discountCodeFieldBooleanAn optional parameter. When set to false, the discount code input field is hidden on Shop Pay checkout. Defaults to true.

Anchor to AnalyticsAnalytics

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:

<script>
window.ShopPay.PaymentRequest.configure({
shopId: 1,
clientId: "[REPLACE-ME]",
onAnalyticsEvent: (event) => {
switch (event.type) {
case 'loginpromptdisplayed':
console.log('Login prompt was displayed.');
break;
case 'windowopened':
console.log('Window was opened.');
break;
case 'windowclosed':
console.log('Window was closed.');
break;
default:
console.log('Unknown event:', event);
}
}
})
</script>

Anchor to Shop Pay LoginShop Pay Login

Anchor to [object Object], parameterscreateLogin parameters

ParameterTypeDescription
emailInputIdStringA 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.

Anchor to Shop Pay buttonShop Pay button

Anchor to [object Object], parameterscreateButton parameters

ParameterTypeDescription
buyWithBooleanAn optional parameter. If true, displays the "Buy with" variant of the button. Defaults to false.

Anchor to CSS PropertiesCSS Properties

NameDescriptionConstraints
--shop-pay-button-widthThe width of the button.Default: 262px

Minimum: 120px

Minimum (buy-with): 193px
--shop-pay-button-heightThe height of the button.Default: 42px

Minimum: 40px
--shop-pay-button-border-radiusThe 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:

<style>
shop-pay-payment-request-button {
--shop-pay-button-width: 200px;
--shop-pay-button-border-radius: 0px;
}
</style>
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.

Anchor to Enabling and disabling the Shop Pay buttonEnabling 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.

// 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

// 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();
});
Was this page helpful?