CN115174984A - 一种支付界面的显示方法及显示设备 - Google Patents

Abstract

本申请公开了一种支付界面的显示方法及显示设备，响应于用户触发第三方应用的应用界面中权益支付控件的指令，获取与第三方应用对应的权益信息；并在显示器中显示权益选择界面；响应于用户触发权益选择界面中目标权益选择项的指令，生成支付界面，将支付界面显示在显示器中，以及，将第三方应用的内容作为背景图片显示在支付界面的底层。可见，该方法及显示设备可以实现多窗口下第三方应用的应用界面与支付界面共同展示的效果，建立支付界面与第三方应用的应用界面之间的关联性，避免支付界面与第三方应用的应用界面的分割，提高支付流程的体验和支付界面的展示效果。

Description

一种支付界面的显示方法及显示设备

技术领域

本申请涉及界面显示技术领域，尤其涉及一种支付界面的显示方法及显示设备。

背景技术

为提高用户体验，显示设备可以安装的第三方应用越来越多，不同的第三方应用的使用权益不同。权益类型包括免费类型和付费类型，付费类型包括按套餐支付和按单片支付等。为满足用户对各第三方应用提供的权益的支付需求，显示设备内还配置支付应用。用户在基于第三方应用购买相应权益时，第三方应用调用支付应用，以在另一个窗口呈现支付界面，用户基于支付界面完成支付操作。

但是，目前的支付界面均为固态显示形式，支付界面的背景、支付界面中各组件的相对位置均保持不变。固态显示的支付界面会影响用户的输入体验，例如，在由第三方应用跳转至支付应用时，第三方应用的应用界面和支付界面是完全分割的、显示在两个窗口的界面，使得用户极易在支付界面忘记要购买的是哪一应用的权益。

发明内容

本申请提供了一种支付界面的显示方法及显示设备，以解决现有的支付界面无法保证用户的输入体验的问题。

第一方面，本申请提供了一种显示设备，包括：显示器，被配置为显示用户界面；与所述显示器连接的控制器，所述控制器被配置为：

显示第三方应用的应用界面，所述应用界面中包括权益支付控件；

响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息；

基于所述第三方应用对应的权益信息，生成权益选择界面，将所述权益选择界面显示在显示器中，所述权益选择界面包括至少一个权益选择项，所述权益选择项用于表征所述第三方应用提供的权益；

响应于用户触发目标权益选择项的指令，生成支付界面，将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，所述支付界面用于供用户对目标权益完成支付操作。

本申请一些实施例中，所述控制器在执行所述将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，被进一步配置为：

截取用户在触发所述权益支付控件之前所述第三方应用的界面图像，所述界面图像包括第三方应用的内容；

将所述支付界面以非全屏状态显示在显示器中，将所述界面图像以全屏状态显示在所述支付界面的底层，以将所述第三方应用的内容作为所述支付界面的背景图片。

本申请一些实施例中，所述控制器在执行所述将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，被进一步配置为：

在用户触发目标权益选择项时，生成支付窗口，所述支付窗口包括支付界面区域和背景区域；

设置所述支付界面区域为不透明状态，设置所述背景区域为透明状态，以及，设置所述支付窗口的窗口共存参数，所述窗口共存参数用于表征支付窗口与所述第三方应用的应用界面所在窗口呈共存状态；

将所述支付界面显示在所述支付窗口的支付界面区域，以及，将带有所述支付界面的支付窗口显示在所述第三方应用的应用界面所在窗口的上层，实现所述支付窗口与所述第三方应用的应用界面所在窗口的共存显示，所述第三方应用的内容由所述支付窗口中透明状态的背景区域露出显示，所述露出显示的第三方应用的内容作为所述支付界面的背景图片。

本申请一些实施例中，所述支付界面包括用于输入支付信息的输入框；以及，所述控制器被进一步配置为：

响应于用户触发所述输入框的指令，在所述支付界面所在窗口的底部弹出软键盘；

基于所述软键盘的高度，调整所述支付界面中输入框的高度，以使所述软键盘不遮挡所述输入框。

本申请一些实施例中，所述控制器在执行所述基于所述软键盘的高度，调整所述支付界面中输入框的高度，被进一步配置为：

获取所述支付界面所在窗口的第一高度、所述软键盘的第二高度，以及，所述输入框至支付界面所在窗口顶端的第三高度；

计算所述第一高度和第二高度的差值，确定所述支付界面所在窗口的可视高度；

计算所述第三高度和所述可视高度的差值，确定目标高度；

基于所述目标高度，将所述输入框沿所述支付界面向上移动，以使得所述输入框在所述软键盘的覆盖区域之外显示。

本申请一些实施例中，所述控制器在执行所述基于所述软键盘的高度，调整所述支付界面中输入框的高度，被进一步配置为：

获取所述输入框在所述支付界面中的第一位置纵坐标和所述软键盘的顶点在所述支付界面中的第二位置纵坐标；

计算所述第一位置纵坐标和第二位置纵坐标的纵坐标差值；

基于所述纵坐标差值，将所述支付界面向上移动，以使得所述输入框在所述软键盘的覆盖区域之外显示。

本申请一些实施例中，所述控制器包括SDK模块和支付服务模块；以及，所述控制器在执行所述响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息，被进一步配置为：

响应于用户触发所述权益支付控件的指令，控制所述第三方应用调用所述SDK模块，所述SDK模块向所述支付服务模块发送接口调用请求，所述接口调用请求包括第三方应用的应用标识；

所述支付服务模块响应于所述接口调用请求，向服务器发送信息获取请求，所述信息获取请求包括第三方应用的应用标识，所述信息获取请求用于所述指示服务器基于所述第三方应用的应用标识查询与所述第三方应用对应的权益信息；

