Shopflo Help · Token API

3P Apps

Objective:

To invoke shopflo checkout from the app of a common customer. This helps brands to maintain similar experience on the website and app.

How to integrate?

There are two different flows possible for in app shopflo checkout experience. We have discussed the pros and cons of both flows below:

Checkout button flow
Bypassing view Cart Flow

Checkout button flow

In this flow, end customers trigger checkout from the native app cart . Shopflo checkout will load up after the customer clicks on the checkout button.

Please note: We do not recommend to go with this flow. Refer to cons of the flow below:

Cons:

Discount application on cart will not pass to shopflo checkout
One extra step in the customer journey of view cart

Bypassing View cart flow

In this flow view cart action is replaced by initiate checkout. Customers can add/delete items on the checkout UI of Shopflo and can choose discounts on the same UI.

This is the recommended flow and we have seen higher conversions via this flow.

Pros:

Discount discovery happens on cart leading to higher intent
Using upsell widget brands can increase their AOV

3P Enablers or Shopify Custom Storefront

Shopflo SDK package has to be installed for custom storefront and enablers which have a separate domain.

How to integrate shopfront on your test store?

Create a custom app for Shopflo in Shopify by referring to this document.
Provide us the Storefront API access token and Admin access token generated in step 1on golive@shopflo.com.
We prepare a copy of your live theme and inject scripts to replace checkout button with shopflo checkout button
Setup your shopflo dashboard using self help docs
You are good to go

Please note: You can reach out to golive@shopflo.com if you have any queries/concerns regarding the integration.

FAQ’s regarding integrating test store

How to enable payment modes on Shopflo checkout?

Refer to this document to enable/disable a payment mode on checkout.

How to enable COD payment option?

Refer to this document to enable/disable COD on checkout.

Why are prepaid modes not redirecting anywhere from Shopflo checkout?

You would have to integrate your payment gateway on the Shopflo dashboard for prepaid modes to process orders. Refer to this document to integrate your Payment Gateway with Shopflo integration.

Sample steps in case you are using Firebase:

Shopflo script needs to be put in the theme frontend. This will allow you to fetch session id via Shopflo.getSessionId()
Once you have the session ID, you will be looking for a function in Firebase which we will invoke, and pass the session ID into. This set up will be done in the backend.
In this function, once you receive the session ID, you need to invoke the this API - https://api.shopflo.com/public/api/v2/tokens
This API will return the checkout URL. Backend needs to send this url back as response.
It will then be passed to the SDK via this function: Shopflo.openFloCheckout(checkout_url).

FAQs

1. How to get shopflo api key for a brand?

API key can be generated by referring to this document

2. How to get shopflo merchant id for a brand?

Reach out to support@shopflo.com to get Merchant ID for a brand

3. How to hide selective payment methods during a checkout instance?

Use payment object to show selective payment methods. The options which you send will be visible on the payment page

4. What is UI Config?

UI config contains configuration for different elements on the checkout. For example:

{"layout": {"available_elements": ["HEADER","ORDER_SUMMARY","COUPON_INPUT","COUPON_LIST"], "metadata": {"is_order_summary_open": true} } }

{"layout": {"available_elements": ["HEADER","ORDER_SUMMARY","COUPON_INPUT","COUPON_LIST"],"metadata": {"is_order_summary_open": true}}}

‍

5. How to hide coupon strip from the checkout instance?

Remove coupon_input from UI config to do the same.

6. Which email shopflo uses to place customer order on shopify If customer object is available?

The email id fetched from Shopify

7. Which email shopflo uses to place customer order on shopify if customer object is not available?

The email id entered by the customer in address page of Shopflo checkout.

8. What is the use case of customer object in token API payload?

To create orders using the details of the customer received from Shopify

9. How do I get session id if SDK is installed/Shopflo script is installed on the website?

If you are on a website based flow, you need to install the Shopflo SDK and call the above function.

If you are invoking this on your app then follow the below:

Generate session ID for a user (if not already present):

Session ID is needed to map the user journey in the shopflo backend. Generate a unique Session ID on the frontend, This can be done with the help of libraries like UUID generator (https://www.npmjs.com/package/uuid)