This document describes the integration process with shopflo checkout.
\nStructure of Item Object:
\n","urlObject":{"protocol":"https","path":["kratos","api","v2","token"],"host":["api","shopflo","co"],"query":[],"variable":[]}},"response":[{"id":"ac8b3198-0b7f-456f-8643-3949106151fe","name":"Create Checkout Token V2","originalRequest":{"method":"POST","header":[{"key":"Authorization","value":"your_key_generated_by_brand","type":"text"}],"body":{"mode":"raw","raw":"{\n \"sf_session_id\": \"d84aed9f-9029-4ab7-ba43-ef2648be1212s\", // your unique session id for analytics aggregation\n \"items\": [\n {\n \"id\": \"43497948545272\", //mandatory\n \"quantity\": 2, //mandatory\n \"name\": \"Minoxidil 5%\", //mandatory\n \"product_name\": \"Minoxidil 5%\", //mandatory\n \"variant_name\": \"M\", //mandatory\n \"price\": 650, //mandatory\n \"sku\": \"CCSCC\", //mandatory\n \"product_id\": \"89098989989\", //mandatory\n \"image\": \"https://cdn.shopify.com/s/files/1/0646/4362/9304/products/FreeSatinPillowcase-24thOctober_1.png?v=1669719330\", //mandatory\n \"properties\": { //optional\n \"key\": \"value\"\n },\n \"images\": [\n \"url1\",\n \"url2\"\n ], //optional\n \"line_price\": {\n \"total\": \"499.00\", //optional\n \"sub_total\": \"699.00\", //mandatory\n \"discounts\": [\n { //optional and pass the line level attribution for checkout UI line item price strike through otherwise passing global discount objects is enough\n \"code\": \"discount1\",\n \"amount\": \"75.00\" // pass per quantity value here and if the discount * quantity is not summing up to the global discount object total then an exception will be raised\n },\n {\n \"code\": \"discount2\",\n \"amount\": \"25.00\"\n }\n ],\n \"tax\": { //optional\n \"amount\": \"50.00\",\n \"included\": true\n }\n }\n },\n {\n \"id\": \"43497948545272\", //mandatory\n \"quantity\": 2, //mandatory\n \"name\": \"Minoxidil 5%\", //mandatory\n \"product_name\": \"Minoxidil 5%\", //mandatory\n \"variant_name\": \"M\", //mandatory\n \"price\": 650, //mandatory\n \"sku\": \"CCSCC\", //mandatory\n \"product_id\": \"89098989989\", //mandatory\n \"image\": \"https://cdn.shopify.com/s/files/1/0646/4362/9304/products/FreeSatinPillowcase-24thOctober_1.png?v=1669719330\", //mandatory\n \"properties\": { //optional\n \"key\": \"value\"\n },\n \"images\": [\n \"url1\",\n \"url2\"\n ], //optional\n \"line_price\": {\n \"total\": \"499.00\", //optional\n \"sub_total\": \"699.00\", //mandatory\n \"discounts\": [\n { //optional and pass the line level attribution for checkout UI line item price strike through otherwise passing global discount objects is enough\n \"code\": \"discount1\",\n \"amount\": \"75.00\" // pass per quantity value here and if the discount * quantity is not summing up to the global discount object total then an exception will be raised\n },\n {\n \"code\": \"discount2\",\n \"amount\": \"25.00\"\n }\n ],\n \"tax\": { //optional\n \"amount\": \"50.00\",\n \"included\": true\n }\n }\n }\n ],\n \"ui_config\": { //optional\n \"layout\": {\n \"available_elements\": [\n \"HEADER\",\n \"ORDER_SUMMARY\",\n \"COUPON_INPUT\",\n \"COUPON_LIST\"\n ],\n \"metadata\": {\n \"is_order_summary_open\": true\n }\n }\n },\n \"customer\": { //optional\n \"authentication\": {\n \"shop_storefront_token\": \"6c075625379da82c0d788345a048f2bb\",\n \"platform\": \"SHOPIFY_STOREFRONT\",\n \"user_token\": \"dc58c5a09d4a3329e0ec734d3c730f31\"\n }\n },\n \"discounts\": [ //optional\n {\n \"type\": \"CODE\",\n \"code\": \"XYZ\"\n },\n {\n \"type\": \"CUSTOM_DISCOUNT\", // Pass this for your custom discounts and this is mandatory if the line item level discounts are passed\n \"code\": \"discount1\",\n \"title\": \"Discount title\",\n \"amount\": \"300.00\",\n \"is_stackable\": true,\n \"is_removable\": true,\n \"is_auto_applied\": false\n },\n {\n \"type\": \"CUSTOM_DISCOUNT\",\n \"code\": \"discount2\",\n \"title\": \"Discount title\",\n \"amount\": \"100.00\",\n \"is_stackable\": true,\n \"is_removable\": true,\n \"is_auto_applied\": false\n }\n ],\n \"tags\": [\n \"shopflo\",\n \"test\",\n \"your_identifier\"\n ], // optional and will be forwarded in downstream order\n \"note_attributes\": [ // optional and will be forwarded in downstream order\n {\n \"name\": \"name1\",\n \"value\": \"value1\"\n },\n {\n \"name\": \"name2\",\n \"value\": \"value2\"\n }\n ],\n \"payment_config\": { //optional object, send it when its requried to show certain payment options\n \"allowed_modes\": [\n \"UPI\",\n \"COD\",\n \"REWARDS_WALLET\",\n \"BHARATX\"\n ]\n },\n \"back_url\": \"https://yourstore.com/where_you_came_from\", // This will be the url where user will be taken when they decide to exit checkout\n \"success_url\": \"https://yourstore.com/thank_you_page?your_var1=your_value1&{checkout_id}&{platform_order_id}\" // this parameter is not needed to be sent if you are using Shopify thank you page for order confirmation \n}","options":{"raw":{"language":"json"}}},"url":"https://api.shopflo.co/kratos/api/v2/token"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Date","value":"Mon, 26 Dec 2022 10:43:39 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Content-Length","value":"218"},{"key":"Connection","value":"keep-alive"},{"key":"server","value":"gunicorn"},{"key":"apigw-requestid","value":"dwAiPhapBcwEPsg="},{"key":"vary","value":"Accept"},{"key":"allow","value":"POST, PUT, PATCH, GET, DELETE, OPTIONS, HEAD"}],"cookie":[],"responseTime":null,"body":"{\n \"success\": true,\n \"data\": {\n \"token_id\": \"fcec066f-a652-4f48-9128-6a12e9dade6e\",\n \"checkout_url\": \"https://checkout.shopflo.com/?tokenId=fcec066f-a652-4f48-9128-6a12e9dade6e&auth=c81c1516-81b9-4d50-aa08-cdc61876757c\",\n \"application_id\": \"bacb1287-80b2-4a8e-93d4-8fa75726e12f\"\n }\n}"}],"_postman_id":"987d51d1-f376-45a9-a09f-8d023da43889"}],"id":"282d9eda-28e5-40f9-8907-d398458e2570","description":"Add the following script in the head tag of root file so that SDK is installed on the website
\nGet the merchant id from Shopflo team and put in place of
\n<script>\n (function (f, l, o, j, s, d, k) {\n f[o] = f[o] || { m_id: s };\n d = l.createElement(j); d.async = 1; d.src = \"https://bridge.shopflo.com/v2/shopflo.js\";\n k = l.getElementsByTagName(j)[0]; k.parentNode.insertBefore(d, k);\n })(window, document, \"Shopflo\", \"script\", <shopflo_merchant_key>)\n</script>\n\n\n\nIt is important to put the script in root file so that SDK can be called from any page
\n
If the script doesn’t load on first page load - UTM attribution will be incorrect
Shopflo.getSessionId()\n\n\n\nFor correct session and conversion funnel tracking, sessionId is an important parameter.
\n
\n\nThe token API should be called from the application backend to ensure data security
\n
The token API will return checkout URL that you can pass to the SDK to invoke the checkout.
\nCheckout will open in an iFrame if the browser supports third party cookies. Otherwise, this will redirect to new page to Shopflo domain.
\nGA/FB and other downstream events are also taken care of by Shopflo checkout (Ensure that you’ve set these up correctly in the Shopflo dashboard for it to work)
\nShopflo.openFloCheckout(checkout_url) // checkout_url is the url returned by token API\n\nVerify the flow of following information from cart to checkout is correct:
\nItem prices
\nCart price
\nProduct variant and images
\nCart discounts
\nFreebies with strike-through amounts and cart value
\nAlso place some test orders to test your payment gateway integrations
\nThrough all payment methods
\nIf there are more than 1 PG setup, place orders with all these PGs
\nOnce this is done, verify that Shopflo checkout is being initialized from all buttons on the website
\nProduct Buy now buttons
\nCart Page
\nSide cart (if any)
\nAny other buttons that initiate checkout
\nTo enhance the user experience by enabling back button support during app checkouts, it's essential to implement custom handling within the app. This process involves incorporating a back_url parameter into the token api payload. The URL should be structured to facilitate user navigation, such as www.yourwebsite.com/cart?action=backToCart.
Upon triggering this URL, your application should employ a regular expression (regex) to identify when the webview is engaged in a back action. Following this detection, the app should then execute code to close the webview, thereby aligning with the user's expectation of the back button's functionality. Below is an example of how this can be implemented in your application's code in react native webview:
\nconst { url } = navState;\nif (url.endsWith(\"action=backToCart\")) {\n closeWebview();\n}\n\nIf you are not using Shopflo SDK while using the Token API there would be two additional steps needed to make sure UTM data is passed on to our backend.
\nGenerate session ID on the frontend:
Session ID is needed to map the user journey in the shopflo Infrastructure. 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). The expiry duration for session id is 30 minutes. Hence, for any checkouts being initiated by that user in a 30 minute window will have same session id until expiry.
Trigger Shopflo Event to map session with utm parameters:
Get all the UTM parameters and trigger Shopflo Page View event. This will map the session with UTM parameters and this can be used for attribution.
Note: The utm tracking is taken care by the Shopflo SDK on web if the session id on website and token API matches
\n","_postman_id":"e66d0b97-edda-4176-8fdd-22f1ae49b68f"}],"event":[{"listen":"prerequest","script":{"id":"af795bf0-4184-4c16-99f0-9651dc9fc9dc","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"2739d03d-884c-4b9b-9ae7-85cb66bf086c","type":"text/javascript","exec":[""]}}],"variable":[{"id":"17eab51a-1e94-4671-8cfb-bcfff76d5335","key":"env","value":"api"}]}