Tabby Widget on Storefront

Tabby Widget on Storefront

Merchants can configure the position of the Tabby widget on both the product description page (PDP) and the checkout page.

1. Select the required sales channel > Appearance > Theme.

Figure 1: Themes

2. Edit the theme.

Figure 2: Edit Theme

3. Select the required page:

   1. Product Description Page: The merchant can place the Tabby Product Widget under or near the price component to display Tabby's payment options to customers when viewing a product.

   

   Figure 3: Product Description Page
   

   

   Figure 4: Extension Position
   
   2. Checkout Page: The merchant can add the Tabby Cart Widget to various positions, such as above or below the price breakup, to provide customers with the option to pay using Tabby during checkout.

   

   Figure 5: Single Page Checkout Page
   

   

   Figure 6: Extension Position
   

Final Output

Once the Tabby payment gateway extension is activated along with the relevant payment mode, it will be reflected on both the Product Detail Page (PDP) and the Checkout Page. Customers will see the Tabby payment option during the checkout process, allowing them to split their payments into installments.

Figure 7: Extension on Product Detail Page

Figure 8: Extension on Checkout Page

1. After selecting the Tabby payment option, customers are prompted to link their mobile number to their Tabby account. They will need to enter their phone number to receive a verification code.

   Figure 9: Link Your Mobile to Tabby
   

2. Customers need to enter their email address, which will be used to log into their Tabby account and complete the payment process.

   Figure 10: Link Your Email to Tabby
   

3. Customers receive a 4-digit verification code sent to their registered mobile number. They must input this code in the provided field to verify their identity and complete the Tabby payment setup.

   Figure 11: Verification Code
   

4. Customers can review their payment plan, which allows them to split the total amount into four equal installments with no interest or fees. They are prompted to add a card by entering their card number, expiration date, and CVV. Once the details are filled in, the customer can proceed by clicking the Pay button to confirm their first installment and complete the purchase.

   Figure 12: Enter Card Details
   

5. A confirmation screen indicates that the payment is successful.

   Figure 13: Payment Successful
   

6. After the payment is successfully processed and the customer is redirected back to the order confirmation screen on the storefront.

   Figure 14: Order Confirmation