Tavan Bogd Group JOINT EFFORTS · KEY TO SUCCESS
2026 · Q2 · IMPLEMENTATION BRIEF
5W 2H Аргачлал · Хэрэгжүүлэлтийн Төлөвлөгөө

Төлбөр төлөх Custom Checkout
хуудас хөгжүүлэлт.

Shopify Custom App дотор хөгжүүлэгдсэн,
Таван Богд бүлгийн охин компаниудад зориулсан private шийдэл.
КОМПАНИ Таван Богд Нура ХХК
02 / 13
Сонгосон зам · Selected Approach

Бид Custom App хандлагаар явна

Shopify-ийн Custom App (private) дотор хөгжүүлэгдэх checkout шийдэл. Олон нийтэд харагдахгүй, зөвхөн бидний store болон Таван Богд бүлгийн охин компаниудад түгээгдэнэ. Public app биш тул Shopify-ийн approval хүлээх шаардлагагүй.

АЛХАМ 01

Shopify дэлгүүр

Бүтээгдэхүүн каталог, тэрэг, маркетинг, нөөцийн менежмент Shopify дээр. Stable, scalable, тестлэгдсэн ecosystem ашиглана.

АЛХАМ 02 · ҮНДСЭН

Custom App + Checkout хуудас

Shopify Custom App дотор бүтсэн private checkout. Олон нийтэд харагдахгүй, App Store-руу submit хийхгүй. Монгол хаяг, QPay, SocialPay, банк бүгдийг бид өөрсдөө контрол хийнэ.

АЛХАМ 03

Охин компаниудад түгээх

Custom App-ийн install link дамжуулж охин компаниуд өөрсдөө суулгана, эсвэл бид install хийж өгнө. Shopify-аас зөвшөөрөл шаардлагагүй.

App төрөл
Custom/Private
Public App биш
Shopify approval
Шаардлагагүй
Custom App-д review байхгүй
Зорилтот хэрэглэгч
ТБ бүлэг
Охин компаниуд
PCI DSS
QPay
Банк болон gateway хариуцна
03 / 13
Аргачлал · Methodology

Шийдлээ 5W 2H-ээр задлан тайлбарлая

Дараагийн 7 slide-д тус бүр нэг асуултад дэлгэрэнгүй хариулна.

W
What
Юу?
Юу хийх вэ? Custom checkout-ийн scope.
W
Why
Яагаад?
Яагаад energy-р явах ёстой вэ?
W
Who
Хэн?
Хэн хөгжүүлэх, хэн хариуцах вэ?
W
Where
Хаана?
Аритектур, infra, домэйн.
W
When
Хэзээ?
Phase, milestone, launch огноо.
H
How
Яаж?
Stack, integration, security.
H
How much
Хэр их?
Зардал, нөөц, ROI.
04 / 13
5W 2H · 1 / 7
WHAT
W
Юу?

Юуг хөгжүүлэх вэ?

Shopify Custom App (private) дотор бүтсэн төлбөрийн хуудас. Олон нийтэд биш, зөвхөн Таван Богд бүлгийн охин компаниудад зориулсан шийдэл.

  • 01
    Shopify Custom App (private)
    Бид Shopify Partners dashboard дээр Custom App үүсгэнэ. Энэ нь Shopify App Store-руу submit хийгдэхгүй, public review-д орохгүй. Install link нь зөвхөн өгсөн store-руу хүчинтэй болно.
    Private appCustom distributionNo App Store
  • 02
    Захиалгын мэдээлэл татах endpoint
    Shopify Cart/Storefront API-аас хэрэглэгчийн тэргэн дэх бараа, тоо ширхэг, нийт дүнг checkout хуудаснаа татан авна. App-аар олгогдсон credential ашиглана.
  • 03
    Монгол хаягийн форм
    Аймаг → Дүүрэг → Хороо → Хороолол → Гудамж → Байр → Орц → Тоот гэсэн каскадтай dropdown болон нэмэлт талбарууд. Газрын зургийн pin (Google Maps).
    Cascading selectMap pinValidation
  • 04
    Төлбөрийн сонголтын модуль
    QPay (бүх банкны QR), SocialPay, Khan Bank, Golomt Bank direct, Most Money, картын төлбөр. Хэрэглэгчид сонголт өгнө.
    QPay v2SocialPayKhan Bank APICard
  • 05
    Захиалга баталгаажуулалт
    Төлбөр амжилттай хийгдсэний дараа захиалга нь Shopify-ийн өөрийнх нь систем дотор автоматаар "Paid" төлөвт орж, нөөц хасагдаж, fulfillment эхэлнэ. Custom webhook бичих шаардлагагүй — Shopify бүгдийг өөрөө зохицуулна. Хэрэглэгч "Баярлалаа" хуудас руу буцна.
    Shopify native flowAuto inventory sync
  • 06
    Distribution & Install link
    Охин компаниудын Shopify store-руу install link дамжуулна. Тэд өөрсдөө install хийх эсвэл бид remote-оор тус бүрд нь install хийж өгнө. Шинэ компани нэмэгдэх бүрд дахин гэрээ хэрэггүй.
    Install linkRemote setup
  • 07
    Admin dashboard (дотоод)
    Захиалга, төлбөр, refund, error log, transaction history харах хяналтын самбар. Бүх захиалга Shopify-д орох тул admin-нэлээд хялбар.