接收所述服务器在响应于所述信息获取请求后返回的与所述第三方应用对应的权益信息。

本申请一些实施例中，所述控制器在执行所述响应于用户触发目标权益选择项的指令，生成支付界面，被进一步配置为：

响应于用户触发目标权益选择项的指令，检测显示设备是否登录有用户账号；

如果检测到显示设备登录有用户账号，则生成支付界面；

如果检测到显示设备未登录有用户账号，则弹出账号登录窗口，在用户基于所述账号登录窗口登录用户账号后，生成支付界面。

本申请一些实施例中，所述控制器被进一步配置为：

在所述权益信息中获取所述目标权益选择项对应的权益价格和所述权益价格的简介信息；

将所述权益价格显示在所述支付界面中，以及，在所述权益价格的一侧显示注释标记；

在所述支付界面的指定位置显示所述注释标记对应的权益价格的简介信息。

第二方面，本申请还提供了一种支付界面的显示方法，所述方法包括：

显示第三方应用的应用界面，所述应用界面中包括权益支付控件；

响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息；

基于所述第三方应用对应的权益信息，生成权益选择界面，将所述权益选择界面显示在显示器中，所述权益选择界面包括至少一个权益选择项，所述权益选择项用于表征所述第三方应用提供的权益；

响应于用户触发目标权益选择项的指令，生成支付界面，将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，所述支付界面用于供用户对目标权益完成支付操作。

第三方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可存储有程序，该程序执行时可实现包括本申请提供的支付界面的显示方法各实施例中的部分或全部步骤。

本申请提供的一种支付界面的显示方法及显示设备，响应于用户触发第三方应用的应用界面中权益支付控件的指令，获取与第三方应用对应的权益信息；并在显示器中显示权益选择界面；响应于用户触发权益选择界面中目标权益选择项的指令，生成支付界面，将支付界面显示在显示器中，以及，将第三方应用的内容作为背景图片显示在支付界面的底层。可见，该方法及显示设备可以实现多窗口下第三方应用的应用界面与支付界面共同展示的效果，建立支付界面与第三方应用的应用界面之间的关联性，避免支付界面与第三方应用的应用界面的分割，提高支付流程的体验和支付界面的展示效果。

附图说明

为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示出了根据一些实施例的显示设备与控制装置之间操作场景的示意图；

图2示出了根据一些实施例的控制装置100的硬件配置框图；

图3示出了根据一些实施例的显示设备200的硬件配置框图；

图4示出了根据一些实施例的显示设备200中软件配置图；

图5示出了根据一些实施例的支付界面的显示方法的流程图；

图6示出了根据一些实施例的第三方应用的应用界面的示意图；

图7示出了根据一些实施例的权益选择界面的示意图；

图8示出了根据一些实施例的支付界面的示意图；

图9示出了根据一些实施例的在支付界面底层显示背景图片的一种方法流程图；

图10示出了根据一些实施例的在支付界面底层显示背景图片的一种示意图；

图11示出了根据一些实施例的在支付界面底层显示背景图片的另一种方法流程图；

图12示出了根据一些实施例的在支付界面底层显示背景图片的另一种示意图；

图13示出了根据一些实施例的调整输入框的高度的一种方法流程图；

图14示出了根据一些实施例的调整输入框的高度的一种示意图；

图15示出了根据一些实施例的调整输入框的高度的另一种方法流程图；

图16示出了根据一些实施例的调整输入框的高度的另一种示意图；

图17示出了根据一些实施例的支付界面显示注释标记的示意图。

具体实施方式

为使本申请的目的和实施方式更加清楚，下面将结合本申请示例性实施例中的附图，对本申请示例性实施方式进行清楚、完整地描述，显然，描述的示例性实施例仅是本申请一部分实施例，而不是全部的实施例。

需要说明的是，本申请中对于术语的简要说明，仅是为了方便理解接下来描述的实施方式，而不是意图限定本申请的实施方式。除非另有说明，这些术语应当按照其普通和通常的含义理解。

本申请中说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”等是用于区别类似或同类的对象或实体，而不必然意味着限定特定的顺序或先后次序，除非另外注明。应该理解这样使用的用语在适当情况下可以互换。

术语“包括”和“具有”以及他们的任何变形，意图在于覆盖但不排他的包含，例如，包含了一系列组件的产品或设备不必限于清楚地列出的所有组件，而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。术语“模块”是指任何已知或后来开发的硬件、软件、固件、人工智能、模糊逻辑或硬件或/和软件代码的组合，能够执行与该元件相关的功能。

本申请实施方式提供的显示设备可以具有多种实施形式，例如，可以是电视、智能电视、电脑、激光投影设备、显示器(monitor)、电子白板(electronic bulletin board)、电子桌面(electronic table)等。图1和图2为本申请的显示设备的一种具体实施方式。

图1示出了根据一些实施例的显示设备与控制装置之间操作场景的示意图。如图1所示，用户可通过终端设备300或控制装置100操作显示设备200。

在一些实施例中，控制装置100可以是遥控器，遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信，及其他短距离通信方式，通过无线或有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等输入用户指令，来控制显示设备200。

在一些实施例中，也可以使用终端设备300(如移动终端、平板电脑、计算机、笔记本电脑等)以控制显示设备200。例如，使用在终端设备上运行的应用程序控制显示设备200。

在一些实施例中，显示设备可以不使用上述的终端设备或控制设备接收指令，而是通过触摸或者手势等接收用户的控制。

