> NOTE: This document is **only applicable to select merchants and partners** using 3rd party checkout solutions. For more information, contact [our enterprise sales team](https://www.shopify.com/solutions/shop-pay/enterprise#contact-sales).
## Overview
Shop Component introduces a Shop Pay accelerated checkout experience to a merchant's existing ecommerce site. This guide describes the supported customer journeys, information on what can be customized, and usage guidelines for the Shop Pay payment request button.
To learn more about the API, and to start implementing it in your store, refer to the [Shop Component API overview](/docs/api/commerce-components/pay).
## Customer Touch-points
There are three customer touch-points:
- Shop Pay payment request button
- Shop Pay email recognition
- Shop Pay popup checkout
### Payment Request Button
The payment request button is the Shop Pay button that a user can press to initiate a Shop Pay popup checkout. Place this button on your cart, guest checkout, or product detail page to indicate to Shop Pay account holders that they can use Shop Pay to check out the item or the cart.
This button comes in two varieties:
1. A base version, with only a logo
2. `buy-with`, where the logo is prefixed with "Buy with"
### Email Recognition
Some customers might not be aware that they have a Shop Pay account. The email recognition component recognizes existing Shop Pay emails entered into your guest checkout, and invites the customer to authenticate for an accelerated checkout experience. Customers can opt out of this if they wish.
### Shop Pay Checkout Popup
The Shop Pay Checkout is served to your customers in a popup, providing a similar experience to other accelerated checkout options. If a Shop Pay cookie is present, then the customer can check out in one tap after reviewing their information. If a Shop Pay cookie isn't present, then customers can log in to their Shop Pay account.
### Thank-You Page and Order Confirmation E-mail
Your thank-you page and order confirmation e-mail provide continuity to the customer's checkout experience. It's a good opportunity to confirm payment and address information, and to provide a link to the customer's Shop Pay account where a customer can manage their installments payments.
## Customer Experience
The customer experience can be broken down into the following stages:
- **Trigger**: How does a customer choose Shop Pay?
- **Checkout**: What happens after a customer chooses Shop Pay? What do they see and do?
- **Post-payment**: What happens after payment?
### Trigger
The customer experience is triggered in the following ways:
- Using the Shop Pay payment request button
- Through email recognition
#### Shop Pay Payment Request Button
The flow the customer experiences after they click the Shop Pay button depends on whether the browser has an active Shop Pay cookie.
**With an active cookie:**
The popup pops, and contains the customer's vaulted information. The customer can then review or edit their information before proceeding to **Pay now**.
**Without an active cookie:**
The popup pops with a login flow. The customer needs to log in or sign up to Shop Pay and authenticate using a password or passkey.
If the customer logs in and has vaulted information, then the information loads.
If the customer signs up, then the checkout fields load for the user to enter their checkout information.
#### Email Recognition
When a customer enters an email address associated with a Shop Pay account into your guest checkout, they experience the following:
A modal pops asking the customer to authenticate using email, SMS, or a passkey. The customer then has three options:
- Complete authentication challenge.
- Close the modal using the close icon.
- Press or click outside of the modal. If the user clicks outside of the modal, then they can re-load the modal using the icon that appears in the email field.
After the customer authenticates, the popup populates the customer's vaulted information.
If the customer closes the modal at any time, then they can re-load it by clicking the "Show Modal" icon.
#### Show Modal
The Show modal icon doesn't come with any inherent styling, so it's up to the merchant to place this button appropriately. It's recommended to place this within the email entry field, aligned to the right side, with appropriate padding.
It's important to test the implementation with both long email addresses and password managers that inject their own icons into the email address field to ensure that neither of these conflicts with your implementation.
### Checkout
When the customer has an active checkout, they can review their order and complete a few actions:
- Add, update, or delete a vaulted address and payment method
- Choose their preferred shipping method
- Enter discount codes
- Opt out of Shop Pay and return to your guest checkout using the **Checkout as guest** link
- Proceed with payment using the **Pay now** button
Some customers might have incomplete vaulted information. For example, they might be missing a payment method. These customers are able to add any missing information in the checkout popup.
| # | Section | Description |
|---|---|---|
| 1 | **Checkout logo** | Your brand's logo, which helps to instill trust in the purchase. [Review our logo specs](/#checkout-logo). |
| 2 | **Vaulted information** | All the information stored in a customer's Shop Pay account. Each section opens to reveal relevant actions.
This section is replaced with the login card if the customer isn't yet authenticated.
If the customer doesn't have a complete account, the required input fields will display below any vaulted information. |
| 3 | **Order summary** | Includes the order total, line items, a discount entry field, and anything affecting the total like shipping, taxes, and discounts. |
| 4 | **Pay now button** | Triggers the payment when the customer is comfortable to proceed. |
| 5 | **Checkout as guest** | Allows the customer to cancel the Shop Pay payment, close the popup, and return to your guest checkout. |
| 6 | **Overlay** | A dark background placed on top of your site to draw greater focus to the popup. |
### Post-Payment
After the user presses **Pay now**, the popup displays a spinner and a **Your order's being processed** message.
After the payment is successfully processed, the popup closes. You should show the customer their order confirmation. For example, you might direct the customer to your store's **Thank you** page.
As part of supporting installments purchases, it's recommended that you inform the user they paid with installments,
and provide a link to their account URL where they can manage their installments payments. The payment type and
account URL are provided in the `paymentComplete` event's `.processingStatus` field for completed receipts. See [ShopPayPaymentRequestReceiptCompleted](/docs/api/commerce-components/pay#shoppaypaymentrequestreceiptcompleted). The thank you page and order confirmation e-mail are the best places to include this information.
## Specs and Customization
The Shop Pay experience is something that millions of customers are familiar with. Changes to this core UX/UI runs the risk of diminishing trust and creating uncertainty during a checkout. However, there are a few customizations available to you to make the components feel like a part of your customer experience you've designed and built.
### Button Styles
To better match your existing button styles, you can use the following properties to customize the Shop Pay payment request button:
- Width
- Height
- BorderRadii
- Variant
For a full list of properties and constraints, refer to the documentation for the `shop-pay-payment-request-button`.
You can't change the following attributes:
- `fontFamily` – the font used for "Buy with" is part of the Shop Pay branding
- Logo size
- Logo position
- Button color
- Logo color
If you place the button on a surface that has low contrast with the button background, the button automatically renders a `border: 1px solid rgba(255, 255, 255, 0.50)` to give the button definition.
### Button Placement
Like other accelerated checkout buttons, we recommend that you add the Shop Pay button to the first step of a checkout, and converting pages like the cart or product page.
We recommend that you use the **Buy with** button variant when the button will trigger a checkout for a specific item or collection. For example, you might use this button on product pages. We recommend that you use the logo-only variant on your cart and guest checkout, where Shop Pay acts as a checkout option.
### Checkout Logo
You can customize the Shop Pay popup checkout's appearance by adding your own logo to the top section of the popup.
The logo will appear centrally in a card with `21px` padding.
Horizontal logotypes work best as they provide brand recognition without pushing the checkout too far down the popup or mobile screen.
For reference, the logo in this screenshot is `246px` x `45px`.
### Email Recognition Modal
The email recognition modal is a Shop Pay branded experience and isn't customizable.
The modal icon that appears in your email field will automatically render in `#ffffff` or `#000000` based on the field color for maximum contrast.
## Additional Resources
