​
Why this is important

Thanx leverages proprietary integrations with Visa, Mastercard, and American express to allow consumers to earn loyalty progress when they use a card associated with their accounts when they make qualifying in-store purchases (digital purchases are automatically tracked without requiring enrollment of a card for loyalty). This requires the customer to enter their card and acknowledge that it will synchronize their purchases at participating locations with their account to earn rewards (purchases at non-participating businesses are not shared with Thanx or our merchant partners). This in turn powers the CRM’s automated marketing and targeting tools as well as provides valuable analytics to the brand. It is best practice to promote card registration. This makes customer activity more visible to the business, and this lets customers know that they are missing out on the following loyalty benefits when they don’t have enrolled cards:
  • Automatically earning reward progress for in-store purchases
  • Unlocking the intro reward (if configured to require card)
For non-ordering focused apps i.e. malls, retail, etc, card capture at signup is particularly crucial; this is a time you have the users focus and attention, and can highlight the values and incentives for enrolling their card. Our studies show that if a customer doesn’t enroll a card within 2 minutes of creating an account they are unlikely to add one later. This document outlines adding cards during a signup flow, capturing cards for loyalty tracking when making an online digital purchase, the ability to add cards proactively within account settings, and the ability to manage cards (remove them, etc).

​
How Thanx does this

​
Home page

Your home page can look like anything you want. Include a component on the home page to that encourages users to enroll a credit card for loyalty if they haven’t done so already. Without this UI customers would not know how, where, or why to enroll a card. Users can see a component on the home page that encourages them to enroll a credit card if they want to automatically get reward progress for in-store purchases.
  • Tapping on this component takes the user to an interstitial page that tells a deeper store of why they should enroll their card. This page can look like anything you want so use this opportunity to explain the value of card enrollment to the customer using the brand’s graphics and tone.
  • After the interstitial the user is taken to the card registration form. The interstitial page is optional, so you can take users straight to the registration form if you choose.
  • Make this component appear only to logged in customers that don’t have any enrolled cards.

​
Rewards page

The rewards page uses a banner right below the points header to prompt the user to enroll a card. If the user has no card enrolled, the banner tells the user that they’re not earning points for in-store purchases. If a user already has cards enrolled, the banner tells the user how many cards they have.
  • Tapping on this component takes the user to an interstitial page that tells a deeper store of why they should enroll their card. This page can look like anything you want so use this opportunity to explain the value of card enrollment to the customer using the brand’s graphics and tone.
  • After the interstitial the user is taken to the card registration form. The interstitial page is optional, so you can take users straight to the registration form if you choose.

​
Saved Cards page

Customers must be able browse to a screen that lists their cards. On this screen they should be able to add more cards, as well as remove any card they have stored. Note the legal text on the card registration form.This must be kept “as is” including the descriptor texts above. See Requirements section for full details. Notice the camera icon in the card input field. Thanx API does not include this functionality, but we recommend you implement this functionality with a 3rd party such as Dyneti.

​
Checkout (ordering apps)

For applications that include ecommerce, the flow above allows the customer to both pay and enroll the card for reward tracking. This is by far the most efficient way to onboard consumers, as they are typing in their card for payment anyway. In our apps, we see a ~90% conversion rate of customers choosing to store the card for loyalty benefits when they pay. If a customer already has a card enrolled (e.g. in the signup flow), they will not see this screen when they choose to pay with that known card. One important nuance is that in this specific flow, errors that come back from enrolling a card for loyalty are not displayed when we build these screens; we don’t want to interrupt a consumer’s ability to make the purchase. The most common error that comes from enrolling a card for loyalty is that the card is already connected to a different consumer account, which typically means the consumer has another account under a different email address. Asking a customer to address that in the checkout flow would lose the purchase. In that scenario, our apps just accept payment and suppress the card enrollment error. As noted above, it’s important that the screen you present are as close to identical to the designs above. While branding and layout can be adjusted, the wording of the text and buttons should not be altered. Full flow below

​
How other merchants do this

​
Dig app