在一些实施例中，显示设备200还可以采用除了控制装置100和终端设备300之外的方式进行控制，例如，可以通过显示设备200设备内部配置的获取语音指令的模块直接接收用户的语音指令控制，也可以通过显示设备200设备外部设置的语音控制设备来接收用户的语音指令控制。

在一些实施例中，显示设备200还与服务器400进行数据通信。可允许显示设备200通过局域网(LAN)、无线局域网(WLAN)和其他网络进行通信连接。服务器400可以向显示设备200提供各种内容和互动。服务器400可以是一个集群，也可以是多个集群，可以包括一类或多类服务器。

图2示出了根据一些实施例的控制装置100的硬件配置框图。如图2所示，控制装置100包括控制器110、通信接口130、用户输入/输出接口140、存储器、供电电源。控制装置100可接收用户的输入操作指令，且将操作指令转换为显示设备200可识别和响应的指令，起到用户与显示设备200之间交互中介作用。

图3示出了根据一些实施例的显示设备200的硬件配置框图。如图3，显示设备200包括调谐解调器210、通信器220、检测器230、外部装置接口240、控制器250、显示器260、音频输出接口270、存储器、供电电源、用户接口中的至少一种。

在一些实施例中控制器包括处理器，视频处理器，音频处理器，图形处理器，RAM，ROM，用于输入/输出的第一接口至第n接口。

显示器260包括用于呈现画面的显示屏组件，以及驱动图像显示的驱动组件，用于接收源自控制器输出的图像信号，进行显示视频内容、图像内容以及菜单操控界面的组件以及用户操控UI界面。

显示器260可为液晶显示器、OLED显示器、以及投影显示器，还可以为一种投影装置和投影屏幕。

通信器220是用于根据各种通信协议类型与外部设备或服务器进行通信的组件。例如：通信器可以包括Wifi模块，蓝牙模块，有线以太网模块等其他网络通信协议芯片或近场通信协议芯片，以及红外接收器中的至少一种。显示设备200可以通过通信器220与外部控制设备100或服务器400建立控制信号和数据信号的发送和接收。

用户接口，可用于接收控制装置100(如：红外遥控器等)的控制信号。

检测器230用于采集外部环境或与外部交互的信号。例如，检测器230包括光接收器，用于采集环境光线强度的传感器；或者，检测器230包括图像采集器，如摄像头，可以用于采集外部环境场景、用户的属性或用户交互手势，再或者，检测器230包括声音采集器，如麦克风等，用于接收外部声音。

外部装置接口240可以包括但不限于如下：高清多媒体接口接口(HDMI)、模拟或数据高清分量输入接口(分量)、复合视频输入接口(CVBS)、USB输入接口(USB)、RGB端口等任一个或多个接口。也可以是上述多个接口形成的复合性的输入/输出接口。

调谐解调器210通过有线或无线接收方式接收广播电视信号，以及从多个无线或有线广播电视信号中解调出音视频信号，如以及EPG数据信号。

在一些实施例中，控制器250和调谐解调器210可以位于不同的分体设备中，即调谐解调器210也可在控制器250所在的主体设备的外置设备中，如外置机顶盒等。

控制器250，通过存储在存储器上中各种软件控制程序，来控制显示设备的工作和响应用户的操作。控制器250控制显示设备200的整体操作。例如：响应于接收到用于选择在显示器260上显示UI对象的用户命令，控制器250便可以执行与由用户命令选择的对象有关的操作。

在一些实施例中控制器包括中央处理器(Central Processing Unit，CPU)，视频处理器，音频处理器，图形处理器(Graphics Processing Unit，GPU)，RAM(Random AccessMemory，RAM)，ROM(Read-Only Memory，ROM)，用于输入/输出的第一接口至第n接口，通信总线(Bus)等中的至少一种。

用户可在显示器260上显示的图形用户界面(GUI)输入用户命令，则用户输入接口通过图形用户界面(GUI)接收用户输入命令。或者，用户可通过输入特定的声音或手势进行输入用户命令，则用户输入接口通过传感器识别出声音或手势，来接收用户输入命令。

