Application program, settlement server, and control method of terminal

Abstract

To provide an application program which has a consummate function capable of calling easily and gives a natural operation feeling to a user.SOLUTION: An application program is configured so that: on a terminal having a touch panel, a first region on which a code image which is used for electronic settlement performed in cooperation with a settlement server, is displayed, and a second region on which one or more icons for calling a function in the electronic settlement are provided, are displayed; in accordance with swipe of the first region, a method of the electronic settlement is switched between a first method using a charge balance which is charged in advance and managed by the settlement server, and a second method using post settlement; according to swipe of the first region, a display color of the second region is switched between a color in a first group corresponding to the first method and a color in a second group corresponding to the second method; and in an intermediate time point between the swipe start point and completion point, the second region is displayed in the intermediate state.SELECTED DRAWING: Figure 8

Description

[Technical field]

[0001] The present invention relates to an application program, a payment server, and a control method for a terminal device. [Background technology]

[0002] Conventionally, there is known an invention which is an application program for performing electronic payments in cooperation with a payment server, in which the display color of a part of the display screen is changed to a color corresponding to the method of electronic payment selected by the user (Patent Document 1). [Prior art documents] [Patent documents]

[0003] [Patent Document 1] Patent No. 7142798 Summary of the Invention [Problem to be solved by the invention]

[0004] In conventional technology, the display screen space is allocated to a dedicated changeover switch, which may limit the functions that can be easily called up.In addition, the display color changes instantly, which may make the user's operation feel mechanical.

[0005] The present invention has been made in consideration of the above circumstances, and one of its objectives is to provide an application program, a payment server, and a control method for a terminal device that can enhance functions that can be easily called up and give the user a natural feel when operating the application. [Means for solving the problem]

[0006] One aspect of the present invention is an application program for displaying on a terminal device having a touch panel a first area in which a code image used for electronic payment performed in cooperation with a payment server is displayed, and a second area in which icons for calling up one or more functions in the electronic payment are provided, and performing a process to switch the method of the electronic payment between a first method using a charge balance that is pre-charged and managed by the payment server, and a second method using post-payment, in response to the first area being swiped, and switching the display color of the second area between a first group of colors corresponding to the first method and a second group of colors corresponding to the second method, in response to the first area being swiped, and displaying the second area in an intermediate state at an intermediate point between the start and completion of the swipe. Effect of the Invention

[0007] According to one aspect of the present invention, it is possible to enhance functions that can be easily called up and provide the user with a natural feeling of operation. [Brief description of the drawings]

[0008] [Figure 1] FIG. 1 is a diagram showing an example of a configuration for realizing an electronic payment service. [Diagram 2] This is a sequence diagram (part 1) illustrating the general flow of electronic payment. [Diagram 3] This is a sequence diagram (part 2) illustrating the general flow of electronic payment. [Figure 4] 1 is a configuration diagram of a payment server 100 according to a first embodiment. [Diagram 5] FIG. 13 is a diagram showing an example of the contents of user information 172. [Figure 6] FIG. 13 is a diagram showing an example of the contents of affiliated store / store information 176. [Figure 7] FIG. 2 is a diagram showing an example of a top screen IM1 of a payment application 20. [Figure 8] FIG. 13 is a diagram showing a first example of a top screen IM1 at an intermediate point in time when a first area A1 is being swiped. [Figure 9] 9 is a diagram showing an example of a top screen IM1 in a state where the swipe is completed after passing through the state shown in FIG. 8. FIG. [Figure 10] FIG. 13 is a diagram showing an example of a payment screen IM2 of the payment application 20. [Figure 11] FIG. 13 is a diagram showing an example of a payment screen IM2 of the payment application 20. [Figure 12] FIG. 13 is a diagram showing a second example of the top screen IM1 at an intermediate point in time when the first area A1 is being swiped. [Figure 13] FIG. 13 is a diagram showing a third example of the top screen IM1 at an intermediate point in time when the first area A1 is being swiped. [Figure 14] FIG. 13 is a diagram showing a fourth example of control of the top screen IM1. [Figure 15] FIG. 13 is a diagram showing a fourth example of control of the top screen IM1. [Figure 16] FIG. 13 is a diagram showing how an area A1-1 and an area A1-2 are displayed side by side. [Figure 17] FIG. 13 is a diagram showing a fifth example of the top screen IM1 at an intermediate point in time when the first area A1 is being swiped. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0009] Hereinafter, with reference to the drawings, an embodiment of the application program, the payment server, and the control method of the terminal device (user terminal device) of the present invention will be described. Various devices for providing services to users and performing internal analysis, such as the "server", "management device", and "information providing device" that will appear below, may be realized by a group of distributed devices, and each device may be operated by a different business operator. Furthermore, the owner of the hardware of the device (the cloud server provider) and the business that actually operates the device may also be different. The application program and the payment server work together to provide an electronic payment service. In the following description, the application program is referred to as a payment app. The electronic payment service is a service that supports payments related to the purchase of goods and services at a store. The store is, for example, a physical store (real store) that exists in the real world, but may also include a virtual store for electronic commerce. The virtual store may include one provided by an entity different from the operator of the electronic payment service. In that case, when making a payment for shopping at the virtual store, the screen is controlled to transition to an interface screen of the electronic payment service. In the electronic payment service, the store is treated as belonging to, for example, an affiliated store (brand), and processing such as payment when a purchase is made at the store is mainly performed between the user and the affiliated store. Alternatively, processing such as payment may be carried out between the user and the store.

