How To Connect Shopify With Stripe Checkout Using External Script?

To implement an external Stripe Checkout script for a Shopify store while bypassing Shopify Payments, you'll need to carefully integrate Stripe’s Checkout flow with Shopify’s cart and order information. Below are the steps to achieve this:

Key Considerations :

• Shopify's API: Use Shopify's Storefront API or Admin API to fetch cart details, order information, and update orders after payment is processed through Stripe.
• Stripe Checkout: Use Stripe's prebuilt hosted checkout page for a secure and compliant payment flow.
• Hosting the External Script: Yes, the external script needs to reside on a separate server (e.g., AWS, Heroku, or any hosting provider). This server will communicate with both Shopify and Stripe.

Step 1: Create a Custom Payment Button

In the Shopify checkout or cart page, replace the default payment button with a custom one that triggers your external script.

Edit Shopify Theme:

• Go to Online Store > Themes.
• Edit the relevant template file (e.g., cart.liquid or checkout.liquid).
• Replace the existing payment button with a custom button:

<button id="custom-payment-button" class="btn">Pay with Stripe</button>        

Attach an Event Listener:

document.getElementById('custom-payment-button').addEventListener('click', async () => {
    const cartData = await fetch('/cart.js').then(res => res.json());
    const response = await fetch('https://your-external-server.com/checkout', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(cartData),
    });
    const { checkoutUrl } = await response.json();
    window.location.href = checkoutUrl; // Redirect to Stripe Checkout
});        

Step 2: External Script for Stripe Checkout

Your external script will:

1. Receive cart data from Shopify.
2. Receive cart data from Shopify.
3. Redirect the user to Stripe’s hosted checkout page.

Sample External Script (Node.js/Express):

const express = require('express');
const stripe = require('stripe')('your-stripe-secret-key');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.post('/checkout', async (req, res) => {
    const cartData = req.body; // Received cart data from Shopify

    // Prepare Stripe line items
    const lineItems = cartData.items.map(item => ({
        price_data: {
            currency: 'usd',
            product_data: {
                name: item.title,
            },
            unit_amount: Math.round(item.price * 100), // Stripe expects the amount in cents
        },
        quantity: item.quantity,
    }));

    // Create Stripe Checkout Session
    const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: lineItems,
        mode: 'payment',
        success_url: 'https://your-shopify-store.com/success',
        cancel_url: 'https://your-shopify-store.com/cancel',
    });

    res.json({ checkoutUrl: session.url });
});

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

Step 3: Handling Post-Payment

Once the payment is successful, Stripe will redirect the user to the success_url. To complete the order in Shopify:

• Shopify Admin API: Use the Shopify Admin API to mark the order as paid:

const shopifyAdminUrl = 'https://your-store.myshopify.com/admin/api/2023-01/orders.json';
const orderData = {
    order: {
        id: cartData.order_id,
        financial_status: 'paid',
    },
};

await fetch(shopifyAdminUrl, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Access-Token': 'your-shopify-access-token',
    },
    body: JSON.stringify(orderData),
});        

• Alternatively, listen to Stripe Webhooks to capture payment status and update Shopify accordingly.

The above steps will help you connecting the Shopify to external Stripe using Script.

Looking to Build or Upgrade Your E-commerce Store?

?? Contact us today at [email protected]

?? Visit us at: https://w3nuts.co.uk/