“用户界面”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面常用的表现形式是图形用户界面(Graphic User Interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

图4示出了根据一些实施例的显示设备200中软件配置图。在一些实施例中，如图4所示，显示设备的系统可以包括内核(Kernel)、命令解析器(shell)、文件系统和应用程序。内核、shell和文件系统一起组成了基本的操作系统结构，它们让用户可以管理文件、运行程序并使用系统。上电后，内核启动，激活内核空间，抽象硬件、初始化硬件参数等，运行并维护虚拟内存、调度器、信号及进程间通信(IPC)。内核启动后，再加载Shell和用户应用程序。应用程序在启动后被编译成机器码，形成一个进程。

如图4所示，将显示设备的系统分为三层，从上至下分别为应用层、中间件层和硬件层。

应用层主要包含电视上的常用应用，以及应用框架(Application Framework)，其中，常用应用主要是基于浏览器Browser开发的应用，例如：HTML5 APPs；以及原生应用(Native APPs)。

应用框架(Application Framework)是一个完整的程序模型，具备标准应用软件所需的一切基本功能，例如：文件存取、资料交换...，以及这些功能的使用接口(工具栏、状态列、菜单、对话框)。

原生应用(Native APPs)可以支持在线或离线，消息推送或本地资源访问。

中间件层包括各种电视协议、多媒体协议以及系统组件等中间件。中间件可以使用系统软件所提供的基础服务(功能)，衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。

硬件层主要包括HAL接口、硬件以及驱动，其中，HAL接口为所有电视芯片对接的统一接口，具体逻辑由各个芯片来实现。驱动主要包含：音频驱动、显示驱动、蓝牙驱动、摄像头驱动、WIFI驱动、USB驱动、HDMI驱动、传感器驱动(如指纹传感器，温度传感器，压力传感器等)、以及电源驱动等。

在一些实施例中，显示设备内安装不同第三方应用，例如，不同的视频客户端应用、音频客户端应用等媒资播放应用。各个应用的媒资播放权益不同，权益类型包括免费类型和付费类型，付费类型包括按套餐支付、按单片支付，或者先免费一段时间后再收费等。

为满足用户对各第三方应用提供的权益的支付需求，显示设备内还配置支付应用。用户在购买第三方应用提供的权益时，显示设备通常在另一个窗口打开支付应用，以呈现支付界面，即支付界面与第三方应用处于两个窗口中。常规下支付应用只会展示自己应用中已有图片，无法展示另一窗口(第三方应用)中实时界面，使得第三方应用的应用界面和支付界面是完全分割的。那么在由第三方应用跳转至支付应用显示时，会给用户带来疑惑和不安全感，例如，用户极易在支付界面忘记要购买的是哪一应用的权益。

另外，支付界面中包括输入框，以便于用户输入支付信息，如支付密码等。那么，为便于用户输入，用户在点击输入框时，会在当前支付界面弹出软键盘，则会出现软键盘对支付界面中的输入框造成遮挡的情况。

为保证用户基于支付界面的支付体验，本申请一些实施例提供一种显示设备，在第三方应用内购买权益时，显示设备被配置为执行支付界面的显示方法，以提高支付流程的体验和支付界面的展示效果。该显示设备可以实现多窗口下第三方应用的应用界面与支付界面共同展示的效果，避免支付界面与第三方应用的应用界面的分割；还可以实现输入框能够自适应软键盘高度的动态展示。

图5示出了根据一些实施例的支付界面的显示方法的流程图。本申请一些实施例提供的一种显示设备200，包括：显示器260，被配置为显示用户界面；与显示器260连接的控制器250，在执行图5所示的支付界面的显示方法时，控制器250被配置为执行下述步骤：

S1、显示第三方应用的应用界面。

其中，应用界面中包括权益支付控件。

显示设备在开机启动后，在显示器中展示设备主页。设备主页展示的内容中包括不同的第三方应用。用户通过遥控器、语音、手势等方式，在设备主页中选择其中一个第三方应用启动，以在显示器中显示第三方应用的应用界面。

图6示出了根据一些实施例的第三方应用的应用界面的示意图。参见图6，如果用户启动的第三方应用提供有至少一个权益，则在第三方应用的应用界面中展示权益支付控件。用户可以基于权益支付控件，查看第三方应用提供的至少一个权益的相关信息。

如果第三方应用为视频客户端应用，则其提供的权益可以为媒资播放的套餐。那么，第三方应用的应用界面中展示视频画面和权益支付控件。

S2、响应于用户触发权益支付控件的指令，获取与第三方应用对应的权益信息。

在用户想要查看第三方应用提供的至少一个权益的相关信息时，用户触发第三方应用的应用界面中的权益支付控件，即可获取对应的权益信息。

在一些实施例中，控制器在执行所述响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息，被进一步配置为：

步骤21、响应于用户触发权益支付控件的指令，控制第三方应用调用SDK模块，SDK模块向支付服务模块发送接口调用请求，接口调用请求包括第三方应用的应用标识。

步骤22、支付服务模块响应于接口调用请求，向服务器发送信息获取请求，信息获取请求包括第三方应用的应用标识，信息获取请求用于指示服务器基于第三方应用的应用标识查询与第三方应用对应的权益信息。

步骤23、接收服务器在响应于信息获取请求后返回的与第三方应用对应的权益信息。

控制器包括SDK模块和支付服务模块。第三方应用中预先配置有SDK插件文件，在获取第三方应用提供的各个权益的权益信息时，第三方应用调用SDK模块向支付服务模块发送接口调用请求。

支付服务模块在接收到接口调用请求后调用服务器的接口，以在服务器中查找第三方应用对应的权益信息。服务器中存储有不同第三方应用所提供的各个权益的权益信息，在显示设备向服务器请求权益信息时，显示设备向服务器发送携带第三方应用的应用标识的信息获取请求。服务器响应于该信息获取请求，基于应用标识即可查询到对应的第三方应用提供的权益信息，并返回给显示设备。

S3、基于第三方应用对应的权益信息，生成权益选择界面，将权益选择界面显示在显示器中，权益选择界面包括至少一个权益选择项，权益选择项用于表征第三方应用提供的权益。

显示设备在接收到服务器返回的第三方应用对应的权益信息，即可基于权益信息生成权益选择界面。权益信息包括不同权益的信息，因此，基于一个权益的信息即可生成一个权益选择项。不同权益的信息包括权益名称、权益价格、简介信息等。

图7示出了根据一些实施例的权益选择界面的示意图。参见图7，权益选择界面中显示至少一个权益选择项，如权益选择项1-3，权益选择项的数量与第三方应用提供的权益数量相同。不同的权益选择项对应不同的权益，用户需支付不同的价格。

S4、响应于用户触发目标权益选择项的指令，生成支付界面，将支付界面显示在显示器中，以及，将第三方应用的内容作为背景图片显示在支付界面的底层。

在用户基于权益选择界面选择其中一个权益选择项之后，即可在显示器中显示支付界面，支付界面用于供用户对目标权益完成支付操作。

图8示出了根据一些实施例的支付界面的示意图。参见图8，支付界面包括输入框、支付简介信息、权益价格、确认按钮和取消按钮等信息。输入框用于供用户输入支付密码，支付简介信息用于介绍当前用户购买的目标权益，权益价格为购买目标权益所需支付的价格，确认按钮用于确认支付操作，取消按钮用于取消支付操作。

在一些实施例中，为保证权益支付的效率，显示设备在检测到用户点击其中一个权益选择项时，先判断是否登录用户账号。在该过程中，控制器在执行响应于用户触发目标权益选择项的指令，生成支付界面，被进一步配置为执行下述步骤：

步骤401、响应于用户触发目标权益选择项的指令，检测显示设备是否登录有用户账号。

步骤402、如果检测到显示设备登录有用户账号，则生成支付界面。

步骤403、如果检测到显示设备未登录有用户账号，则弹出账号登录窗口，在用户基于账号登录窗口登录用户账号后，生成支付界面。

控制器配置有SDK购买接口，以调用支付应用。显示设备在检测到用户点击目标权益选择项后，调用SDK购买接口进入购买环节。在显示设备拉起支付应用过程中，检测显示设备是否登录有用户账号，只有登录用户在行号后才可操作显示设备购买相应的权益。

在检测到显示设备登录有用户账号，则可直接生成支付界面。如果检测到显示设备未登录有用户账号，则弹出账号登录窗口，以便用户进行账号登录。在用户基于账号登录窗口登录用户账号后，再生成支付界面。

在一些实施例中，支付应用独立于任何第三方应用，支持在线快速升级。第三方应用可以通过SDK购买接口调用支付应用，以生成支付界面。如果用户点击权益选择界面中的其中一个权益选择项，则通过SDK购买接口在另一个窗口打开支付应用，使得支付界面和第三方应用的应用界面显示在不同窗口中。

为建立支付界面与第三方应用的应用界面之间的关联性，本申请一些实施例将第三方应用的内容作为支付界面的背景，尽管支付界面与第三方应用的应用界面分属不同窗口，但支付界面背景仍为第三方应用的效果可以提升用户安全感体验。

在一些实施例中，实现支付界面底层显示背景图片的方式可以包括采用截取第三方应用实时图像的方式，或者采用双窗口上下交叠显示的方式。实现支付界面底层显示背景图片的方式也可以采用其他方式，本申请不进行限定。

图9示出了根据一些实施例的在支付界面底层显示背景图片的一种方法流程图。参见图9，在一些实施例中，在实现支付界面底层显示背景图片的方式采用截取第三方应用实时图像的方式时，控制器在执行将支付界面显示在显示器中，以及，将第三方应用的内容作为背景图片显示在支付界面的底层，被进一步配置为：

S411、截取用户在触发权益支付控件之前第三方应用的界面图像，界面图像包括第三方应用的内容。

S412、将支付界面以非全屏状态显示在显示器中，将界面图像以全屏状态显示在支付界面的底层，以将第三方应用的内容作为支付界面的背景图片。

在采用截取第三方应用实时图像的方式时，截取第三方应用的界面图像的时机可以在用户需要购买权益的时刻，即用户点击应用界面中的权益支付控件的时刻；还可以在用户确定购买目标权益的时刻，即用户点击权益选择界面中目标权益选择项的时刻。

在一些实施例中，第三方应用调用SDK购买接口拉起支付应用之后，继续调用截屏方法进行截屏动作。

在执行截屏动作时，显示设备截取第三方应用的实时内容，得到界面图像，并存储在显示设备的存储空间中。在需要使用该界面图像时，直接在存储空间中调用即可。

在一些实施例中，支付界面以非全屏状态显示，例如，支付界面以半屏状态显示，以使得利用第三方应用的内容作为支付界面的背景图片。

图10示出了根据一些实施例的在支付界面底层显示背景图片的一种示意图。参见图10，显示设备在展示支付界面时，将截取的背景图片覆盖在权益选择界面的上层，在背景图片的上层显示半屏状态的支付界面，实现将第三方应用的内容作为支付界面的背景图片的效果。

图11示出了根据一些实施例的在支付界面底层显示背景图片的另一种方法流程图。参见图11，在一些实施例中，在实现支付界面底层显示背景图片的方式采用双窗口上下交叠显示的方式时，控制器在执行所述将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，被进一步配置为：

S421、在用户触发目标权益选择项时，生成支付窗口，支付窗口包括支付界面区域和背景区域。

S422、设置支付界面区域为不透明状态，设置背景区域为透明状态，以及，设置支付窗口的窗口共存参数，窗口共存参数用于表征支付窗口与第三方应用的应用界面所在窗口呈共存状态。

S423、将支付界面显示在支付窗口的支付界面区域，以及，将带有支付界面的支付窗口显示在第三方应用的应用界面所在窗口的上层，实现支付窗口与第三方应用的应用界面所在窗口的共存显示，第三方应用的内容由支付窗口中透明状态的背景区域露出显示，露出显示的第三方应用的内容作为所述支付界面的背景图片。

在采用双窗口上下交叠显示的方式时，第三方应用调用SDK购买接口拉起支付应用时，同步设置支付界面区域为不透明状态(透明度为0％)，设置背景区域为透明状态(透明度为100％)，以及，设置支付窗口的窗口共存参数。基于不透明状态的支付界面区域和透明状态的背景区域，生成支付窗口。

支付界面区域用于展示支付界面，将带有支付界面的支付窗口覆盖在第三方应用的应用界面所在窗口之上，实现双窗口重叠显示。

图12示出了根据一些实施例的在支付界面底层显示背景图片的另一种示意图。参见图12，权益选择界面退出显示，支付窗口和第三方应用的应用界面所在窗口重叠显示，实现双窗口共存显示。支付窗口为全屏状态，支付窗口的背景区域为透明状态，使得将带有支付界面的支付窗口覆盖在第三方应用的应用界面所在窗口之上时，支付窗口中未显示支付界面的区域可以将底层的第三方应用的内容露出显示，实现双窗口重叠、且将第三方应用的内容作为支付界面的背景图片的效果。

需要说明的是，图12中的背景区域实则为透明状态，为了表征支付窗口存在背景区域，图12仅是示例性的将背景区域设置为线条填充状态。

在一些实施例中，还可以将背景区域设置为灰度状态(透明度为0％-100％之间的数值，不包括0％和100％)，以能够将底层的第三方应用的内容露出显示即可。

将第三方应用的内容作为支付界面的背景，可以增加支付界面和第三方应用的关联性，在由第三方应用跳转至支付应用显示时，不会给用户带来分割感，提升用户体验。

在一些实施例中，为便于用户基于支付界面的输入框输入支付密码时，调起的软键盘不会对支付界面中的输入框造成遮挡，影响用户输入的情况。控制器被进一步配置为：

步骤51、响应于用户触发输入框的指令，在支付界面所在窗口的底部弹出软键盘。

步骤52、基于软键盘的高度，调整支付界面中输入框的高度，以使软键盘不遮挡输入框。

在用户基于支付界面中的输入框进行权益支付时，用户可以触发输入框，显示设备可以从当前窗口的底部弹出软键盘。软键盘的窗口与支付界面所在窗口为不同的窗口，因此，如果输入框在相对于支付界面的中部或靠近底部的位置，被调起的软键盘会对输入框造成遮挡，影响用户的输入。

为解决该问题，显示设备基于软键盘的高度，动态调整输入框的高度，将输入框移动至软键盘的覆盖区域之外显示。移动后，输入框和软键盘同时显示并可被用户看到，避免软键盘对输入框的遮挡，便于用户的输入。

图13示出了根据一些实施例的调整输入框的高度的一种方法流程图。在一些实施例中，采用移动输入框相对于支付界面的位置、支付界面不动的方式，避免软键盘对输入框的遮挡。在该过程中，参见图13，控制器在执行步骤52，即执行基于软键盘的高度，调整支付界面中输入框的高度，被进一步配置为执行下述步骤：

S61、获取支付界面所在窗口的第一高度、软键盘的第二高度，以及，输入框至支付界面所在窗口顶端的第三高度。

S62、计算第一高度和第二高度的差值，确定支付界面所在窗口的可视高度。

S63、计算第三高度和可视高度的差值，确定目标高度。

S64、基于目标高度，将输入框沿支付界面向上移动，以使得输入框在软键盘的覆盖区域之外显示。

在通过移动输入框相对于支付界面的位置、支付界面不动的方式实现避免软键盘对输入框的遮挡时，需确认输入框需要移动的目标高度，以在调起软键盘之后将输入框显示在支付界面的可视范围内。

图14示出了根据一些实施例的调整输入框的高度的一种示意图。在一些实施例中，参见图14，支付界面所在窗口的第一高度H1是指支付界面所在窗口的可视范围的高度，软键盘的第二高度H2是指软键盘的本体高度。计算支付界面所在窗口的第一高度H1和软键盘的第二高度H2的差值H3，即为可视高度H3。

输入框的第三高度H4是指输入框的底边到支付界面顶端的距离。计算第三高度H4和可视高度H3的差值，得到目标高度H5。显示设备将输入框向上移动H5的高度，支付界面不动，使得输入框能够从软键盘的覆盖区域移出到支付界面的可视范围内，软键盘不再对输入框造成遮挡，便于用户在输入框中输入支付密码。

在一些实施例中，在上移输入框时，支付应用响应于用户调出软键盘，支付应用确定出输入框的上移高度H5，并修改class为right_content_describe_div(输入框的高度)的margin-top(向上移动高度)的值为H5，从而达到高度上移的目的

在一些实施例中，如果支付界面中输入框的上方还存在文本信息，则在显示设备向上移动输入框时，同步将文本信息向上移动目标高度。如果文本信息的底边距离支付界面所在窗口顶端的高度小于或等于目标高度，则向上移动目标高度后，文本信息可能会消失在支付界面的所在窗口可视范围。如果文本信息的底边距离支付界面所在窗口顶端的高度大于目标高度，则向上移动目标高度后，文本信息不会消失在支付界面的所在窗口可视范围，或者仅有部分内容消失在支付界面的所在窗口可视范围。

图15示出了根据一些实施例的调整输入框的高度的另一种方法流程图。在一些实施例中，采用移动支付界面的方式，避免软键盘对输入框的遮挡。在该过程中，参见图15，控制器在执行步骤52，即基于软键盘的高度，调整支付界面中输入框的高度，被进一步配置为执行下述步骤：

S71、获取输入框在支付界面中的第一位置纵坐标和软键盘的顶点在支付界面中的第二位置纵坐标。

S72、计算第一位置纵坐标和第二位置纵坐标的纵坐标差值。

S73、基于纵坐标差值，将支付界面向上移动，以使得输入框在软键盘的覆盖区域之外显示。

在通过整体移动支付界面的方式实现避免软键盘对输入框的遮挡时，需确认支付界面需要移动的目标高度，以在调起软键盘之后将输入框显示在支付界面的可视范围内。在整体向上移动支付界面时，输入框相对于支付界面的位置不变。

图16示出了根据一些实施例的调整输入框的高度的另一种示意图。在一些实施例中，参见图16，基于支付界面建立二维坐标系，坐标原点位于支付界面的左上角，从上到下为Y轴正向方向，从左到右为X轴正向方向。输入框在支付界面中的第一位置纵坐标y1是指输入框的底边在二维坐标系中的纵坐标值，软键盘的顶点在支付界面中的第二位置纵坐标y2是指软键盘的顶端在二维坐标系中的纵坐标值。

计算第一位置纵坐标y1和第二位置纵坐标y2的纵坐标差值y0＝y1-y2。显示设备将支付界面整体向上移动y0的高度，使得输入框能够从软键盘的覆盖区域移出到支付界面的可视范围内，软键盘不再对输入框造成遮挡，便于用户在输入框中输入支付密码。

在一些实施例中，在整体上移支付界面时，支付应用响应于用户调出软键盘，计算输入框在支付界面中的第一位置纵坐标y1，并将y1参数传递给软键盘。软键盘根据软键盘的顶点在支付界面中的第二位置纵坐标y2，计算二者差值y0＝y1-y2。软键盘通过回调函数将y0返回至支付应用，支付应用会将支付应用的body元素(整体支付界面)中的margin-top(向上移动高度)的值设置为y0，从而达到支付界面整体上移的效果。

在一些实施例中，在用户基于软键盘完成在输入框中支付密码的输入后，用户触发遥控器返回键或OK键，显示设备控制软键盘退出。软键盘不再显示在支付界面所在窗口中，则显示设备再次将输入框和文本信息同时向下移动H5的高度；或者，再次将支付界面整体向下移动y0高度，以恢复至原来位置。

在一些实施例中，上述实施例示例性示出软键盘从支付界面的底部弹出显示时，自适应调整输入框的方案。而软键盘从支付界面的顶部或其他位置弹出显示时，也可采用本申请上述实施例所述方法，具体实现过程不再赘述。

在一些实施例中，支付界面中显示支付简介信息和权益价格。而权益价格可能采用全价显示或按比例显示等方式，对于不同的显示方式需要对权益价格进行对应说明，以便于告知用户其支付的权益的收费情况。例如，在权益价格是全价显示，但实际扣费是按比例扣费时，需要对权益价格及实际扣费情况做特别说明。

在该过程中，控制器被进一步配置为执行下述步骤：

步骤81、在权益信息中获取目标权益选择项对应的权益价格和权益价格的简介信息。

步骤82、将权益价格显示在支付界面中，以及，在权益价格的一侧显示注释标记。

步骤83、在支付界面的指定位置显示注释标记对应的权益价格的简介信息。

权益价格的简介信息是指对权益价格进行解释说明的信息，例如，“将根据您订阅权益的剩余天数扣除首笔费用”。

图17示出了根据一些实施例的支付界面显示注释标记的示意图。在一些实施例中，参见图17，将权益价格显示在支付界面中，并在权益价格的右上角显示注释标记，如“*”号。并在权益价格所处位置的下方，对注释标记标识的权益价格进行解释说明，即显示权益价格的简介信息。

本申请一些实施例提供的一种显示设备，响应于用户触发第三方应用的应用界面中权益支付控件的指令，获取与第三方应用对应的权益信息；并在显示器中显示权益选择界面；响应于用户触发权益选择界面中目标权益选择项的指令，生成支付界面，将支付界面显示在显示器中，以及，将第三方应用的内容作为背景图片显示在支付界面的底层。可见，该显示设备可以实现多窗口下第三方应用的应用界面与支付界面共同展示的效果，建立支付界面与第三方应用的应用界面之间的关联性，避免支付界面与第三方应用的应用界面的分割，提高支付流程的体验和支付界面的展示效果。

图5示出了根据一些实施例的支付界面的显示方法的流程图。参见图5，本申请一些实施例提供的一种支付界面的显示方法，应用于前述实施例提供的显示设备200中，所述方法包括：

S1、显示第三方应用的应用界面，所述应用界面中包括权益支付控件；

S2、响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息；

S3、基于所述第三方应用对应的权益信息，生成权益选择界面，将所述权益选择界面显示在显示器中，所述权益选择界面包括至少一个权益选择项，所述权益选择项用于表征所述第三方应用提供的权益；

S4、响应于用户触发目标权益选择项的指令，生成支付界面，将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，所述支付界面用于供用户对目标权益完成支付操作。

本申请一些实施例提供的一种支付界面的显示方法及显示设备，响应于用户触发第三方应用的应用界面中权益支付控件的指令，获取与第三方应用对应的权益信息；并在显示器中显示权益选择界面；响应于用户触发权益选择界面中目标权益选择项的指令，生成支付界面，将支付界面显示在显示器中，以及，将第三方应用的内容作为背景图片显示在支付界面的底层。可见，该方法及显示设备可以实现多窗口下第三方应用的应用界面与支付界面共同展示的效果，建立支付界面与第三方应用的应用界面之间的关联性，避免支付界面与第三方应用的应用界面的分割，提高支付流程的体验和支付界面的展示效果。

具体实现中，本发明还提供一种计算机可读存储介质，其中，该计算机可读存储介质可存储有程序，该程序执行时可包括本发明提供的支付界面的显示方法的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文：read-onlymemory，简称：ROM)或随机存储记忆体(英文：random access memory，简称：RAM)等。