05 / 13
5W 2H · 2 / 7
WHY
W
Яагаад?

Яагаад энэ аргыг сонгов?

Shopify-ийн Custom Payment App-ыг батлуулах болон Plus дэлгүүр нээх хугацаа нь баталгаагүй, удаан сунжирдаг. Мөн Монголын төлбөрийн систем, хаягийн UX-д бид өөрсдөө бүрэн контрол хийх шаардлагатай.

  • 01
    Shopify-ийн approval-ийн саатлаас зайлсхийнэ
    Shopify-ийн Custom Payment App нь Shopify-ийн review team-ээр заавал орох ёстой бөгөөд хугацаа нь албан ёсоор баталгаагүй. Олон тохиолдолд хэдэн долоо хоногоос хэдэн сар хүртэл сунжирдаг ба iteration хийх бүрд дахин submit хийх шаардлагатай. Бизнесийн хуваарьт энэ тодорхойгүй байдал тохиромжгүй.
  • 02
    Монгол хаягийн UX-г бид өөрсдөө шийднэ
    Shopify-ийн хаягийн систем нь "Address Line 1/2, City, ZIP" гэсэн барууны загвартай. Аймаг/дүүрэг/хороо/тоот хийхэд hack хэрэгтэй болно. Бид өөрсдийн форм дизайн хийнэ.
  • 03
    Локал төлбөрийн direct integration
    QPay, SocialPay, банкны API-ийг шууд холбоно. Дамжуулагч гуравдагч талын fee төлөхгүй. Transaction-ийн алдаа, лог бүгд бидний гарт.
  • 04
    Брэндийн identity бүрэн контрол
    Checkout хуудасны бүх pixel, animation, copy, fonts бид өөрсдийнхөөр хийнэ. Монгол хэрэглэгчийн хүлээж буй UX-д бүрэн тохирно.
  • 05
    Дата 100% эзэмших
    Хэрэглэгчийн зан төлөв, abandon rate, conversion funnel дата нь өөрсдийн analytics-д орно. Future-д ML, retention тоглоомд бэлэн.
  • 06
    Бид Shopify Plus-д шилжих шаардлагагүй
    Shopify Standard plan ($79/сар) дээр үлдэх боломжтой. Plus-ийн $2,000+/сар-ыг хэмнэнэ. Checkout-аа бид өөрсдөө барьдаг тул plan upgrade хэрэггүй.
06 / 13
5W 2H · 3 / 7
WHO
W
Хэн?

Хэн хариуцаж хэрэгжүүлэх вэ?

