> For the complete documentation index, see [llms.txt](https://docs.pagsmile.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pagsmile.com/reference/e-com-platform/shopify.md).

# Shopify

Pagsmile provides three Shopify payment apps. Choose the app that matches the payment method and checkout experience you want to offer.

<table><thead><tr><th width="234.2109375">App</th><th width="229.24609375">Payment method</th><th>Checkout experience</th><th>Installation link</th></tr></thead><tbody><tr><td>Pagsmile Card Payment</td><td>Credit card</td><td>Onsite</td><td><a href="https://apps.shopify.com/custom-credit-card">Install Pagsmile Card Payment</a></td></tr><tr><td>Pagsmile PIX Onsite</td><td>Pix</td><td>Onsite</td><td><a href="https://apps.shopify.com/pagsmile-pix">Install Pagsmile PIX Onsite</a></td></tr><tr><td>Pagsmile</td><td>Local payment methods</td><td>Offsite</td><td><a href="https://apps.shopify.com/pagsmile-payment">Install Pagsmile</a></td></tr></tbody></table>

The onsite apps allow customers to complete the supported payment flow within the Shopify checkout experience. The offsite app redirects customers to the Pagsmile-hosted payment page to complete their payment.

{% hint style="info" %}
The credit card onsite, Pix onsite, and offsite payment experiences are provided through separate Shopify apps. Install the app that corresponds to the payment experience you want to enable.
{% endhint %}

### Before you begin

Make sure that you have:

* A Shopify account and access to the store where the app will be installed.
* An active Pagsmile merchant account.
* The Merchant ID, App ID, and Security Key provided in the Pagsmile Merchant Dashboard.

### Install a Pagsmile payment app

1. Go to [shopify.com](https://www.shopify.com/) and log in to your Shopify account.
2. Open the Shopify App Store page for the app you want to install:

   * Credit card onsite: [Pagsmile Card Payment](https://apps.shopify.com/custom-credit-card)
   * Pix onsite: [Pagsmile PIX Onsite](https://apps.shopify.com/pagsmile-pix)
   * Offsite payments: [Pagsmile](https://apps.shopify.com/pagsmile-payment)

   Select **Install** on the app page.
3. On the **Choose an account** page, select the Shopify account associated with your store.

   <figure><img src="https://4142198059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgOGd5QxlX-U1mkQpVU%2Fuploads%2FWn4hy7FIUapdUXnGBGv9%2Fimage.png?alt=media&amp;token=9f88b273-866d-4942-9191-2919769e12f3" alt=""><figcaption></figcaption></figure>
4. Select the store where you want to install the Pagsmile app.
5. After installation, enter the Merchant ID, App ID, and Security Key from your Pagsmile Merchant Dashboard, and then connect the app to Pagsmile.

   <figure><img src="https://4142198059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgOGd5QxlX-U1mkQpVU%2Fuploads%2Fizl8mbiY9jLyDIO6tfSj%2Fimage.png?alt=media&amp;token=7e59b08b-4b48-419f-b34d-6da8e4b1c49a" alt=""><figcaption></figcaption></figure>
6. Turn on the **Test mode** toggle, and then click **Save**.

   * Enable **Test mode** to test the payment flow before accepting live payments.
   * Before enabling production payments, make sure that your Shopify store is not in development mode.

   <figure><img src="https://4142198059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgOGd5QxlX-U1mkQpVU%2Fuploads%2FkOyjcudx3miMagheYXBO%2Fimage.png?alt=media&amp;token=a04e7f79-ccae-42ef-82ea-07d5c54aedf4" alt=""><figcaption></figcaption></figure>
7. After activation, the selected Pagsmile payment app is ready to use.
8. Place a test order and verify that the expected payment option is displayed at checkout.

#### *Credit Card Onsite Checkout*

<figure><img src="https://4142198059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgOGd5QxlX-U1mkQpVU%2Fuploads%2FSprBAbj1ft9CQCymQBTv%2Fimage.png?alt=media&amp;token=7d981b06-21b1-4b7c-a4a3-9f52805a5727" alt=""><figcaption></figcaption></figure>

#### *Pix Onsite Checkout*

<figure><img src="https://4142198059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MgOGd5QxlX-U1mkQpVU%2Fuploads%2FFhcRAeNWTx0ZO9Gh9iGS%2Fimage.png?alt=media&amp;token=ccd98fea-12f6-427b-a03f-162a340f7a36" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Complete a successful test payment before enabling the app for production transactions. Never expose your Security Key in screenshots, storefront content, or client-side code.
{% endhint %}