本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该软件产品可以存储在计算机可读存储介质中。

本说明书中各个实施例之间相同相似的部分互相参见即可。尤其，对于支付界面的显示方法实施例而言，由于其基本相似于显示设备实施例，所以描述的比较简单，相关之处参见显示设备实施例中的说明即可。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

为了方便解释，已经结合具体的实施方式进行了上述说明。但是，上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导，可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释本公开内容，从而使得本领域技术人员更好的使用所述实施方式。

Claims (10)

1.一种显示设备，其特征在于，包括：

显示器，被配置为显示用户界面；

与所述显示器连接的控制器，所述控制器被配置为：

显示第三方应用的应用界面，所述应用界面中包括权益支付控件；

响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息；

基于所述第三方应用对应的权益信息，生成权益选择界面，将所述权益选择界面显示在显示器中，所述权益选择界面包括至少一个权益选择项，所述权益选择项用于表征所述第三方应用提供的权益；

响应于用户触发目标权益选择项的指令，生成支付界面，将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，所述支付界面用于供用户对目标权益完成支付操作。

2.根据权利要求1所述的显示设备，其特征在于，所述控制器在执行所述将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，被进一步配置为：

截取用户在触发所述权益支付控件之前所述第三方应用的界面图像，所述界面图像包括第三方应用的内容；

