How Alipay Integrated OPPO’s Universal Card: Architecture, Code, and Optimization

1 Topic Background

OPPO released the Pantanal smart cross‑device system in 2022, defining a user‑centric, interconnected ecosystem. Alipay participated as a partner and co‑authored the Pantanal whitepaper 1.0. The universal service provides scenario awareness and service flow, with the universal card as a key presentation form that supports one‑time development, multi‑device adaptation, and real‑time distribution.

The card appears like an extended system notification with richer visual styles, combining aspects of notifications and desktop widgets.

Easy development: web‑like front‑end approach, adaptive to multiple entry points.

Cross‑platform: uses a cross‑platform engine with self‑rendering capability.

High performance: built on a CSS subset with rich animations.

2 On‑Device Effect

In Alipay, the universal card is displayed at several entry points. Phase 1 covers ride‑hailing, food delivery, and self‑pickup; Phase 2 plans to add lifestyle, bill payment, credit‑card services, etc.

Desktop main card: appears on the home screen’s core area with three possible sizes (1×2, 2×2, 2×4).

Multi‑entry flow: supports notification bar, status bar, lock screen, and always‑on‑display (AOD). Third‑party apps can configure which entries to use.

Besides ride‑hailing, Alipay also integrated food delivery and self‑pickup, with dark‑mode screenshots shown.

3 Implementation Chain

3.1 Universal Card Types

OPPO’s universal cards are independent of third‑party apps and are built with web‑like front‑end languages. After development, each business scenario’s card code is packaged into a UPK bundle. Two implementation schemes exist:

Hosted card: the UPK bundle contains only UI code; data is supplied by a host app via the universal access SDK.

Non‑hosted card: the UPK bundle includes both UI and data‑logic code, using JavaScript to fetch data independently of any host app.

3.2 Integration Scheme

Alipay, already integrated with Apple and Huawei, needed a hybrid solution for OPPO. After several technical discussions, a compromise using both hosted and non‑hosted approaches was chosen: Alipay triggers the card via its SDK, while subsequent updates are pushed from Alipay’s cloud to the vendor’s cloud.

Main steps of the chain:

Alipay client receives order messages from the server.

The client checks the OPPO universal service switch for the relevant scenario via the SDK.

Using the SDK, the client sends order data; the system decides whether to display the card.

Order updates flow through Alipay’s backend to the vendor’s cloud.

The vendor’s cloud refreshes the user’s desktop card based on a unique user ID.

This design allows Alipay to control card triggering while not requiring the client to stay active.

4 Code Implementation

4.1 Front‑End Card

Universal cards use oml files containing <template>, <style>, and <data> sections.

<template>
  <card-template entry="desktop">
    <div id="firstname" class="container"></div>
  </card-template>
</template>

<style>
  /* class selector */
  .container {
    flex-direction: column;
    width: 100%;
  }
  /* id selector */
  #firstname {
    font-size: 26px;
    margin: 20px 50px;
  }
</style>

For non‑hosted cards, seedling.js provides lifecycle callbacks:

// Lifecycle
onCreate(cardInfo) {
  console.log('onCreate');
  this.setData(cardInfo, { myText: 'hello pantanal' });
},
onShow(cardInfo) { console.log('onShow'); },
onHide(cardInfo) { console.log('onHide'); },
onUpdateData(cardInfo) {
  this.setData(cardInfo, { myText: 'Alipay!' }, {});
},
onDestroy(cardInfo) { console.log('onDestroy'); }

4.2 SDK Integration

The universal access SDK on the Alipay side performs two main functions: detecting the service switch for a scenario and sending card data to trigger display.

// Determine if the device supports universal cards
boolean isSupport = SeedlingTool.isSupportSeedlingCard(context);
// Check if the specific service is enabled
boolean isServiceEnabled = SeedlingTool.isServiceEnabled(context, serviceCode);

// Create intelligent data from order info
IntelligentData intelligentData = sendCleverMind(data, serviceInstanceId);
// Push data to OPPO system to display the card
SeedlingTool.INSTANCE.updateIntelligentData(context, intelligentData);

5 Solution Characteristics

Compared with similar features on iOS (Dynamic Island) and Huawei (Live Notifications), OPPO’s universal card differs in several aspects:

UI is independently rendered.

Relies on the SDK.

Supports lifecycle awareness.

Multiple implementation forms exist.

Requires OPPO’s content and scenario review.

Display time is controllable via protocol.

Supports multi‑entry and dark‑mode adaptation.

Integration cost is moderate to high; testing cost is high.

6 Optimization Thoughts

6.1 Module Optimization

To enable rapid adoption by third‑party mini‑programs and other vendors, the architecture is divided into four modules:

Function registration: entry point for all uses, binding data callbacks.

Routing: abstracts the underlying vendor so the same business logic works on OPPO, Huawei, etc.

Data distribution: parses registered data and forwards it to the appropriate vendor’s card API.

UI rendering: leverages each vendor’s native capabilities.

A query interface can expose the current device’s supported vendor features, allowing developers or users to enable or disable them.

7 Acknowledgements

The OPPO universal card integration took two months and is now available in Alipay version 10.5.36, currently in gray release. Thanks to all engineers, product designers, and vendor partners who contributed.