How can I integrate a custom external Stripe checkout script with Shopify?

Below is an overview of one approach to implementing this custom integration:

---

1. Overview

Since your client doesn’t want to use Shopify Payments, you’ll have to handle payment processing externally using Stripe. Essentially, when a customer clicks the payment button on the Shopify storefront, your custom code should:

• Capture the final order/payment information from Shopify.
• Call your own external server (which could be a custom Shopify app or an endpoint hosted outside Shopify) that creates a Stripe Checkout Session using the Stripe API.
• Redirect the customer to the Stripe Checkout URL so that they can complete the payment.

---

2. Capturing Order Details & Triggering the External Script

• Custom Payment Button:
  You’ll need to override or inject a custom payment button (or link) in the Shopify storefront. The button could trigger an AJAX call or a simple redirect to your external endpoint.

• Transmitting Order Information:
  Depending on your setup, you might either have the order details already available on the Shopify page (for instance, using Shopify’s Liquid templates) or fetch them via the Shopify Admin API. These details will then be sent to your server to create the checkout session.

• Using Shopify API:
  You may find the Shopify API useful to retrieve order details if necessary. However, the payment processing itself is handled via Stripe’s API, not Shopify’s.

---

3. Setting Up the External Script

• Server Location:
  It is recommended that your external script run on a secure server (it might be hosted separately from Shopify). This is important because the script will be making secret-key calls to Stripe’s API to create checkout sessions.

• Stripe Checkout Session Creation:
  From your external script, make a call to Stripe’s Checkout Sessions API endpoint (for example, POST/v1/checkout/sessions) to create a payment session. Once the session is created, you can redirect the customer to the provided URL.

Below is a sample implementation in Node.js demonstrating how you might create the session:

JAVASCRIPTCopied
const express = require('express');
const stripe = require('stripe')('your-stripe-secret-key');
const app = express();

app.use(express.json());

app.post('/create-checkout-session', async (req, res) => {
  try {
    // Build line items based on the order data received from Shopify
    const { line_items } = req.body; // e.g., [{ price: 'price_xxx', quantity: 1 }]

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items, // Use the Shopify order details to construct these
      mode: 'payment',
      success_url: 'https://your-domain.com/success?session_id={CHECKOUT_SESSION_ID}',
      cancel_url: 'https://your-domain.com/cancel',
    });

    // Return the checkout URL
    res.json({ url: session.url });
  } catch (error) {
    console.error('Error creating Stripe Checkout session:', error);
    res.status(500).send('Internal Server Error');
  }
});

app.listen(3000, () => console.log('Server listening on port 3000'));

• Redirection:
  Once the external endpoint returns the checkout URL, your frontend (triggered by the custom payment button) should redirect the user to that URL.

---

4. Resources to Guide You

• Stripe Checkout Quickstart:
  Refer to the Stripe Checkout Quickstart Guide which walks you through setting up a basic Checkout integration.

• Stripe API Reference:
  The Stripe API docs for Checkout Sessions provide detailed information on available parameters and endpoints.

• Shopify App Development:
  If you decide to build a private or custom Shopify app for this integration, the Shopify Partners Program and Shopify App Store documentation are useful resources.

---

5. Summary Answers to Your Questions

• How do you program the payment button?
  The button on your Shopify store should trigger a call to your external script (via a redirect or an AJAX request). This script creates the Stripe Checkout Session and returns a URL, after which you redirect the customer to it.

• Are there resources I can read?
  Yes. The Stripe Checkout Quickstart and API documentation are the primary resources. Additionally, Shopify’s development documentation is useful if you need to extract order details or build a custom app.

• Do I use the Shopify API?
  You might need the Shopify API to retrieve order data, but the actual payment process is handled through your external script using Stripe’s API.

• How do I call the external script?
  The call can be triggered on the click of the payment button. Whether you perform a client-side redirect or an AJAX call depends on your implementation. After receiving the Stripe Checkout URL from your external endpoint, perform a redirect to that URL.

• Does the external script need to reside on a different server?
  Yes, it’s best to host your external script on a secure server. This ensures that you can safely use your secret Stripe API keys and handle payment logic outside of Shopify’s environment.

---

By following this approach and leveraging the resources provided, you should be able to implement a custom integration that bypasses Shopify Payments in favor of Stripe Checkout.