将所述支付界面以非全屏状态显示在显示器中，将所述界面图像以全屏状态显示在所述支付界面的底层，以将所述第三方应用的内容作为所述支付界面的背景图片。

3.根据权利要求1所述的显示设备，其特征在于，所述控制器在执行所述将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，被进一步配置为：

在用户触发目标权益选择项时，生成支付窗口，所述支付窗口包括支付界面区域和背景区域；

设置所述支付界面区域为不透明状态，设置所述背景区域为透明状态，以及，设置所述支付窗口的窗口共存参数，所述窗口共存参数用于表征支付窗口与所述第三方应用的应用界面所在窗口呈共存状态；

将所述支付界面显示在所述支付窗口的支付界面区域，以及，将带有所述支付界面的支付窗口显示在所述第三方应用的应用界面所在窗口的上层，实现所述支付窗口与所述第三方应用的应用界面所在窗口的共存显示，所述第三方应用的内容由所述支付窗口中透明状态的背景区域露出显示，所述露出显示的第三方应用的内容作为所述支付界面的背景图片。

4.根据权利要求1所述的显示设备，其特征在于，所述支付界面包括用于输入支付信息的输入框；以及，所述控制器被进一步配置为：

响应于用户触发所述输入框的指令，在所述支付界面所在窗口的底部弹出软键盘；