[0010] [Electronic payment service] Fig. 1 is a diagram showing an example of a configuration for realizing an electronic payment service. The electronic payment service is realized mainly by a payment server 100. The payment server 100 communicates with, for example, one or more user terminal devices 10, one or more first store terminal devices 50, and one or more second store terminal devices 70 via a network NW. The network NW includes, for example, the Internet, a LAN (Local Area Network), a wireless base station, a provider device, and the like.

[0011] The user terminal device 10 is, for example, a portable terminal device such as a smartphone or a tablet terminal. The user terminal device 10 is a computer device having at least an optical reading function, a communication function, a display function, an input reception function, and a program execution function. In the following description, components for realizing these functions are referred to as a camera, a communication device, a touch panel, a CPU (Central Processing Unit), etc. In the user terminal device 10, a processor such as a CPU executes a payment application 20, thereby operating to provide an electronic payment service to a user in cooperation with a payment server 100. The payment application 20 is installed in the user terminal device 10 from, for example, an application store, and controls the camera, communication device, touch panel, etc.

[0012] The first store terminal device 50 is installed, for example, in a store. The first store terminal device 50 is a computer device having at least a product price acquisition function, an optical reading function, a program execution function, and a communication function. The first store terminal device 50 includes a so-called POS (Point of Sale) device, and the product price acquisition function and the optical reading function may be realized by the POS device. The store code image 60 is placed in the store, and is a code image such as a QR code (registered trademark) printed on a paper or plastic medium. The store code image 60 may be displayed on a display placed in the store (which may be the display of a terminal device such as a smartphone).

[0013] The second store terminal device 70 is used by the operator of the affiliated store. The second store terminal device 70 is a smartphone, a tablet terminal, a personal computer, or the like. An interface 72 for affiliated stores runs on the second store terminal device 70. The interface 72 for affiliated stores may be an app for affiliated stores or a browser. The interface 72 for affiliated stores accepts coupon settings and the like made by the operator of the affiliated store and transmits them to the payment server 100. The second store terminal device 70, which is a smartphone, has the function of displaying a code image corresponding to a store code image and reading a code image displayed by the user terminal device 10 by executing the app for affiliated stores.

[0014] The payment server 100 realizes electronic payment based on payment information received from the user terminal device 10 or the first store terminal device 50. The first store terminal device 50 may include a POS device and an affiliated store server, in which case the payment information is sent from the POS device via the affiliated store server to the payment server 100. In the following explanation, no distinction is made between these two and it is assumed that the payment information is sent from the first store terminal device 50.

[0015] 2 and 3 are sequence diagrams illustrating the general flow of electronic payment. There may be two patterns of electronic payment: pattern 1 and pattern 2.

