# UPIDrop — Shopify Integration Guide

Zero-Fee direct UPI payments for your Shopify store with SmartTrack automated payment reconciliation.

---

## Overview

UPIDrop connects directly to your Indian bank account via UPI (Google Pay, PhonePe, Paytm, BHIM, CRED).
With UPIDrop on Shopify:
- **0% Transaction Fees** — Keep 100% of your order value.
- **Direct Settlement** — Customer funds transfer directly to your merchant VPA.
- **SmartTrack Auto-Confirmation** — Automated UTR and webhook verification.

UPIDrop offers three integration routes on Shopify:

| Method | Best For | Technical Complexity | Setup Time |
| :--- | :--- | :--- | :--- |
| **Method 1: Manual Payment + Thank You Script** | Quick checkout redirect for standard Shopify stores | Low | ~5 minutes |
| **Method 2: Liquid "Pay with UPI" Button** | Custom product pages and express checkout | Low | ~10 minutes |
| **Method 3: Native Payments App Extension** | Shopify Partners and custom payment app builders | Advanced | ~30 minutes |

---

## Method 1: Manual Payment Method + Order Status Script (Recommended)

This method lets buyers choose "Pay via UPI" in your Shopify standard checkout. When the order is placed, the thank-you page launches the UPIDrop checkout or displays a payment trigger.

### Step 1: Add UPI as a Manual Payment Method in Shopify
1. Log in to your **Shopify Admin**.
2. Navigate to **Settings** → **Payments**.
3. Scroll to **Manual payment methods** and click **Add manual payment method** → **Create custom payment method**.
4. Configure the fields:
   - **Name of the payment method**: `Pay via UPI (GPay, PhonePe, Paytm, CRED)`
   - **Additional details**: `Scan the QR code or pay via any UPI app. Instant payment confirmation without fees.`
   - **Payment instructions**: `Your order will be fulfilled automatically once payment is verified.`
5. Click **Save** and activate the method.

---

### Step 2: Add the UPIDrop Script to the Thank-You Page
1. Go to **Settings** → **Checkout**.
2. Scroll to the **Order status page** section (or **Additional scripts**).
3. Paste the following script:

```html
<!-- UPIDrop Shopify Checkout Integration -->
<script src="https://upidrop.roori.in/sdk/upidrop.js"></script>
<script>
(function() {
  // Execute only if the customer selected the manual UPI payment method
  if (Shopify && Shopify.checkout && Shopify.checkout.payment_due > 0) {
    // Check if the order was paid via the UPI manual gateway
    var gateway = (Shopify.checkout.gateway || '').toLowerCase();
    
    // Initialize UPIDrop with your Merchant Public Key
    UPIDrop.init({
      publicKey: 'YOUR_UPIDROP_PUBLIC_KEY', // Replace with your pk_live_... key
      apiBase: 'https://upidrop-pg.upidrop-payment-gateway.workers.dev'
    });

    // Launch checkout modal automatically or provide a payment button
    var container = document.createElement('div');
    container.style.margin = '20px 0';
    container.style.padding = '20px';
    container.style.background = '#f0fdf4';
    container.style.border = '1px solid #bbf7d0';
    container.style.borderRadius = '12px';
    container.innerHTML = `
      <h3 style="color: #15803d; margin: 0 0 8px 0; font-size: 18px; font-weight: 700;">⚡ Complete UPI Payment</h3>
      <p style="color: #166534; margin: 0 0 16px 0; font-size: 14px;">Please complete your UPI payment of ₹${Shopify.checkout.payment_due} to confirm order #${Shopify.checkout.order_id}.</p>
      <button id="upidrop-pay-now-btn" style="background: #10b981; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 15px;">
        Pay ₹${Shopify.checkout.payment_due} Now via UPI
      </button>
    `;

    var mainContent = document.querySelector('.main__content') || document.body;
    mainContent.insertBefore(container, mainContent.firstChild);

    function triggerPayment() {
      UPIDrop.checkout({
        amount: parseFloat(Shopify.checkout.payment_due),
        description: 'Shopify Order #' + Shopify.checkout.order_id,
        customerName: (Shopify.checkout.billing_address && Shopify.checkout.billing_address.first_name) || '',
        customerEmail: Shopify.checkout.email || '',
        customerPhone: (Shopify.checkout.billing_address && Shopify.checkout.billing_address.phone) || '',
        onSuccess: function(data) {
          container.innerHTML = `
            <div style="color: #15803d; font-weight: 700; font-size: 16px;">
              ✅ Payment Verified via UPIDrop SmartTrack! UTR: ${data.utr || 'Auto-matched'}
            </div>
          `;
        },
        onCancel: function() {
          console.log('Payment modal dismissed by user.');
        }
      });
    }

    document.getElementById('upidrop-pay-now-btn').addEventListener('click', triggerPayment);
    
    // Auto-open on page load
    triggerPayment();
  }
})();
</script>
```