Хөгжүүлэлтэд 4-5 хүний цөөн боловч мэргэшсэн баг байх шаардлагатай. Монголын зах зээлд Shopify платформ дээр мэргэшсэн хөгжүүлэгч ховор тул зөвхөн энэ тал дээр туршлагатай хүнтэй ажиллах нь чухал. Custom checkout нь бүтэн e-commerce platform биш тул багийн гишүүдийн тоо цөөн байж болох ч нэгнийгээ орлох, шийдэл бүр дээр зөвлөгөө өгөх давхар хөгжүүлэгчтэй байх ёстой.

  • 01
    Tech Lead / Backend инженер
    Архитектур шийдэх, backend (Node.js/Go/Python), Shopify API, payment gateway integration хариуцна. 1 хүн.
    SENIORNode.js / GoPostgreSQL
  • 02
    Shopify-д мэргэшсэн хөгжүүлэгч
    Shopify Storefront/Admin API, Liquid template, Shopify-ийн checkout flow-ийг сайн мэддэг хүн. Монголд цөөн тул заавал тусгай хайлт хийх шаардлагатай. 1 хүн.
    SHOPIFY EXPERTStorefront APIAdmin API
  • 03
    Frontend хөгжүүлэгч
    Checkout UI, хаягийн форм, төлбөрийн хэсэг, mobile responsive хариуцна. React/Next.js эсвэл Vue. 1 хүн.
    MID-SENIORReact / Next.jsTailwind
  • 04
    Орлох / зөвлөх хөгжүүлэгч
    Багийн гишүүдийн нэгийг түр орлох, шийдэл бүр дээр код review, архитектурын зөвлөгөө өгдөг өөр нэг хөгжүүлэгч заавал хэрэгтэй. Knowledge bus factor-ийг бууруулна. 1 хүн.
    BACKUPCode review
  • 05
    Product Designer
    Checkout UX, mobile-first design, Figma дээр прототип, user testing.
    FigmaUX research
  • 06
    QA Engineer
    Payment integration testing нь критик. Бүх банкны wallet, бүх device, бүх failure scenario-г шалгах. 1 хүн.
    Manual + Automation
  • 07
    Бизнесийн өмнөөс — E-commerce manager
    Requirement тодорхойлох, payment provider-уудтай гэрээ хийх, launch-ийг бизнесийн талаас хариуцна. Одоо байгаа орон тоогоор.
    INTERNAL
07 / 13
5W 2H · 4 / 7

Where · Хаана хэрэгжих вэ?

Системийн архитектур: Shopify-Custom Checkout-Payment Gateway-Хэрэглэгч хооронд урсгал.

USER Хэрэглэгч Browser / Mobile SHOPIFY ECOSYSTEM Shopify дэлгүүр brand.myshopify.com Каталог · Тэрэг · Inventory OUR PRODUCT ★ Custom Checkout payment.brand.mn Хаяг · Төлбөр · Validation Next.js + Node.js DATABASE LAYER PostgreSQL · Redis Sessions · Logs · Audit QPay (бүх банк) QR · Deeplink SocialPay · Most Money Wallet integration Khan / Golomt API Direct bank transfer Card Payment Gateway Visa · Mastercard SHOPIFY API Order Sync Admin REST/GraphQL Order create · Fulfillment Email · Inventory 1. Browse 2. Checkout cart_token 3. webhook · Order Created УРСГАЛ: Бидний контрол Shopify уялдаа Payment gateway Дамжуулалт
08 / 13
5W 2H · 5 / 7

When · Хэзээ хэрэгжүүлэх вэ?

Хуудасны хөгжүүлэлтийг Таван Богдын охин компаниудын аль нэгний хамгийн анхны launch үетэй зэрэгцүүлэн нэвтрүүлэх боломжтой. Тодорхой огноо нь launch-ийн төлөвлөгөөнөөс хамаарна.

PHASE 01
DISCOVERY
Шинжилгээ ба Дизайн
  • Requirement gathering
  • Архитектур төлөвлөлт
  • Tech stack сонголт
  • UX/UI Figma prototype
  • Payment provider гэрээ
  • Security plan
PHASE 02
BUILD
Үндсэн хөгжүүлэлт
  • Backend API (Node.js)
  • Хаягийн форм UI
  • Shopify Cart API integration
  • Database schema
  • Auth & session
  • Admin dashboard MVP
PHASE 03
PAYMENT
Төлбөрийн интеграц
  • QPay integration
  • SocialPay integration
  • Khan/Golomt direct API
  • Card payment gateway
  • Failure / retry logic
  • Reconciliation