[0016] In the case of pattern 1 (hereinafter referred to as user scan) shown in FIG. 2, the user terminal device 10 with the payment application 20 activated decodes the store code image 60 by the optical reading function (S1). The store code image 60 includes store URL (Uniform Resource Locator) information. This store URL is an electronic payment service domain to which store-identifying information is added, and is associated with an affiliated store ID, a store ID, etc. in the payment server 100 (described later). The payment application 20 transmits the first payment information including the store URL and the account ID to the payment server 100 (S2). The payment server 100 searches for store information (described later) from the affiliated store ID and the store ID corresponding to the store URL, acquires the affiliated store name and the store name information (S3), and transmits it to the payment application 20 (S4). The user inputs the payment amount into the user terminal device 10 on the screen on which the affiliated store name and the store name are displayed (S5). Then, the user terminal device 10 generates second payment information including at least the payment amount, and transmits it to the payment server 100 (S6). The payment server 100 performs electronic payment based on the received second payment information (S7). The payment server 100 then transmits a payment completion notice (information for displaying a payment completion screen) to the payment application 20 (S8), and the payment application 20 displays the payment completion screen (S9). Note that when the store code image 60 is displayed on a display installed in the store, the store code image 60 may include not only the store URL but also information on the payment amount. In this case, the step of the user inputting the payment amount is omitted, and the information on the payment amount is included in the first payment information and transmitted to the payment server 100. Information on the affiliated store name and the store name may be included in the payment completion screen and displayed.

[0017] In the case of pattern 2 (hereinafter referred to as store scan) shown in FIG. 3, when the payment application 20 is started, when a payment operation is performed in the payment application 20, when an automatic update timing (e.g., every minute) occurs, and at other timings, the payment application 20 transmits a request for issuing a one-time code to the payment server 100 (S11). The payment server 100 generates a one-time code (S12) and transmits it to the payment application 20 (S13). The payment application 20 displays a code image such as a QR code or a barcode generated based on the one-time code (S14). The user holds (presents) the display surface of the user terminal device 10 over the first store terminal device 50, and the first store terminal device 50 decodes the code image by an optical reading function and obtains the one-time code, etc. (S15). The first store terminal device 50 then generates payment information including the one-time code, payment amount, affiliated store ID, store ID, etc., and transmits it to the payment server 100 (S16). The payment amount information is acquired in advance by reading a barcode or manually entering it. The payment server 100 identifies the user corresponding to the one-time code based on the received information and performs electronic payment (S17). The payment server 100 then transmits a payment completion notice to the payment application 20 (S18), and the payment application 20 displays a payment completion screen (S19).

[0018] Note that electronic payment may be performed using only one of the above patterns. Furthermore, the "account ID" described in FIG. 2 may be other information (e.g., a phone number) that can be used as user identification information. Furthermore, issuance of a one-time code may be omitted in the store scan, and the payment application 20 may display a code image generated based on the user's account ID. In this case, the payment server 100 identifies the user corresponding to the account ID instead of identifying the user corresponding to the one-time code.

[0019] [Payment server] FIG. 4 is a configuration diagram of the payment server 100 according to the first embodiment. The payment server 100 includes, for example, a communication unit 110, a payment content providing unit 120, a payment processing unit 130, an information management unit 140, and a storage unit 170. The components other than the communication unit 110 and the storage unit 170 are realized by, for example, a hardware processor such as a CPU executing a program (software). Some or all of these components may be realized by hardware (including circuitry) such as an LSI (Large Scale Integration), an ASIC (Application Specific Integrated Circuit), an FPGA (Field-Programmable Gate Array), or a GPU (Graphics Processing Unit), or may be realized by cooperation between software and hardware. The program may be stored in advance in a storage device (storage device having a non-transient storage medium) such as an HDD (Hard Disk Drive) or a flash memory, or may be stored in a removable storage medium (non-transient storage medium) such as a DVD or a CD-ROM, and may be installed in the storage device by mounting the storage medium in a drive device.

[0020] The storage unit 170 is a HDD, a flash memory, a RAM (Random Access Memory), etc. The storage unit 170 may be a NAS (Network Attached Storage) device that the payment server 100 can access via a network. The storage unit 170 stores information such as user information 172, payment content information 174, and affiliated store / shop information 176.

[0021] The communication unit 110 is a communication interface for connecting to the network NW. The communication unit 110 is, for example, a network interface card.

