Skip to main content

MixPay Shopify Plugin Deployment Tutorial

MixPay avatar
Written by MixPay
Updated over a week ago

Intro

This document will guide you through installing and configuring the MixPay payment plugin in your Shopify store.

Prerequisites

  • Get MixPay API Symbol

  • Shopify store administrator access

  • Registered MixPay merchant account

  • Get the whitelist

Part 1: Get MixPay API Symbol

Contact [email protected] with the following information to get your MixPay API Symbol:

  • "Shopify shop's website address" : URL address needs to end with myshopify.com

  • Company name

  • Company registration number

  • Company address

  • Country of registration

  • Operational region (worldwide, specific region, or country)

  • Website or App name

  • Your MixPay UUID

We will review your request and send you the MixPay API Symbol after verification.

Part 2: Shopify store administrator access

Step 1. Add custom payment method

"Settings" -> "Payments" -> "Create customer payment method" -> "Set up manual payment method"

MixPay Crypto Payment
Accept payments in multiple cryptos. Support any wallet payment.  

💁♀️ BTC, ETH, USDT, USDC, DOGE, LTC, BNB, TRX, XRP, SOL, XMR, POL, TON ✅  

⚠️ Only the network corresponding to the crypto on the payment page is supported, and payment to other networks will result in lost funds.
After clicking the “MixPay” button above, you will be redirected to MixPay - Payment Gateway to complete your purchase securely.  
[Payment tutorial with on-chain wallet]  
Click on "Go to MixPay checkout" 
Select your payment method as "Crypto" 
Choose the payment currency 
Choose the payment method 
Pay with any Web3 wallet or exchange 
After successful payment, your order will show "Your order has been confirmed"  

[Payment tutorial with Binance Pay | KuCoin Pay | Gate Pay ]  
Click on "Go to MixPay checkout" 
Choose your payment method as "Binance Pay | KuCoin Pay | Gate Pay" 
Click on the payment button 
Log in to your CEX account and complete the payment 
After successful payment, your order will be displayed as "Your order is confirmed".

Step 2. Install Shopify UI Extension

Installation Method

The MixPay plugin is currently deployed as a Custom App, requiring each merchant to install it independently in their Shopify store. This approach offers:

  • ✅ Full control over plugin code and configuration

  • ✅ Support for Shopify Checkout UI Extensions

  • ✅ No waiting for Shopify review

  • ✅ Customizable features

1: Create Shopify Partner Account

  1. Visit Shopify Partners (free to create)

  2. Click Join now to register

  3. Fill in personal/company information and complete registration

  4. Log in to Partner Dashboard

2: Prepare Plugin Code

2.1 Clone or Download Plugin Code

Clone the plugin repository from GitHub:

# Clone repository git clone https://github.com/MixPayProtocol/mixpay-payment-shopify.git cd mixpay-payment-shopify  # Or download and extract the ZIP file from GitHub

2.2 Install Dependencies

npm install

2.3 Configure MixPay API

Edit extensions/mixpay-payment-block/src/Checkout.jsx file, Find the following line and replace it with your MixPay API Symbol( Get it from Part 3):

// Replace with your MixPay API Symbol const MIXPAY_PLUGIN_MERCHANT_ID = "your-mixpay-api-symbol";

3: Deploy to Shopify

3.1 Login to Shopify CLI

npm run shopify auth login

Follow the prompts to complete login in your browser.

3.2 Connect to Your Store

npm run shopify app config link

Select:

  • Your Partner organization

  • Your development store (or production store)

3.3 Deploy App

npm run shopify app deploy -- --reset

Visit the Dev dashboard, Go to Settings and Apps and channels :

Will open the Dev dashboard, and we can see our UI Extension is listed here:

4: Install it to your Shopify Store

  1. Go to the dev dashboard;

  2. Choose the APP you just created;

  3. Click Install app;

  4. Click Select store to choose the store to install;

  5. Click Install app;

  6. Authorize the required permissions;

Click Install:

About permission:

  • Personal data permission is the requirement for creating shopify ui extension.

  • Order data permission, is for MixPay plugin updates the order status when user paid.

Step 3: Custom UI

After installed, next we will config our UI Extension in order to take effect:

1: Thank you Page

2: Order status page

Click the move down button:

Move down to the main area, and click Save:

Double check if everything is in the right place:

Part 3：Registered MixPay merchant account

Step 1: Register on dashboard.mixpay.me

Step 2: Find your UUID on dashboard settings

Part 4: Get the whitelist

Step 1: Get the Client ID and Client Secret.

Go to the dev dashboard, and pass the following credentials

- Client ID: Record this ID for later configuration

- Client Secret: Click to display and record, keep it secure

Step 2: Get the whitelist.

  • "UUID": Your MixPay account UUID

  • "Settlement Currency": Suggest: USDT(BNB Smart Chain), USDT(Solana) or USDT(TRON)

  • "Shopify shop's website address" : URL address needs to end with myshopify.com

  • "Client ID": get it from dev dashobard

  • "Client Secret": get it from dev dashobard

Please send the above information to: [email protected]

We will review your request and enable the services after verification.

Test Payment Flow

6.1 Create Test Order

  1. Add products to cart on store frontend

  2. Go to checkout page

  3. Select MixPay as payment method

  4. Complete the order (don't pay with MixPay yet)

6.2 Verify Payment Button

After completing the order, you should see the MixPay payment button on:

- Thank You page: Order confirmation page

- Order Status page: Order details page in customer account

Clicking the Go to MixPay checkout button should redirect to the MixPay payment page.

After finishing the MixPay payment, you should see:

How to activate Binance Pay, KuCoin Pay, and Gate Pay?

To activate Binance Pay, KuCoin Pay, or Gate Pay, please provide the following information (you may activate all or just some of them):

  1. The name(s) of the pay method(s) you wish to activate (e.g., Binance Pay, KuCoin Pay, Gate Pay)

  2. Company name

  3. Company registration number

  4. Company address

  5. Country of registration

  6. Operational region (worldwide, specific region, or country)

  7. Website or App name

  8. Your MixPay UUID

Please send the above information to: 📧 [email protected]

We will review your request and enable the services after verification.

Note: If you choose not to activate these services, it will not affect your ability to receive payments via on-chain crypto transfer.

FAQ

Q1: Permission error during deployment?

A: Ensure your Partner account has permission to access the app and is correctly connected to the store.

Q2: UI Extension not displaying?

A: Check the following:

  1. Confirm App Block has been added in Checkout settings

  2. Confirm order uses MixPay payment method

  3. Check browser console for error messages

  4. Confirm MIXPAY_PLUGIN_MERCHANT_ID is configured correctly

Q3: Payment button not responding when clicked?

A:

  1. Check browser console network requests (with debug set to true in Checkout.jsx)

  2. Confirm MixPay API Symbol is configured correctly

  3. Confirm merchant is configured in MixPay backend

Q4: How to update the plugin?

A:

  1. Pull latest code or download new version

  2. Run npm install to update dependencies

  3. Run npm run shopify app deploy to redeploy

  4. No need to reinstall the app

Development Mode

If you need to modify the plugin code, you can use development mode:

npm run shopify app dev

This will start with a local development server for real-time preview of changes.

Technical Support

If you encounter any issues, please contact:

- MixPay Technical Support: [[email protected]]

- Documentation: [MixPay Developer Docs]

Did this answer your question?