Accurate images in graphical user interfaces to enable data transfer
Systems, methods, and computer-readable media for providing accurate images of cards. An application executing on a mobile device may receive authentication credentials for an account, determine a card associated with the account, and determine a card manufacturer identifier (CMID) of the card. The application may receive, from a digital asset management system based on the CMID, a plurality of metadata attributes of the card and one or more images of the card. The application may determine, based on the metadata attributes and attributes of the mobile device, a first orientation of the card to enable near-field communication (NFC) data transfer between the card and the mobile device. The application may select a first image of the card. The application may generate a graphical user interface (GUI) including the first image and an indication specifying to tap the card to the mobile device according to the first orientation.
1. A method, comprising:
displaying, by an application executing on a processor of a device, a first image of a plurality of images of a contactless card in a graphical user interface (GUI), the first image depicting the contactless card according to a first orientation;
determining, by the application, that near-field communication (NFC) data transfer has not been initiated between the device and the contactless card within a threshold amount of time;
determining, by the application based on a plurality of metadata attributes of the contactless card and a plurality of attributes of the device, a second orientation different than the first orientation; and
updating, by the application, the GUI to display a second image of the plurality of images depicting the contactless card according to the second orientation and display an indication specifying to tap the contactless card to the device according to the second orientation.
2. The method of claim 1 , further comprising:
selecting, by the application based on the second orientation, the second image of the plurality of images depicting the contactless card according to the second orientation.
3. The method of claim 1 , further comprising:
receiving, by the application, a card manufacturer identifier (CMID) of the contactless card; and
receiving, by the application based on the CMID, the plurality of images of the contactless card and the plurality of metadata attributes of the contactless card.
4. The method of claim 1 , further comprising:
capturing, by the application via a camera, an image; and
determining, by the application based on an analysis of the image, that the image depicts the contactless card.
5. The method of claim 4 , further comprising:
detecting, by the application based on the image, a graphical marker on a surface of the contactless card; and
determine, by the application based on the graphical marker, at least one of the plurality of metadata attributes of the contactless card.
6. The method of claim 1 , further comprising:
overlaying, by the application, the plurality of attributes of the contactless card on the second image; and
displaying, by the application, the second image including the overlaid attributes of the contactless card in the GUI.
7. The method of claim 1 , wherein the first orientation aligns a communications interface of contactless card to a communications interface of the device, wherein the second orientation aligns the communications interface of contactless card to the communications interface of the device.
8. A non-transitory computer-readable storage medium, the computer-readable storage medium including instructions that when executed by a processor of a device, cause the processor to:
display a first image of a plurality of images of a contactless card in a graphical user interface (GUI), the first image depicting the contactless card according to a first orientation;
determine that near-field communication (NFC) data transfer has not been initiated between the device and the contactless card within a threshold amount of time;
determine, based on a plurality of metadata attributes of the contactless card and a plurality of attributes of the device, a second orientation different than the first orientation; and
update the GUI to display a second image of the plurality of images depicting the contactless card according to the second orientation and display an indication specifying to tap the contactless card to the device according to the second orientation.
9. The computer-readable storage medium of claim 8 , wherein the instructions further cause the processor to:
select, based on the second orientation, the second image of the plurality of images depicting the contactless card according to the second orientation.
10. The computer-readable storage medium of claim 8 , wherein the instructions further cause the processor to:
receive a card manufacturer identifier (CMID) of the contactless card; and
receive, based on the CMID, the plurality of images of the contactless card and the plurality of metadata attributes of the contactless card.
11. The computer-readable storage medium of claim 8 , wherein the instructions further cause the processor to:
capture, via a camera, an image; and
determine, based on an analysis of the image, that the image depicts the contactless card.
12. The computer-readable storage medium of claim 11 , wherein the instructions further cause the processor to:
detect, based on the image, a graphical marker on a surface of the contactless card; and
determine, based on the graphical marker, at least one of the plurality of metadata attributes of the contactless card.
13. The computer-readable storage medium of claim 8 , wherein the instructions further cause the processor to:
overlay the plurality of attributes of the contactless card on the second image; and
display the second image including the overlaid attributes of the contactless card in the GUI.
14. The computer-readable storage medium of claim 8 , wherein the first orientation aligns a communications interface of contactless card to a communications interface of the device, wherein the second orientation aligns the communications interface of contactless card to the communications interface of the device.
15. A computing apparatus comprising:
a processor; and
a memory storing instructions that, when executed by the processor, cause the processor to:
display a first image of a plurality of images of a contactless card in a graphical user interface (GUI), the first image depicting the contactless card according to a first orientation;
determine that near-field communication (NFC) data transfer has not been initiated between the apparatus and the contactless card within a threshold amount of time;
determine, based on a plurality of metadata attributes of the contactless card and a plurality of attributes of the apparatus, a second orientation different than the first orientation; and
update the GUI to display a second image of the plurality of images depicting the contactless card according to the second orientation and display an indication specifying to tap the contactless card to the apparatus according to the second orientation.
16. The computing apparatus of claim 15 , wherein the instructions further cause the processor to:
select, based on the second orientation, the second image of the plurality of images depicting the contactless card according to the second orientation.
17. The computing apparatus of claim 15 , wherein the instructions further cause the processor to:
receive a card manufacturer identifier (CMID) of the contactless card; and
receive, based on the CMID, the plurality of images of the contactless card and the plurality of metadata attributes of the contactless card.
18. The computing apparatus of claim 15 , wherein the instructions further cause the processor to:
capture, via a camera, an image; and
determine, based on an analysis of the image, that the image depicts the contactless card.
19. The computing apparatus of claim 18 , wherein the instructions further cause the processor to:
detect, based on the image, a graphical marker on a surface of the contactless card; and
determine, based on the graphical marker, at least one of the plurality of metadata attributes of the contactless card.
20. The computing apparatus of claim 15 , wherein the first orientation aligns a communications interface of contactless card to a communications interface of the apparatus, wherein the second orientation aligns the communications interface of contactless card to the communications interface of the apparatus, wherein the instructions further cause the processor to:
overlay the plurality of attributes of the contactless card on the second image; and
display the second image including the overlaid attributes of the contactless card in the GUI.