; } .G1E0_textBannerContainer .textBanner .title { } .G1E0_textBannerContainer .textBanner .textOverlay p, .G1E0_textBannerContainer .textBanner .textOverlay p.center { text-align: center; } .G1E0_textBannerContainer .textBanner .textOverlay p.right { text-align: right; } .G1E0_textBannerContainer .textBanner .textOverlay p.left { text-align: left; } .G1E0_textBannerContainer .textBanner .textOverlay { right: 0; left: 0; margin: auto; text-align: center; top: 50%; transform: translateY(-50%); } .G1E0_textBannerContainer .textBanner .textOverlay ul, .G1E0_textBannerContainer .textBanner .textOverlay p { line-height: 2.5em; } .G1E0_textBannerContainer .textBanner .textOverlay ol { list-style-type: revert; } .G1E0_textBannerContainer .textBanner .floatingImage { justify-content: center; text-align: center; top: 50%; transform:translateY(-50%); } .G1E0_textBannerContainer .textBanner .textOverlay { } .displayBlock { display: block; } .G1E0_textBannerContainer .centerGrid { width: 50%; margin: auto; } .G1E0_textBannerContainer .textBanner .textOverlay ul li::marker { font-size: inherit; } /* MEDIA QUERIES */ @media only screen and (max-width: 1300px){ .G1E0_textBannerContainer .centerGrid { width: 60%; } } @media only screen and (max-width: 1200px){ .G1E0_textBannerContainer .textBanner .textOverlay { padding-right: 0; padding-left: 0; } .G1E0_textBannerContainer .textBanner .textOverlay .button { font-size: 1.5vw; } } @media only screen and (max-width: 1100px){ .G1E0_textBannerContainer .centerGrid { width: 75%; } .G1E0_textBannerContainer .textBanner .textOverlay p, .G1E0_textBannerContainer .textBanner .textOverlay ul li span, .G1E0_textBannerContainer .textBanner .textOverlay ol li span, .G1E0_textBannerContainer .textBanner .textOverlay ul li::marker, .G1E0_textBannerContainer .textBanner .textOverlay ol li::marker { font-family: "VodafoneRegular"; line-height: 1.3; font-size: initial; } } @media only screen and (max-width: 1000px){ .G1E0_textBannerContainer .textBanner .textOverlay .title { font-size: 4vw; } .G1E0_textBannerContainer .textBanner .textOverlay p { font-size: 2.2vw; padding: 0 12px; } .G1E0_textBannerContainer .textBanner .textOverlay .button { font-size: 2vw; } .G1E0_textBannerContainer .textBanner .textOverlay { max-width: 68%; } } @media only screen and (max-width: 900px){ .G1E0_textBannerContainer .centerGrid { width: 85%; } } .G1E0_textBannerContainer .additionalText{ display: block; width: 100%; clear: both; float: left; } /* GO MOBILE */ @media only screen and (max-width: 1100px){ .G1E0_textBannerContainer .desktopBanner { display:none; } .G1E0_textBannerContainer .mobileBanner { display:block!important; min-height: 100px; } .G1E0_textBannerContainer { height: auto; } .G1E0_textBannerContainer .mobileBanner .textBlock { /* text-align: center; */ padding: 0 41px; } .G1E0_textBannerContainer .mobileBanner .textBlock h1.title { font-size: 3em; text-align: center; font-family: "VodafoneRegular"; margin-top: 10px; } .G1E0_textBannerContainer .mobileBanner .textBlock .buttonContainer { text-align: center; padding: 8px; } .G1E0_textBannerContainer .mobileBanner .floatingImageBlock { text-align: center; } .G1E0_textBannerContainer .mobileBanner .floatingImageBlock .floatingImageImg { } .G1E0_textBannerContainer .mobileBanner .floatingImageBlock img { max-width: 92%; } .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText h1, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText h2, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText h3, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText h4, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText h5, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText h6 { line-height: 1!important; display: inline-block!important; width: auto!important; padding-left: 8px; padding-right: 8px; } .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText ol, .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText ul { line-height: 1.2; } .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText ul { list-style: disc!important; width: 100%; padding-left: 10px; } .G1E0_textBannerContainer .mobileBanner .textBlock .paragraphText ol { list-style: inside; width: 100%; padding-left: 10px; } .G1E0_textBannerContainer .textBanner .textOverlay .title { font-size: 8vw; } .G1E0_textBannerContainer .textBanner .textOverlay p { font-size: 2.6vw; } .G1E0_textBannerContainer .textBanner .textOverlay .buttonContainer { text-align: center; } .G1E0_textBannerContainer .mobileBanner .buttonContainer .button { font-size: 1.4em; padding: 12px 20px; } .G1E0_textBannerContainer .centerGrid { width: 90%; } .G1E0_textBannerContainer .textBanner .textOverlay { /* width: 80%; */ padding-bottom: 100px; } } @media only screen and (max-width: 700px){ .G1E0_textBannerContainer .textBanner { padding-bottom: 0; } .G1E0_textBannerContainer .textBanner .floatingImage { display: block; width: 100% !important; /* position: relative; */ text-align: center; margin-top: 25px; } .G1E0_textBannerContainer .textBanner .floatingImage img { margin-top:55%; width: 100%; } .G1E0_textBannerContainer .textBanner .textOverlay { align-self: center !important; display: block !important; width: 88%; max-width: 88%; line-height: 1; } .G1E0_textBannerContainer .textBanner .textOverlay .verticalCenter { max-height: 300px!important; } } @media only screen and (max-width: 600px){ .G1E0_textBannerContainer .textBanner .textOverlay { /* width: 80% !important; */ padding-bottom: 50px; } .G1E0_textBannerContainer .textBanner .textOverlay p { font-size: 4vw; } } @media only screen and (max-width: 500px){ .G1E0_textBannerContainer .textBanner .textOverlay .button { padding: 12px 20px; } .G1E0_textBannerContainer .textBanner .textOverlay { transform: translateY(-200px); } } @media only screen and (max-width: 400px){ .G1E0_textBannerContainer .textBanner .textOverlay { transform: translateY(-150px); } } .G1E0_textBannerContainer .centerGrid.withFullWidth { width: 100% !important; margin: 0 78px 0 78px; } .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay, .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay p { text-align: left; padding:0; left: auto; max-width: 0%; } .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay { width: 100%; } @media only screen and (max-width: 1440px) { .G1E0_textBannerContainer .centerGrid.withFullWidth { margin: 0 40px 0 40px; } } @media only screen and (max-width: 1200px) { .G1E0_textBannerContainer .centerGrid.withFullWidth { margin: 0 16px 0 16px; } .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay, .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay p { max-width: calc(0% + 20%); } } @media only screen and (max-width: 992px) { .G1E0_textBannerContainer .centerGrid.withFullWidth { margin: 0 32px 0 32px; } .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay, .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay p { max-width: calc(0% + 20%); } } @media only screen and (max-width: 600px) { .G1E0_textBannerContainer { height: auto; } } @media only screen and (max-width: 360px) { .G1E0_textBannerContainer .centerGrid.withFullWidth { margin: 0 16px 0 16px; } .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay, .G1E0_textBannerContainer .centerGrid.withFullWidth .textOverlay p { max-width: none; } }
vodapay-miniprogram-logo
vodapay-miniprogram-logo
Lower effort on development, higher return on investment
An all-in-one development platform to help you create a Mini Program.
icon
App Container
A high productivity and secure runtime environment for Mini Programs.
  • Provides rich UI components
  • Offers infrastructure APIs for developers to access device, storage or network status.
  • Supports customisation of native components such as titlebar, loading view, error view, JS API, etc.