基于所述软键盘的高度，调整所述支付界面中输入框的高度，以使所述软键盘不遮挡所述输入框。

5.根据权利要求4所述的显示设备，其特征在于，所述控制器在执行所述基于所述软键盘的高度，调整所述支付界面中输入框的高度，被进一步配置为：

获取所述支付界面所在窗口的第一高度、所述软键盘的第二高度，以及，所述输入框至支付界面所在窗口顶端的第三高度；

计算所述第一高度和第二高度的差值，确定所述支付界面所在窗口的可视高度；

计算所述第三高度和所述可视高度的差值，确定目标高度；

基于所述目标高度，将所述输入框沿所述支付界面向上移动，以使得所述输入框在所述软键盘的覆盖区域之外显示。

6.根据权利要求4所述的显示设备，其特征在于，所述控制器在执行所述基于所述软键盘的高度，调整所述支付界面中输入框的高度，被进一步配置为：

获取所述输入框在所述支付界面中的第一位置纵坐标和所述软键盘的顶点在所述支付界面中的第二位置纵坐标；

计算所述第一位置纵坐标和第二位置纵坐标的纵坐标差值；

基于所述纵坐标差值，将所述支付界面向上移动，以使得所述输入框在所述软键盘的覆盖区域之外显示。

7.根据权利要求1所述的显示设备，其特征在于，所述控制器包括SDK模块和支付服务模块；以及，所述控制器在执行所述响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息，被进一步配置为：