[0022] The payment content providing unit 120 has, for example, a function of a Web server, and provides information (content) for displaying various screens of the electronic payment service to the user terminal device 10. The payment content providing unit 120 appropriately reads necessary content from the payment content information 174 and provides it to the user terminal device 10. The user terminal device 10 accepts various inputs by the user while the content is being played by the payment application 20, and transmits the above-mentioned payment information and the like to the payment server 100.

[0023] The payment processing unit 130 performs payment processing based on the payment information transmitted by the user terminal device 10 or the first store terminal device 50. The payment processing unit 130 performs payment processing while referring to the user information 172.

[0024] FIG. 5 is a diagram showing an example of the contents of the user information 172. The user information 172 is an example of the registration information of a user. The user information 172 is, for example, a user URL, an account ID, a telephone number, a password, as well as information associated with an email address, a user ID, a name, an address, a date of birth, a registration date, a charge balance, a post-payment setting, a post-payment limit, a post-payment usage amount, a post-payment available amount, a payment method setting, a bank account, a credit card number, a charge history information, and a payment history information. The user URL is used for a remittance process between users. When registering for the electronic payment service, it is necessary to register a telephone number and a password. The account ID is issued to the user by the payment server 100, and the user ID is an ID that can be set by the user at will (does not have to be set). Similarly, the email address, and the name, address, and date of birth are information that can be set by the user at will (does not have to be set). The registration date is the date on which the user registered for the electronic payment service (the date on which the account was created). Hereinafter, the user's instance (electronic payment account) to which this information is associated will be referred to as an account.

[0025] The charge balance is information indicating the balance of electronic money that is set by a user by transferring money to an account in advance. Methods of transfer include transfer from an ATM (Automatic Teller Machine) of a designated company (bank) and transfer from a registered bank account. The deferred payment setting is information indicating whether or not the setting for enabling electronic payment by deferred payment has been completed, and is set to either "completed" or "not completed." Further details of deferred payment will be described later. The payment method setting is setting information indicating whether the user will make electronic payment from the charge balance at that time, or payment by deferred payment (credit payment) (an example of post-payment). The bank account and credit card number are information (account number, card number) of a bank account or credit card number that can be deposited into an electronic payment service. The charge history information is a history of the user transferring money to an electronic payment service in advance to increase the charge balance. The payment history information is information indicating the details of the payment made by the user (date and time, store ID of the store where the purchase was made, payment amount, payment method, etc.) for each payment.

[0026] 6 is a diagram showing an example of the contents of affiliated store / store information 176. The affiliated store / store information 176 includes, for example, a first table 176A in which an affiliated store ID and a store ID are associated with a store URL, a second table 176B in which an affiliated store name and sales amount (described above) are associated with an affiliated store ID, and a third table 176C in which a store ID is associated with a store name. In addition to this information, the affiliated store / store information 176 may also include information such as the category of the affiliated store or store, the location of the store, and payment patterns.

[0027] The information management unit 140 manages user information 172 and affiliated store / store information 176 based on information acquired from the user terminal device 10 and the second store terminal device 70. The information management unit 140 adds new records to, edits, and deletes the user information 172 and affiliated store / store information 176.

[0028] [Electronic payment] When payment information is acquired from the user terminal device 10 or the first store terminal device 50, the payment processing unit 130 refers to the user information 172 to acquire the "payment method setting" of the user. For a user whose "payment method setting" is set to "charge balance", the payment processing unit 130 performs electronic payment as follows (an example of a first method). For example, the payment processing unit 130 performs electronic payment by decreasing the charge balance managed in association with the user ID and increasing the item value of the affiliated store's sales. The item value of the affiliated store's sales is not itself used as electronic money, for example, and an amount corresponding to the item value of the sales is transferred to a bank account in a cycle according to an agreement between the affiliated store and the electronic payment service.

[0029] The payment processing unit 130 performs electronic payment for users whose "setting information" is set to "deferred payment" as follows. Deferred payment is, for example, a case where a credit card company affiliated with an electronic payment service provider acts as a creditor and allows electronic payment that is not dependent on the charge balance within the deferred payment limit (an example of the second method). The electronic payment service provider may also serve as a credit card company. To receive the deferred payment service, a user may be required to obtain an affiliated credit card provided by the credit card company. The amount used for deferred payment is settled on the payment date of the following month in a lump sum for one month, for example, by debiting from a bank account. In this case, the payment processing unit 130 manages the payment amount by adding the payment amount to the deferred payment usage amount and subtracting the same amount from the deferred payment available amount, and the credit card company actually debits the amount on the closing date. If the payment amount exceeds the deferred payment available amount at the time of provisional payment, an error notification is returned to the payment application 20.