Learn more
icon
Mini Program Studio
The fastest way for developers to build Mini Programs for the VodaPay app.
Features include:
  • Syntax highlighting and autocomplete
  • Code debugging with simulator or remote device
  • Git commands built-in
  • Easy app deployment
Learn more
icon
Development Centre
A one-stop development platform for developers to manage Mini Programs, members and releases.
  • Developer onboarding
  • Mini Program management
  • Data Analytics
  • Security & Safety
  • Approval for submission of 3rd-party Mini Programs
Learn more
How it works?
Developers can use web technologies they are familiar with to develop mini programs for the VodaPay platform.
Using the VodaPay Mini Program development platform, app developers are able to leverage the benefits of VodaPay's range of services including cross platform capabilities to develop apps much more efficiently than ever before. The VodaPay Mini Program platform manages all the complexities such as security, verification and payment processing.
  • 01
  • 02
  • 03
  • 04
Step 1
icon
Development
Develop an app-like experience at a much lower development cost and gain instant access to millions of customers already on the Vodacom platform.
Step 2
icon
Web (CSS & Javascript)
Use the Mini Program Platform with technologies you are already familiar with. Simply use the VodaPay IDE to quickly and easily develop and deploy your Mini Program.
Step 3
icon
Automatic deployment
Once your code is ready, the VodaPay platform will build your code and deploy your app, making the launch of your Mini Program effortless and immediate.
Step 4
iconicon
Reach users where they are
Your audience can now find you via the VodaPay app, by using a QR code, location-based discovery or through a direct invite and external advertising.
Development support
A range of tools to help developers quickly onboard and develop Mini Programs.
Docs
Understand the development framework, basic components, API and related development problems of Mini Program.
Demo
Experience widget components and API features, and discover debugging capabilities to use.
Developer tools
Access tools for integrated development debugging, code editing, Mini Programs preview and release.
Design guidelines
Find design principles and specifications to help build a friendly, efficient and consistent user experience.
vodapay-logo
  1. Links that direct you to another website ("Third Party Website"), including those of advertisers, are outside of our control. Vodacom is not responsible for the terms and conditions, practices and/or privacy policies of any Third Party Website or the "cookies" that those sites may use.
  2. When you visit Third Party Websites, you agree to do so at your own risk, responsibility and liability, and agree to be bound by the terms and conditions set out in the Third Party Website. Vodacom makes no warranty or representation regarding, and does not endorse, any website linked to this website or the information, terms and conditions appearing thereon or any of the products or services described thereon.