4. Replace `YOUR_UPIDROP_PUBLIC_KEY` with your actual Public Key from your [UPIDrop Dashboard](https://upidrop.roori.in/).
5. Click **Save**.

---

## Method 2: Shopify Theme Liquid Snippet ("Pay with UPI" Button)

If you wish to allow customers to buy directly from product pages or custom cart drawers, you can insert a Liquid snippet.

### Step 1: Create the Liquid Snippet
1. In Shopify Admin, navigate to **Online Store** → **Themes**.
2. Click **...** (Actions) next to your active theme → **Edit code**.
3. In the left sidebar under **Snippets**, click **Add a new snippet**.
4. Name the snippet: `upidrop-button.liquid`.
5. Insert the following code:

```liquid
{% comment %}
  UPIDrop Instant Buy Snippet
  Usage: {% render 'upidrop-button', product: product %}
{% endcomment %}

<div class="upidrop-buy-wrapper" style="margin: 16px 0;">
  <button 
    type="button"
    class="upidrop-instant-pay-btn"
    onclick="openUPIDropCheckout_{{ product.id }}()"
    style="width: 100%; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #ffffff; padding: 14px 24px; border: none; border-radius: 10px; font-weight: 700; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);"
  >
    <span>⚡</span>
    <span>Pay ₹{{ product.selected_or_first_available_variant.price | money_without_currency }} with UPI (0% Fee)</span>
  </button>
</div>

{% unless upidrop_sdk_loaded %}
  {% assign upidrop_sdk_loaded = true %}
  <script src="https://upidrop.roori.in/sdk/upidrop.js"></script>
{% endunless %}

<script>
function openUPIDropCheckout_{{ product.id }}() {
  if (typeof UPIDrop === 'undefined') {
    alert('Payment gateway is loading. Please try again in a moment.');
    return;
  }

  UPIDrop.init({
    publicKey: 'YOUR_UPIDROP_PUBLIC_KEY', // Set your merchant public key here
    apiBase: 'https://upidrop-pg.upidrop-payment-gateway.workers.dev'
  });

  UPIDrop.checkout({
    amount: {{ product.selected_or_first_available_variant.price | divided_by: 100.0 }},
    description: {{ product.title | json }},
    onSuccess: function(response) {
      alert('Payment Successful! Reference ID: ' + response.orderId);
      // Optional: Redirect customer or create Shopify draft order via webhook
      window.location.href = '/checkout';
    },
    onCancel: function() {
      console.log('Customer closed payment modal');
    }
  });
}
</script>
```

### Step 2: Render in your Product Template
1. In the theme editor, locate your product form file (e.g. `sections/main-product.liquid` or `snippets/buy-buttons.liquid`).
2. Add the snippet directly below your "Add to Cart" button:
```liquid
{% render 'upidrop-button', product: product %}
```
3. Save changes and preview your storefront.

---

## Method 3: Shopify Custom App with Webhook Auto-Fulfillment

To automate marking Shopify orders as **Paid** when UPIDrop SmartTrack verifies a transaction:

### Step 1: Set Up an Automated Webhook Listener
When a customer pays via UPIDrop, our server sends a signed HMAC webhook `order.paid` to your server.

**Sample Webhook Payload from UPIDrop:**
```json
{
  "event": "order.paid",
  "order": {
    "id": "ORD_01J...",
    "amount": 499.00,
    "status": "paid",
    "utr": "423871928374",
    "customer_name": "Rohan Sharma",
    "customer_email": "rohan@example.com",
    "metadata": {
      "shopify_order_id": "8293817293"
    }
  }
}
```

### Step 2: Update Shopify Order via Admin REST API
In your webhook handler (Node.js/PHP/Python):
1. Verify the `X-UPIDrop-Signature` header using your UPIDrop Webhook Secret.
2. Call the Shopify Admin API:
```bash
POST https://{shop}.myshopify.com/admin/api/2024-01/orders/{order_id}/transactions.json
Header: X-Shopify-Access-Token: {your_admin_access_token}
Content-Type: application/json

{
  "transaction": {
    "kind": "capture",
    "status": "success",
    "amount": "499.00"
  }
}
```

---

## Testing & Verification Checklist

- [ ] Replaced `YOUR_UPIDROP_PUBLIC_KEY` with your real Public Key from the UPIDrop dashboard.
- [ ] Confirmed Merchant VPA is configured and verified in UPIDrop.
- [ ] Placed a test order on Shopify choosing the UPI manual option.
- [ ] Tested QR scan on desktop and deep-link click on mobile.
- [ ] Verified that SmartTrack or UTR submission transitions the order to **Paid**.

---

## Support & Assistance

- **Merchant Portal**: [https://upidrop.roori.in](https://upidrop.roori.in)
- **API Reference**: [https://upidrop.roori.in/docs/api-reference.md](https://upidrop.roori.in/docs/api-reference.md)
- **Developer Support**: [rohitmore3192@gmail.com](mailto:rohitmore3192@gmail.com)