PHASE 04
QA
Тестлэлт ба Hardening
  • End-to-end QA
  • Бүх банкны wallet тест
  • Load testing
  • Security audit
  • Mobile responsive QA
  • Soft launch (limited beta)
PHASE 05
LAUNCH
Нэвтрүүлэлт
  • Охин компанийн launch-тай зэрэг
  • Monitoring 24/7
  • Conversion tracking
  • A/B test setup
  • Bug fix loop
  • Documentation finalize
Анхаарах нь: Phase 1-3 зэрэгцэн ажиллах боломжтой. Payment integration phase Phase 2-той хэсэгчлэн давхцана. Хугацаа нь багийн хэмжээ, gateway-уудтай гэрээ хийх хурдаас хамаарна.
09 / 13
5W 2H · 6 / 7
HOW
H
Яаж?

Яаж хэрэгжүүлэх вэ?

Tech stack, integration pattern, security баталгаа.

  • 01
    Tech Stack
    Frontend: Next.js (React, TypeScript) · Tailwind CSS · React Hook Form. Backend: Node.js (Fastify) эсвэл Go. Database: PostgreSQL + Redis. Hosting: AWS (ECS Fargate) эсвэл Vercel. CDN: Cloudflare.
    Next.jsNode.jsPostgreSQLRedisAWSCloudflare
  • 02
    Shopify-тай integration pattern
    Shopify-ийн "Custom App"-ыг суулгаж Storefront API-аас cart мэдээлэл татаж, төлбөр амжилттай үед Admin API-аар Order create. Webhook ашиглаж inventory sync.
    Storefront APIAdmin APIWebhooks
  • 03
    Хаягийн систем
    UB-ийн 9 дүүрэг → 152 хороо, 21 аймгийн 331 сум-ын JSON dataset өөрсдөө барина. Cascading dropdown. Хороололын автомат дүүргэлтийн алгоритм. Google Maps pin (заавал биш). Driver-д ойлгомжтой "хүргэлтийн заавар" нэмэлт талбар.
  • 04
    Payment integration хандлага
    Адаптер pattern — нэг нэгдсэн PaymentService interface. QPay, SocialPay, банк бүгд адаптераар орно. Шинэ provider нэмэхэд код өөрчлөх биш зүгээр шинэ adapter бичнэ. Webhook listener-үүд retry logic-той.
  • 05
    Security baseline
    Картын мэдээлэл бид хадгалахгүй — gateway-ийн hosted page руу redirect (PCI scope reduce). HTTPS only · Rate limiting · CSRF protection · Input sanitization · Secret rotation · Audit logs · WAF (Cloudflare).
    TokenizationNo card storageWAF
  • 06
    Хяналт ба алдаа удирдлага
    Sentry error tracking · Datadog/Grafana APM · BetterStack uptime monitoring · Slack alert · 24/7 on-call rotation. Failed transaction-ийн автомат retry + manual review queue.
    SentryGrafanaSlack alerts
10 / 13
5W 2H · 7 / 7

How much · Хэр их зардал?

Зардал нь хөгжүүлэлтэд оролцох багийн ажилласан хүн/цаг, дэд бүтэц, гуравдагч талын үйлчилгээний төлбөрийг нэгтгэн тооцооолно. Тодорхой дүн нь scope, баг бүрэлдэхүүн, гэрээний нөхцөлөөс хамаарна.

Нэг төлбөрийн систем

Per Payment Provider · юу багтах вэ
  • API integration. QPay, SocialPay, банкны API-аас хамаарч нийлмэл байдал өөр өөр.
  • Webhook ба callback handling. Төлбөрийн төлөв шинэчлэлт, retry logic.
  • Failure scenario тестлэлт. Бүтэлгүй гүйлгээний бүх төрлийг шалгана.
  • Reconciliation. Өдөр бүрийн транзакц банкны мэдээлэлтэй тулгана.
  • Documentation. Internal handoff, troubleshooting playbook.
ЗАРДЛЫН ХҮРЭЭ
Provider-ийн API-ийн нийлмэлээс хамаарч бага–дунд хүрээнд. QPay/SocialPay харьцангуй энгийн, банкны direct integration илүү нийлмэл.

Анхны бүрэн нэвтрүүлэлт