[0030] [Top screen control example 1] FIG. 7 is a diagram showing an example of the top screen IM1 of the payment application 20. The top screen IM1 includes a first area A1 in which a code image CD is displayed, and a second area A2 in which an icon for calling one or more functions in electronic payment is provided. The area in the figure to which the "Pay" button B2 is associated may also be an example of the "second area" in the claims. The function of the "Pay" button B2 will be described later. The second area A2 and the area to which the "Pay" button B2 is associated are displayed in a first group of colors. The first group of colors are, for example, warm colors, and are also image colors of electronic payment companies. The code image CD includes, for example, a barcode and a QR code. In addition, in the first area A1, text (for example, "Balance payment" / "Credit card payment") indicating whether electronic payment is to be made using the charge balance or by deferred payment is displayed together with the code image CD. This text is drawn by the payment application 20 based on information (whether it is balance payment or deferred payment) updated by the payment application 20 every time the first area A1 is swiped. Furthermore, a flip button B1 may be provided in the first area A1. The function of the flip button B1 will also be described later. The "button" is a GUI (Graphical User Interface) realized in cooperation with a touch panel, and is also called an "icon." The second area A2 is provided with buttons for easily calling up major functions in electronic payment, such as a button for instructing scanning (starting a user scan), a button for enabling browsing of history, and a button B3 for instructing charging. Compared to the invention described in Patent Document 1, the space available for buttons has increased by omitting the changeover switch SW, and functions can be enhanced.

[0031] The payment application 20 performs a process for switching the electronic payment method between a first method based on the charge balance and a second method based on post-payment (in other words, post-payment, credit payment) in response to the swiping of the first area A1. The process for switching the electronic payment method is, for example, a process for transmitting information indicating that the method has been switched (or information indicating which method will be selected as a result of the switching) to the payment server 100 and storing the information in the memory of the user terminal device 10. In addition, the payment application 20 switches the display color of the second area A2 between a first group of colors corresponding to the first method and a second group of colors corresponding to the second method in response to the swiping of the first area A1, and displays the second area A2 in an intermediate state at an intermediate point between the start and end of the swipe. The start of the swipe is the point at which the user's finger is placed on the touch panel, and the end is the point at which the user's finger is slid beyond a reference distance at which it is determined that the swipe has been performed. In the example of FIG. 7, the electronic payment method is set to the first method, and the second area A2 is displayed in the first group of colors. The second group of colors is, for example, a color that contrasts with the first group of colors and is a cool color. The first group of colors and the second group of colors may each refer to one color (in this case, they can be said to be the first color and the second color), or may have a range of warm colors and cool colors (for example, both vermilion and crimson may be included in the first group of colors, and both light blue and navy blue may be included in the second group of colors). The payment application 20 displays the first area A1 in the intermediate state, for example, by an animation showing the change. In the following description, the change from the first method to the second method will be mainly described, but the change from the second method to the first method can be performed by the reverse operation or the same operation.

[0032] FIG. 8 is a diagram showing a first example of the top screen IM1 at an intermediate point when the first area A1 is swiped. When the user starts swiping horizontally, the payment application 20 slides the first area A1 (hereinafter referred to as area A1-1) corresponding to the first method horizontally (in the figure, the X direction (the short side direction of the user terminal device 10)), and makes the first area A1 (hereinafter referred to as area A1-2) corresponding to the second method appear from the edge of the screen and move it toward the front (the display position of the area A1 before the start of the swipe operation, which is an example of the "reference position"). The area A1-1 corresponding to the first method is, for example, an area in which text representing the first method is displayed and information representing the first method is embedded in the code image CD. The area A1-2 corresponding to the second method is, for example, an area in which text representing the second method is displayed and information representing the second method is embedded in the code image CD. The code image CD may be common to the first method and the second method. The payment application 20 controls the display color of the second area A2 to gradually approach the colors of the second area A2 from the colors of the first group to the colors of the second group according to the progress of the swipe operation from the start to the completion of the swipe operation, so that the display color becomes the color of the second area A2 at the completion of the swipe operation. For example, the display color is changed from red to orange to purple to green to blue. Conversely, when a swipe is performed while the area A1-2 is displayed, the payment application 20 controls the display color of the second area A2 to gradually approach the colors of the first area A2 from the colors of the second group to the colors of the first group, so that the display color becomes the color of the first area A2 at the completion of the swipe operation. If the swipe is made in the opposite direction before the swipe is completed, the payment application 20 returns the display color to the original state retroactively. The payment application 20 may limit the swipe direction in which such an operation is accepted to one direction, or may accept swipes in both directions.