This is an example of how one of our partners (Dig) has laid out the card enrollment flow.

​
Requirements for implementation

These are requirements that we have negotiated with our card network partners. All card enrollment experiences must be approved by these partners to use the card linked APIs they provide. While you are free to design these experiences as you like, it may produce significant delays of certification. We recommend using the designs as we have presented them to ensure a speedy deployment of your application.
  • Legal text must be on any screen where you allow a customer to enter their card number and store for loyalty tracking. The legal copy may not be altered.
  • Button must say “Register card”
  • Legal text must be visible at all times on all devices supported
  • ToS and Privacy Policy must be obviously clickable (e.g. darker and underlined)
  • Must comply with standard accessibility guidelines in regards to color contrast and legibility (see: https://accessible-colors.com/)

​
Card Registration Screen Variants

​
Ordering app signup

Legacy Copy

By registering my card, I authorize my card network (Visa, MasterCard, Amex) to share transaction data at [merchant name] rewards powered by Thanx. I also accept our Terms of Service and Privacy Policy.

​
Loyalty app signup

Legacy Copy

By registering my card, I authorize my card network (Visa, MasterCard, Amex) to share transaction data at [merchant name] rewards powered by Thanx. I also accept our Terms of Service and Privacy Policy.

​
Ordering app add payment method

Legacy Copy

You can earn rewards for this and future purchases by using this card at [Merchant name]Link this card > Pay with this card here or in-store > Earn rewardsBy registering my card, I authorize my card network (Visa, MasterCard, Amex) to share transaction data at [merchant name] rewards powered by Thanx. I also accept our Terms of Service and Privacy Policy.

​
Loyalty app add payment method

Legacy Copy

By registering my card, I authorize my card network (Visa, MasterCard, Amex) to share transaction data at [merchant name] rewards powered by Thanx. I also accept our Terms of Service and Privacy Policy.

​
Design tips from our team

  • Fonts & colors: check font size and color contrast against accessibility standards. To check the optimal contrast for type foreground/background color you can use this tool https://accessible-colors.com/
  • Buttons: should be a min height of 40px (Apple recommends 44px) for a reasonable tap area. On screens with two buttons (ordering enrollment) both must be the same size, though they can differ in visual weight (e.g. color, outline, etc).
  • Forms and inputs: automatically pre-fill values in fields where possible, and let users know which fields are required (or just which are optional), and for longer forms break them down into simple steps (e.g. signup flows are better as a series of input screens).
  • Error handling: be as explicit as possible so users understand why they ran into an error, and give them a means to correct or move forward from there. Include support links in critical flows, where users may need further assistance. See our API docs for how to handle error responses.

​
Common use cases, questions and errors

Error: “This card is already associated with another account” Why this happens:
  1. When a card is on file for a consumer, it cannot be registered for loyalty benefits for another account. That would allow two customers to get credit for the same purchase. So Mr and Mrs Smith each have an account, and they both have the same card number. Mr Smith adds it first, and then Mrs Smith tries. She will get an error that the card is already associated with another account. This prevents fraud (intentional or otherwise).
  2. A more common use case is Mr Smith has two email addresses, and he’s created an account on our platform with one and associated that card, and then he downloads Dig and creates an account with a different email address. He’ll get the same error. Our support team can help the customer resolve the issue by merging accounts.
Additional cases Now, here’s the nuance. In our apps, when we’re taking payment for digital ordering, and the customer selects “save card and earn rewards” we attempt to tokenize the card with the ordering provider AND with the card network (Visa et. al.). If Visa responds “this card is already in use” we don’t do anything. We don’t tell the customer or anything. We just take their card and run the payment. Introducing the error that the card can’t earn in-store loyalty on that screen just loses the sale and produces customer frustration. The duplicate account issue takes time to resolve. The best call is to just get the customer their food and accept that their card did not successfully enroll for in-store loyalty. Our recommendation here is that the merchant ignore that error from us when adding payment, and that the screen that lists cards enrolled for loyalty show that card as not enrolled for benefits should the consumer go to that screen specifically.