Reading list Switch to dark mode

    OTP on Cart App for Shopify

    Updated 6 September 2022

    Having genuine traffic of customers on the eCommerce store is one of the major concerns of the store owner. Having said that we have built a solution to authenticate customers visiting your online store. Presenting OTP on Cart app for you to validate the cart through OTP before proceeding towards the checkout. Every buyer needs to register with a mobile number and when he will click on proceed to check out a screen pop-up to enter the one time password will appear right before the checkout page. Only after entering the correct OTP, the process will resume.
    Both Twilio & MSG91 SMS engine is integrated into this to ensure that the OTP is sent to the customer’s contact number.

    Features

    • Cart Validation Process
      Every buyer needs to register with a mobile number and when he will click on proceed to check out a screen pop-up to enter the one time password will appear right before the checkout page. Only after entering the correct OTP, the process will resume.
    • Both Twilio & MSG91 SMS engine Integrated
      Twilio & MSG91 is integrated within the app as an SMS engine for sending the OTP via SMS to customers. To enable you are required to have your own Twilio & MSG91 account.
    • OTP validated info at the backend
      View all the validated information and their success status.
    • Cross-browser compatible.
    • Easy installation.

    Installation

    To install this app click here, enter your domain name and then click on Install button to install the app.

    Validate Cart

    workflow

    After you have initiated the installation and completed the payment, your app will be visible here in the apps section of Shopify.

    Otp on cart app

    Click on the app to view and configure it further. Configuration

    In the configuration menu, You will have three sections.
    General Configuration, SMS Configuration, and Label Configuration

    Searching for a Shopify
    Headless solution ?
    Find out More

    General Configuration

    Allow Guest Checkout: Admin can enable this option if he/she wants his/her customers to check out as a guest.

    Add a Note in Order Detail Section on Cart Validation: Admin can now enable/disable the option to get the detail in the Order detail section if the order gets verified by phone number ( i.e Cart will be validated via OTP).

    Enable/Disable Cart Validation via OTP: In addition to it, admin can also enable/disable the OTP Validation on Cart Page.

    General Configuration

    SMS Configuration

    Twilio SMS Integration:
    You have to enter your Twilio account credentials and token keys to activate Twilio for sending SMS.
    ***Please note for this you are compulsorily required to have a Twilio account. And all the charges for SMS will be borne by you and your Twilio account. Here we just provide the integration of Twilio.

    Twilio Account

    MSG91 SMS Integration:

    We have now integrated MSG91 SMS Gateway with the app so that you can validate your cart via OTP from MSG91 SMS Engine.

    MSG91 SMS

    Label Configuration

    From this section of the app, the admin can configure the labels to be shown on Front End.

    Labels

    Important Note section

    Important Note section just below configuration contains really important points, let’s have a look:

    • Contains Twilio API detail link
    • Contains Twilio Pricing details link
    • To add Phone Number option during registration, you have to copy the below given code into customers/register.liquid file. <label class=”label”>Phone Number</label> <input type=”text” class=”text” size=”30″ name=”customer[note][PhoneNumber]” placeholder=”+1234567890″/> <strong>Note:</strong> Add ‘+’ and your country code before phone number
    • For OTP validation during checkout, you have to copy the below given code into cart.liquid file <div id=”wk_cart_validate” customer-id=”{{customer.id}}”></div>
    • Contains links to access theme file.
    Notes

    OTP Validated Orders

    Admin can now have all the validated orders listed in this section. Orders that get validated on the cart via OTP will be listed in the OTP Validated Orders section of the app.

    Let’s have a look:

    Validated orders

    Cart Validation section

    Cart validation section shows the data of cart token validated so far along with their status of success or failure.

    Validate cart

    Frontend

    On the front end, firstly you are required to make your ‘customer account creation’ feature mandatory from your Shopify account for all the customers so that when they check out they are popped up to log in or signup (if they initially haven’t).

    For that go to settings of Shopify account >>> and click on checkout.

    Refer to the image below

    Screenshot_25-1200x589-png-1200×589-

    If your customer is logged in but the contact number is not registered with the store, then click on proceed, he will have to first enter the mobile number with country code and then the OTP pop up will come. Refer to this image:

    Update Number

    If your customer is NOT logged in as the customer then after clicking on proceed to checkout he will first be taken to the login or signup page. If already have an account then sign in else sign up.

    Login Panel

    While signing up you will be asked to enter the phone number as well, on which the OTP will be sent.

    Create Account

    Once the account will be created, then the customer will be back on the cart page. Clicking on continue a pop to enter the OTP will get displayed. In case the customer has not received the OTP he can click on the ‘Resend OTP ‘ button.

    DEMO DETAILS

    support

    Furthermore, if you need any kind of support/Consultancy then please raise a ticket athttp://webkul.uvdesk.com/ or drop a mail at [email protected]

    Thanks for reading this blog!!! 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content