[0033] FIG. 9 is a diagram showing an example of the top screen IM1 in a state where swiping is completed through the state shown in FIG. 8. In this state, the second area A2 and the area associated with the "Pay" button B2 are displayed in the color of the second group. In the first area A1, a code image CD and text ("Credit card payment") indicating that electronic payment is to be made by deferred payment are displayed. In addition, the button B3 instructing charging in the second area A2 is replaced with a button B4 (titled "Card" indicating deferred payment) for calling up a screen for performing various operations related to deferred payment. Note that one or both of the buttons B3 and B4 may not be a GUI switch with a function of calling up a specific function (menu) in electronic payment, but may simply be an image (object) for indicating the currently selected method of electronic payment.

[0034] In this way, by setting the first area A1 as the swipe target and changing the display of the second area A2 over time in accordance with the progress of the swipe, it is possible to enhance the number of functions that can be easily called up and provide the user with a natural feel for operation.

[0035] When flip button B1 is operated by a user, the state in Fig. 7 and the state in Fig. 9 are switched without passing through the state shown in Fig. 8. At this time, area A1-1 and area A1-2 are in a front-back relationship, and may be displayed in an animation in which they are inverted by operating flip button B1.

[0036] When the "Pay" button B2 is operated in the state shown in Fig. 7, the screen transitions to a payment screen IM2 shown in Fig. 10. Fig. 10 is a diagram showing an example of the payment screen IM2 of the payment application 20. As shown in the figure, this payment screen IM2 includes an area A3 in which a code image CD and a charge balance, i.e., an available amount, are displayed, and the color (background color) of the part surrounding area A3 is displayed in the first group of colors.

[0037] On the other hand, when the "Pay" button B2 is operated in the state shown in Fig. 9, the screen transitions to the payment screen IM2 shown in Fig. 11. Fig. 11 is a diagram showing an example of the payment screen IM2 of the payment application 20. As shown in the figure, this payment screen IM2 includes an area A3 in which a code image CD, an available balance for deferred payment (credit payment), etc. are displayed, and the color (background color) of the part surrounding area A3 is displayed in the second group of colors.

[0038] In this way, the payment application 20 displays the second area A2 and the like in the first group of colors when payment by charge balance is selected, and displays them in the second group of colors when payment by deferred payment is selected. This allows the user to continuously recognize which payment method is currently set for electronic payment. If only the display color of the top screen IM1 is switched between the first group of colors and the second group of colors, and the distinction by display color disappears after transition to the payment screen IM2, there is a concern that the user will not be able to intuitively recognize the payment method setting at the payment stage, but this concern can be eliminated by controlling the display color as described above.

[0039] [Top screen control example 2] Screen control during the swiping of the first area A1 may be performed as follows. FIG. 12 is a diagram showing a second example of the top screen IM1 at an intermediate point when the first area A1 is swiped. In this example, when the user starts swiping horizontally, the payment application 20 slides the area A1-1 in an arc shape (in the figure, a trajectory close to an arc centered on an axis along the Z direction (the normal direction of the display surface of the user terminal device 10)) horizontally, and makes the area A1-2 appear from the edge of the screen (diagonally below the front part) and move toward the front part. Other matters described in FIGS. 7 and 9-11 may be the same. In the second example, the button B3 instructing charging in the second area A2 is replaced with a button B4 for calling up a screen for performing various operations related to postpayment as the swipe progresses, but for example, at the end or completion of the swipe, the button B3 may be displayed in an animation that looks like it rotates vertically (around an axis along the X direction in the figure) and changes to the button B4. The same applies to the third to fifth examples.

