When the user visits this page for the 1st time ( as a guest user or 1st time as a new Wink user ), they will see an empty card carousel with a tile to add a card that looks like this
If the user already has cards in the Wink, the other cards will be shown also in the same carousel to the right of the Add a New Payment Tile like this
List View Supported
Note that clicking on the list icon on the top right will change the view from a Horizontal tiled view of the cards to a vertical list view. User can now toggle back to the tiled view by clicking the icon on the top also
Lets see how to add a New Card to Wink
Clicking on the + card tile ( or the Add Payment Method link in list view ) will launch a pop-up iFrame within the SDK to request new card details from the user.
Note that if the user is in Guest Mode, the Use Name on Account option won't be available
The above Add Card Screen is completely secured and complies with PCI-DSS requirements. The card data entered here does not touch your front end or back end systems and is directly sent to our PCI compliant card data vault
Once the user has finished entering the card data, the user has to provide a Billing Address
If there is no billing address for the user or the user is in Guest Mode, the Add Billing Address Option will be available.
Clicking on the Add Billing Address option will launch the following screen in the iFrame
The user can enter a nickname for this address. Certain pre-selected nicknames like Home and Work are available. User can also setup a custom nickname for the address. If the user wants to set this address as default, the Set as Default Address option can be clicked.
The user can manage several different billing addresses in their address book. If multiple addresses are available they will be shown in a list
The user can also remove an address by selecting an address and clicking Remove. They will be asked for a confirmation once Remove is clicked
Once the address has been added, the user will be be able to add the card into Wink by clicking the Add Card Button
Note that before adding the card, a user can select the card as Default and turn Auto Pay on.
Setting the card to Default means it will be the 1st card in the List of cards if there are multiple cards.
Setting the card to Auto Pay means it will automatically be selected as the user's preference in the Wink Payment SDK and the user doesn't need to click on any card
Note that only default cards can be used for the Auto Pay ( Single Click Checkout option )
Once the user has selected a card from the Carousel or list view the "Pay Now" button will appear.
Clicking on the Pay Now button will launch a Confirmation Page asking the user to confirm the payment
Clicking on Select Another Card will take the user back to the list of cards.
Clicking on Pay will send the final transaction to the Wink backend for routing it to your processor using the Payment APIs. See below
Updated about 2 months ago