Back to install picker

Install on Shopify

Lightweight drop-in. Paste a snippet into the cart page; Tiyo takes payment, Shopify keeps the cart and the order.

Pick this path if…
The merchant already runs a Shopify storefront and you want Tiyo to handle payments without rebuilding their cart. Customer clicks Pay with Tiyo Pay, lands on Tiyo's hosted page, comes back. The merchant marks Shopify orders paid manually after the Tiyo receipt arrives.
  1. 1
    Find the merchant's external ID
    In the Tiyo Pay dashboard, open Settings → Business info. Copy the brz_mer_… string near the top of the page. You'll paste it into the snippet in step 4.
  2. 2
    Open the Shopify theme code editor
    Shopify Admin → Online Store → Themes → on the live theme click Actions → Edit code.
  3. 3
    Locate the cart's checkout button
    In the file tree, open sections/main-cart-footer.liquid (most modern themes) or templates/cart.liquid (legacy themes). Find the <button name="checkout">…</button> element. That's the standard Shopify checkout button.
    Different themes name this file differently. If you can't find the button, search the codebase for name="checkout" — there's exactly one match in every Shopify theme.
  4. 4
    Paste the Tiyo snippet
    You can either replace the Shopify checkout button (Tiyo becomes the only option) or add alongside it (customer picks). Paste this code at the spot you chose:
    <button id="tiyo-pay" type="button" class="button button--primary">
  Pay with Tiyo Pay
</button>
<script
  src="https://tiyopay.vercel.app/tiyo-shopify.js"
  data-tiyo-merchant-id="brz_mer_REPLACE_ME"
  data-tiyo-return-url="{{ shop.url }}/pages/thank-you"
  defer
></script>
    Replace brz_mer_REPLACE_ME with the value you copied in step 1.
  5. 5
    Create a thank-you page
    Shopify Admin → Online Store → Pages → Add page. Title: Thank you. Handle: thank-you. Body: whatever you want the customer to see after a successful Tiyo payment. Save.
    The data-tiyo-return-url in step 4 points here. After Tiyo approves the payment, that's where the customer lands.
  6. 6
    Test with a real cart
    On the storefront, add any product to the cart, click Pay with Tiyo Pay. You'll be redirected to tiyopay.vercel.app/pay/…. Run a real card (or sandbox card if the merchant's in test_mode). On approval you should land on /pages/thank-you.
  7. 7
    Reconcile the Shopify order
    Shopify created an order at the moment the customer added items to the cart, regardless of payment outcome. Tiyo writes the Shopify cart token into transactions.reference as shopify-cart:<token>. Find the matching Tiyo transaction, copy the cart token, then in Shopify Admin → Orders, find the order with that cart token and click Mark as paid.
    For high-volume merchants this is busywork. The next-tier integration is a Shopify Payments App that auto-syncs — that's a multi-week project; ask if you need it.
Limitations of this lightweight integration
  • Shopify still creates the order regardless of payment outcome — you mark it paid manually.
  • Refunds are processed through Tiyo, not Shopify. You'll then have to update the Shopify order to reflect the refund.
  • Inventory is decremented by Shopify when the customer adds to cart, not by Tiyo when they pay.
  • Shopify gift cards / discount codes are not applied — the snippet reads the post-discount total from cart.total_price, but Shopify discount codes that activate at checkout never run because checkout is skipped.

For full Shopify Payments integration (Tiyo appearing as a native payment method inside Shopify checkout, automatic order-paid sync, refund round-trip), a Shopify Payments App is required. That's a multi-week Partner-account / app-review project. Talk to Tiyo Pay support if you need it.