[0040] [Third example of top screen control] 13 is a diagram showing a third example of the top screen IM1 at an intermediate point in time when the first area A1 is being swiped. In this example, when the user starts swiping horizontally, the payment application 20 controls the areas A1-1 and A1-2 in the same manner as in the first example, but displays the second area A2 so that the ratio of the part displayed in the first group of colors and the part displayed in the second group of colors gradually changes according to the progress of the swipe. At this time, the payment application 20 displays the area A1-2 and the part displayed in the second group of colors so that they move in the same direction in conjunction with each other. The display color of the area where the "Pay" button is provided may be controlled in the same manner as in the second example.

[0041] [Top screen control example 4] 14 and 15 are diagrams showing a fourth example of control of the top screen IM1. FIG. 14 shows a state before a swipe operation is performed, and a small area A1-2 is displayed in a position that appears behind the area A1-1. In this example, the payment application 20 performs display control so that when the user starts a horizontal swipe, the area A1-1 rotates horizontally (around an axis along the Y direction (long side direction of the user terminal device 10) in the figure) and moves to the original position of the area A1-2 (back side), and the area A1-2 rotates horizontally and appears to move to the original position of the area A1-1 (front side). The display color of the second area A2 may be controlled in the same manner as in the first example.

[0042] In the fourth example, the area A1-1 and the area A1-2 may be displayed side by side in response to a tap on the area A1-1 or the area A1-2. Fig. 16 is a diagram showing a state in which the area A1-1 and the area A1-2 are displayed side by side.

[0043] In the fourth example, before a swipe operation is performed, either area A1-1 or area A1-2 that is on the back side may not be displayed small.

[0044] [Fifth example of top screen control] 17 is a diagram showing a fifth example of the top screen IM1 at an intermediate point in time when the first area A1 is being swiped. In this example, the payment application 20 performs display control so that when the user starts a vertical swipe, the area A1-1 appears to rotate vertically (around an axis along the X direction in the figure) and move to the original position of the area A1-2 (back side), and the area A1-2 appears to rotate horizontally and move to the original position of the area A1-1 (front side). The display color of the second area A2 may be controlled in the same manner as in the first example.

[0045] The examples of the top screen control can be implemented in an appropriate combination. For example, the movement of areas A1-1 and A1-2 can be performed as in the second example, and the display color of area A2 can be controlled as in the third example.

[0046] <Other embodiments> In the embodiment, the display color of the display screen of the payment application 20 is controlled by the payment application 20 performing the determination process and rendering for switching, but the payment server 100 may control the display color. In this case, the payment server 100 has a display control unit and performs the same process as the top screen control performed by the payment application 20 described above.

[0047] According to the embodiment described above, a terminal device having a touch panel displays a first area in which a code image used for electronic payment performed in cooperation with a payment server is displayed, and a second area in which icons for calling up one or more functions in electronic payment are provided, and as the first area is swiped, a process is performed to switch the method of electronic payment between a first method using a charge balance that is pre-charged and managed by the payment server, and a second method using post-payment, and as the first area is swiped, the display color of the second area is switched between a first group of colors corresponding to the first method and a second group of colors corresponding to the second method, and at an intermediate point between the start and completion of the swipe, the second area is displayed in an intermediate state, thereby enriching the functions that can be easily called up and providing the user with a natural feel for operation.

[0048] The above describes the form for carrying out the present invention using an embodiment, but the present invention is not limited to such an embodiment, and various modifications and substitutions can be made within the scope that does not deviate from the gist of the present invention. [Explanation of symbols]

[0049] 10 User terminal device 20. Payment App 100 Payment Server 120 Payment Contents Provider 130 Payment processing unit 140 Information Management Department

Claims

1. A terminal device having a touch panel, displaying a first area in which a code image used for electronic settlement performed in cooperation with a settlement server is displayed, and a second area in which one or more icons for calling up functions in the electronic settlement are provided; performing a process for switching the method of the electronic payment between a first method using a charge balance that is charged in advance and managed by the payment server and a second method using a post-payment method in response to the first area being swiped; In response to the first region being swiped, a display color of the second region is switched between a first group of colors corresponding to the first method and a second group of colors corresponding to the second method, and the second region is displayed in an intermediate state at an intermediate point between a start point and a completion point of the swipe. Application program for.