Initial Launch · юу багтах вэ
  • Frontend хөгжүүлэлт. Checkout UI, хаягийн форм, mobile responsive.
  • Backend + Shopify integration. Cart sync, order flow, admin dashboard.
  • Хэд хэдэн төлбөрийн системийн интеграц. QPay, SocialPay, банк, карт.
  • Дизайн + UX research. Figma prototype, user testing.
  • QA + security audit. End-to-end тест, penetration test.
  • Дэд бүтэц. Cloud, CDN, monitoring, backup setup.
ЗАРДЛЫН ХҮРЭЭ
Хөгжүүлэлтийн scope, багийн бүрэлдэхүүн, гэрээний нөхцлөөс хамаарч тоймтой хүрээнд. Нарийвчилсан тооцоог Phase 01 — Discovery шатанд гаргана.
Тооцооллын зарчим: Зардал нь багийн ажилласан хүн/цаг дээр үндэслэн тооцогдоно. Нарийвчилсан хүн/цагийн тооцоо болон scope-ийг Discovery шатанд багаар хамтран гаргаж, удирдлагад танилцуулна.
11 / 13
Альтернатив · Shopify Custom Payment App

Shopify App замын давуу ба сул талууд

+

Shopify App-ийн давуу талууд

06 ХҮЧТЭЙ ТАЛ
  • Нэгдсэн checkout flow. Хэрэглэгч Shopify-ийн нэг интерфэйсэд үлдэж, гадагш redirect болохгүй. Conversion-д давуу.UX win
  • Shop Pay, Apple Pay авч хэрэглэх боломж. Shopify-ийн express checkout features интегрэйц хэвээр.
  • PCI compliance Shopify хариуцна. Картын мэдээлэл бидэнд хүрэхгүй — security scope бүрэн Shopify дээр.Security +
  • Shopify-ийн analytics, abandoned cart, email marketing бүгд out-of-the-box ажиллана. Бид дахин барих шаардлагагүй.
  • Олон улсад хэмжээгүй scaling. Multi-currency, multi-language Shopify-аар хэвээр.
  • Tech Lead-ийн дутагдалд давуу. Shopify-ийн convention дагах учир архитектур шийдвэр бага.
−

Shopify App-ийн сул талууд

07 АСУУДАЛ
  • Approval хүлээх хугацаа баталгаагүй. Shopify Partner team review хийдэг бөгөөд хэдэн долоо хоногоос хэдэн сар хүртэл сунжирч болно. Шаардлага өөрчлөгдвөл дахин submit хийх шаардлагатай.Timeline risk
  • Хаягийн форм хязгаарлагдмал. Аймаг/дүүрэг/хороо/хороолол гэсэн каскад нэмэх боломжгүй. Standard plan-д JS inject хязгаарлагдмал.Critical
  • Shopify Plus заавал болно. Checkout-ийг гүн customize хийхэд $2,000+/сар Plus subscription шаардлагатай.
  • Plus onboarding нэмэлт хугацаа. Shopify Plus аккаунт нээж, баталгаажуулахад нэмэлт хугацаа шаардлагатай.
  • Локал төлбөрийн direct connection хязгаарлагдмал. QPay/SocialPay-ийг "alternative payment method" болгож нэмэх ёстой ч UI хязгаартай.
  • Транзакцийн нэмэлт fee. Shopify-ээс өөр payment provider ашиглавал 0.5-2% extra (зөвхөн Shopify Payments-аас өөр).
  • Custom fraud rule, A/B test, animation хязгаартай. Бид өөрсдийн UX research-ийн үр дүнг хэрэгжүүлэх боломж бага.
12 / 13
Эрсдэл ба сэргийлэлт · Risks & Mitigations

Бидний эрсдэлүүд ба сэргийлэх арга

Custom checkout зам нь зарим эрсдэлийг өөртөө хүлээж авна. Бүгдийг нь өмнө нь тодорхойлж, mitigation plan гаргалаа.

