Quantcast
Channel: Webkul Blog
Viewing all articles
Browse latest Browse all 5490

Shopify OTP on Cart App

$
0
0

Presenting OTP on Cart app for you to validate cart through OTP before proceeding towards checkout. Twilio SMS engine is integrated in this to ensure that the OTP is sent to customers contact number.

Features

  • Cart Validation Process
    Cart is validated when clicked on proceed to checkout. An otp is sent to your registered mobile number and only when you enter the same otp you are able to proceed for checkout.
  • Twilio Integrated
    Twilio is integrated within the app as a SMS engine for sending the OTP via sms to customers.To enable you are required to have your own Twilio account.
  • OTP validated info at 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.

workflow

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

Click on the app to view and configure it further.

Configuration

In configuration section 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.

Important note section

Important note section just below configuration contains really important points, lets 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.

 

cart validation section

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

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 checkout they are popped up to login or signup (if they initially haven’t).
For that go to settings of Shopify account >>> and click on checkout.
Refer the image below

Now, when a customer will click on add to cart button, the product will be added to the cart.
Visiting the cart and clicking on the proceed to checkout button :
If your customer logged in  then he will be popped up to enter the OTP sent on your registered mobile number.

If your customer is logged in but the contact number is not registered with the store, then clicking on proceed he will have to firstly enter the mobile number with country code and then the OTP pop up will come.
Refer this image:
If your customer is NOT logged in as customer then after clicking on proceed to checkout he will first be taken to the the login or signup page. If already have an account then sign in else sign up.
While signing up you will be asked to enter the phone number as well, on which the OTP will be sent.

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

support

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

Thanks For reading this blog!!! 🙂

 


Viewing all articles
Browse latest Browse all 5490

Trending Articles