2. The terminal device, When switching the display color of the second region in response to a swipe of the first region, the second region is displayed so that the display color gradually changes from the first group of colors to the second group of colors, or from the second group of colors to the first group of colors. The application program according to claim 1.

3. The terminal device, When switching the display color of the second region in response to the swiping of the first region, the second region is displayed so that a ratio of a portion displayed in the first group of colors and a portion displayed in the second group of colors gradually changes. The application program according to claim 1.

4. The terminal device, In response to the first area being swiped, performing an animation display in which the first region is switched between a first state in which information indicating that the first method is selected is displayed and a second state in which information indicating that the second method is selected is displayed; The application program according to claim 1.

5. The terminal device, When switching the first region from the first state to the second state, the first region in the first state is slid laterally from a reference position, and the first region in the second state is displayed at the reference position instead; When switching the first region from the second state to the first state, the first region in the second state is slid laterally from the reference position, and the first region in the first state is displayed at the reference position instead.

5. The application program according to claim 4.

6. The terminal device, When switching the first region from the first state to the second state, the first region in the first state is moved to a rear side of the first region in the second state in a process of sliding the first region in the first state laterally from the reference position; When switching the first region from the second state to the first state, the first region in the second state is moved to a rear side of the first region in the first state during a process of sliding the first region in the second state laterally from the reference position.

6. The application program according to claim 5.

7. The terminal device, When switching the first region from the previous first state to the second state, the first region in the first state is slid in an arc shape from a reference position, and the first region in the second state is displayed at the reference position instead; When switching the first region from the previous second state to the first state, the first region in the second state is slid in an arc shape from the reference position, and the first region in the first state is displayed at the reference position instead.

5. The application program according to claim 4.

8. The terminal device, When switching the first region from the first state to the second state, the first region in the first state is slid vertically from a reference position, and the first region in the second state is displayed at the reference position instead; When switching the first region from the second state to the first state, the first region in the second state is slid vertically from the reference position, and the first region in the first state is displayed at the reference position instead.

5. The application program according to claim 4.

9. The terminal device, In response to a tap on the first region, displaying the first region in the first state and the second region in the second state side by side; 5. The application program according to claim 4.

10. The terminal device, displaying a first code image corresponding to the first method in the first region in the first state; displaying a second code image corresponding to the second method in the first region in the second state; 5. The application program according to claim 4.

11. When the electronic payment method is a first method, the one or more icons in the second area include an icon for instructing a charge; When the electronic payment method is a second method, the one or more icons in the second area include an icon for calling up a screen for performing operations related to deferred payment instead of the icon for instructing the charging.

2. The application program according to claim 1.

12. A payment server capable of communicating with a terminal device and allowing a user to make an electronic payment at a store in cooperation with an application program running on the terminal device, The terminal device, displaying a first area in which a code image used for electronic settlement performed in cooperation with a settlement server is displayed, and a second area in which one or more icons for calling up functions in the electronic settlement are provided; performing a process for switching the method of the electronic payment between a first method using a charge balance that is charged in advance and managed by the payment server and a second method using a post-payment method in response to the first area being swiped; In response to the first region being swiped, a display color of the second region is switched between a first group of colors corresponding to the first method and a second group of colors corresponding to the second method, and the second region is displayed in an intermediate state at an intermediate point between a start point and a completion point of the swipe. A payment server comprising a display control unit.

13. A terminal device having a touch panel, displaying a first area in which a code image used for electronic settlement performed in cooperation with a settlement server is displayed, and a second area in which one or more icons for calling up functions in the electronic settlement are provided; performing a process for switching the method of the electronic payment between a first method using a charge balance that is charged in advance and managed by the payment server and a second method using a post-payment method in response to the first area being swiped; In response to the first region being swiped, a display color of the second region is switched between a first group of colors corresponding to the first method and a second group of colors corresponding to the second method, and the second region is displayed in an intermediate state at an intermediate point between a start point and a completion point of the swipe. A method for controlling a terminal device.

Images