ТЕХНИКИЙН · ӨНДӨР
Payment provider downtime
QPay/SocialPay/банкны API-д асуудал гарвал хэрэглэгч төлбөр хийж чадахгүй болно. Бид доош суух эрсдэл.
Mitigation Олон альтернатив төлбөр санал болгох. Failover detection. Status page. Support бэлэн.
АЮУЛГҮЙ БАЙДАЛ · ӨНДӨР
Хувийн дата leak
Хэрэглэгчийн нэр, хаяг, утас хадгалагдана. Хакердуулбал брэндэд цохилт, хууль зүйн хариуцлага.
Mitigation Карт мэдээлэл бид хадгалахгүй. WAF · encryption at rest · pen test · ХЗДНХ-ийн дагуу .mn server.
БИЗНЕСИЙН · ӨНДӨР
Гол developer leave
Tech Lead leave болоход knowledge алдагдаж, проект 3-6 сараар хойшлох эрсдэлтэй.
Mitigation Documentation-ийг хатуу барих. Code review pair programming. Knowledge transfer session. Retention bonus.
ОПЕРЭЙШНИЙ · ДУНД
Failed transaction handling
Хэрэглэгч төлбөр хийсэн боловч Shopify-д захиалга үүсэхгүй edge case. Customer support хэцүү болно.
Mitigation Idempotency keys · webhook retry · manual review queue · daily reconciliation.
ХУУЛИЙН · ДУНД
э-Баримт интеграц
ТУ-ын eTax системд НӨАТ-ийн е-баримт автомат бүртгэх шаардлага. Гар буруу буюу late filing.
Mitigation eBarimt API-г 1-р phase-д integration. Тестийн орчинд 2 сар тест. Backup manual process.
ТЕХНИКИЙН · ДУНД
Shopify API rate limit
Black Friday гэх мэт өндөр ачаалалд Shopify Admin API-ийн rate limit-д удааширч магадгүй.
Mitigation Bulk operations API. Queue (Redis) ашиглах. GraphQL Admin API (REST-ээс илүү хариу хурд).
ХУГАЦААНЫ · БАГА
Phase 3-ын саатал
QPay/SocialPay-тай гэрээ, integration урт болж launch хойшлох магадлал.
Mitigation Phase 1-ээс провайдертай гэрээ эхлэх. Парциаль launch — эхлээд QPay, дараа нь SocialPay.
UX-ийн · БАГА
Domain-аар redirect-аас айх
Хэрэглэгч brand.mn → payment.brand.mn руу шилжихэд "phishing" мэт мэдрэмж төрж, abandon хийх.
Mitigation Тогтвортой брэнд UI. SSL certificate visible. "Найдвартай төлбөр" badge. Subdomain-ийн брэнд дизайн адил.
SCALING · БАГА
Олон улсад тэлэх
Хэрэв олон улсад худалдаа хийе гэвэл multi-currency, олон хэлийг өөрсдөө дэмжих хэрэгтэй.
Mitigation Phase 1-д Монголд фокус. International scaling-ийг 18 сарын дараа авч үзнэ.
13 / 13
Дараагийн алхмууд · Next Steps

Шийдвэр гарсан. Тэгвэл юунаас эхлэх вэ?

  • 01
    Багийн бүрэлдэхүүн баталгаажуулах
    Tech Lead томилох эсвэл нөхдөж нэмж авах. Frontend developer-ийн capacity тодруулах. Designer contractor-той гэрээ.
    2 долоо хоног
  • 02
    Payment provider-уудтай гэрээ эхлүүлэх
    QPay, SocialPay, Khan Bank, Golomt Bank-тай meeting set хийх. Integration documentation авах. Test environment эрх авах.
    2-3 долоо хоног
  • 03
    Detailed BRD ба architecture document
    Энэхүү 5W 2H slide-аас илүү гүн нарийн BRD баримт. API contract, database schema, security plan-ыг бичнэ.
    3 долоо хоног
  • 04
    UX prototype + user testing
    Figma дээр checkout flow-ийн прототип. 10-15 хэрэглэгчтэй user testing хийж feedback цуглуулна.
    3 долоо хоног
  • 05
    Phase 02 — Code эхлэх
    Sprint планинг. Repository setup. CI/CD pipeline. Хөгжүүлэлт албан ёсоор эхэлнэ.
    2 сар
← → ШИЛЖИХ  ·  F ДҮҮРЭН ДЭЛГЭЦ