Shopify & Crypto: Mastering Custom 'Pay with Crypto' Buttons for Enhanced Checkout

Hey everyone! Your friendly Shopify migration expert here, diving into another fascinating discussion from the community forums. This time, we're talking about something that's gaining a lot of traction: integrating cryptocurrency payments directly into your Shopify store. It's a complex area, balancing the allure of new tech with the practicalities of a smooth checkout experience. Let's dig into a recent thread that perfectly illustrates some of the challenges and solutions.

The Quest for a Custom "Pay with Crypto" Button on Shopify

Our story starts with max.james, a store owner who wanted to add a custom "Pay with Crypto" button to his Shopify cart page using MakePay.io. His goal was clear: let customers click the button, grab the cart's subtotal, create a MakePay crypto payment session, and then redirect the customer to a hosted checkout page to complete the payment.

Sounds straightforward, right? Well, as many of us know, custom integrations rarely are! max.james found that while his button appeared correctly and the click event was working, the MakePay checkout wasn't being created or opened. Instead, he hit a generic error: "Your account setup is not completed. Please try again."

Here's the basic button structure he was using:

  Pay with Crypto

He laid out the expected flow:

1. Customer clicks Pay with Crypto on the cart page.
2. Shopify cart data is fetched.
3. The cart subtotal is converted from Shopify cents to a normal price amount.
4. A MakePay payment / hosted checkout link is created.
5. Customer is redirected to MakePay checkout to complete the crypto payment.

The issue was that steps 4 and 5 weren't completing, leaving customers stranded and payments uninitiated.

Shopify's Native Crypto Solutions: A Simpler Path?

Before diving into the complexities of custom integrations, it’s worth noting that Shopify itself offers direct support for cryptocurrency payments through various payment gateways. As jpaylor rightly pointed out in the thread, Shopify’s own documentation highlights several options for accepting crypto at checkout. These often integrate seamlessly, reducing the need for extensive custom coding.

For many merchants looking to simply accept crypto, utilizing Shopify's approved payment providers is the most straightforward and secure route. It minimizes development overhead, ensures compatibility, and leverages Shopify's robust infrastructure for payment processing and order management. However, for those seeking self-custody solutions or specific integrations like MakePay, a custom approach becomes necessary.

Unpacking the "Account Setup Not Completed" Error: Client-Side vs. Server-Side

The generic error "Your account setup is not completed. Please try again" often points to an issue with how the payment gateway's API is being called. In max.james's case, the core question he raised was crucial: "Should the MakePay API request be handled through a backend / app proxy instead of directly inside Shopify theme code?"

The answer, for most secure and reliable payment integrations, is a resounding yes. Here’s why:

• Security: Direct API calls from client-side JavaScript (within your Shopify theme) expose your API keys and sensitive credentials to anyone inspecting your page's source code. This is a major security vulnerability. A backend server (or Shopify App Proxy) can securely store and use these keys.
• Complexity & State Management: Creating a payment session, especially with external services, often involves multiple steps, data validation, and error handling that are better managed on a server. The server can maintain the state of the payment request, handle retries, and ensure data integrity.
• Shopify's Architecture: Shopify's checkout process is highly secure and controlled. While you can add custom elements to the cart page, initiating a payment flow that bypasses or significantly alters Shopify's native checkout requires careful consideration.

The Recommended Flow for Custom Crypto Checkout Integration

For a robust custom "Pay with Crypto" solution on Shopify, the ideal flow involves a server-side component, typically implemented via a Shopify App Proxy or a dedicated custom Shopify app. Here’s a refined process addressing max.james's questions:

1. Customer Clicks "Pay with Crypto" (Cart Page): The button on the cart page triggers a JavaScript function.
2. Fetch Cart Data & Initiate Backend Request: This JavaScript function securely sends the current Shopify cart's subtotal, line items, and customer information (if available) to your custom backend endpoint (e.g., an App Proxy URL).
3. Backend Creates MakePay Payment Session:
   • Your backend receives the cart data.
   • It securely uses your MakePay API keys to create a payment session with MakePay, passing the cart subtotal and any other required details.
   • Crucially, your backend should also create a Shopify Draft Order at this stage. This links the crypto payment to a pending order in Shopify, making reconciliation much easier. You can pass the Draft Order ID to MakePay as a reference.
   • MakePay returns a hosted checkout URL or embedded checkout details to your backend.
4. Redirect Customer: Your backend sends the MakePay checkout URL back to the client-side JavaScript, which then redirects the customer to complete the crypto payment.
5. Webhook for Payment Confirmation:
   • Once the customer completes the payment on MakePay, MakePay sends a webhook notification to a specific endpoint on your backend.
   • Your backend receives this webhook, verifies the payment, and then uses the Shopify Admin API to convert the previously created Draft Order into a confirmed Order, marking it as paid and fulfilling it as appropriate.
   • This step is critical for ensuring Shopify's inventory and order records are updated correctly.

Key Considerations for a Seamless Integration

• Shopify App Proxies: These are powerful tools for extending Shopify's functionality with custom server-side logic without needing a full-blown app. They allow you to serve content from your own server under a Shopify URL (e.g., yourstore.myshopify.com/apps/your-proxy-path), making API calls secure and seamless.
• API Requirements for MakePay: Max.james's question about "what fields are required" is vital. You'll need to consult MakePay's API documentation to understand the minimum required parameters for creating a payment session (e.g., amount, currency, callback URL, reference ID).
• Error Handling & User Experience: Implement robust error handling on both client and server sides. If MakePay returns an error, provide clear, user-friendly feedback to the customer rather than a generic message.
• Testing, Testing, Testing: Thoroughly test all scenarios: successful payments, failed payments, abandoned payments, and how your Shopify orders are updated in each case.

For merchants looking to establish a new online presence or migrate an existing store to a platform that offers such extensive customization capabilities, Shopify remains an unparalleled choice. Its robust API and app ecosystem empower developers to build sophisticated integrations like this, tailored to unique business needs.

Conclusion: Balancing Innovation with Practicality

Integrating custom crypto payment buttons on Shopify can significantly enhance your store's appeal to a tech-savvy audience. However, it's a task that requires careful planning, secure development practices, and a deep understanding of both Shopify's platform and the chosen payment gateway's API. While Shopify offers native solutions for many, a custom approach, when executed correctly with server-side logic and webhooks, provides the flexibility for unique merchant requirements.

At Shopping Cart Mover, we specialize in navigating these complex integrations and ensuring your e-commerce platform is optimized for performance and innovation. Whether you're migrating to Shopify or enhancing your current store with advanced features, our expertise can help you avoid common pitfalls and achieve a seamless, secure solution.