响应于用户触发所述权益支付控件的指令，控制所述第三方应用调用所述SDK模块，所述SDK模块向所述支付服务模块发送接口调用请求，所述接口调用请求包括第三方应用的应用标识；

所述支付服务模块响应于所述接口调用请求，向服务器发送信息获取请求，所述信息获取请求包括第三方应用的应用标识，所述信息获取请求用于所述指示服务器基于所述第三方应用的应用标识查询与所述第三方应用对应的权益信息；

接收所述服务器在响应于所述信息获取请求后返回的与所述第三方应用对应的权益信息。

8.根据权利要求1所述的显示设备，其特征在于，所述控制器在执行所述响应于用户触发目标权益选择项的指令，生成支付界面，被进一步配置为：

响应于用户触发目标权益选择项的指令，检测显示设备是否登录有用户账号；

如果检测到显示设备登录有用户账号，则生成支付界面；

如果检测到显示设备未登录有用户账号，则弹出账号登录窗口，在用户基于所述账号登录窗口登录用户账号后，生成支付界面。

9.根据权利要求1所述的显示设备，其特征在于，所述控制器被进一步配置为：

在所述权益信息中获取所述目标权益选择项对应的权益价格和所述权益价格的简介信息；

将所述权益价格显示在所述支付界面中，以及，在所述权益价格的一侧显示注释标记；

在所述支付界面的指定位置显示所述注释标记对应的权益价格的简介信息。

10.一种支付界面的显示方法，其特征在于，所述方法包括：

显示第三方应用的应用界面，所述应用界面中包括权益支付控件；

响应于用户触发所述权益支付控件的指令，获取与所述第三方应用对应的权益信息；

基于所述第三方应用对应的权益信息，生成权益选择界面，将所述权益选择界面显示在显示器中，所述权益选择界面包括至少一个权益选择项，所述权益选择项用于表征所述第三方应用提供的权益；

响应于用户触发目标权益选择项的指令，生成支付界面，将所述支付界面显示在显示器中，以及，将所述第三方应用的内容作为背景图片显示在所述支付界面的底层，所述支付界面用于供用户对目标权益完成支付操作。

Images