{"html":"\u003cdiv class=\"sc-container sc-me\" id=\"SC-article-how-to-build-an-application-form-with-payment-on-salesforce\"\u003e\n  \u003cdiv class=\"SC-Grid\"\u003e\n      \u003cdiv class=\"SC-Grid_sidebar\"\u003e\u003cnav class=\"SC-PageNav\"\u003e\n  \u003cdiv class=\"SC-PageNav_content is-hidden\" data-toggle-visibility-target=\"article-sidebar\"\u003e\n    \u003cdiv class=\"SC-PageNav_heading\"\u003e\n      Categories\n    \u003c/div\u003e\n        \u003ca href=\"/articles/news\" class=\"SC-PageNav_link is-current\"\u003eNews \u0026amp; Updates\u003c/a\u003e\n        \u003ca href=\"/articles/podcasts\" class=\"SC-PageNav_link\"\u003ePodcasts\u003c/a\u003e\n        \u003ca href=\"/articles/media\" class=\"SC-PageNav_link\"\u003eMedia\u003c/a\u003e\n        \u003ca href=\"/articles/blogs\" class=\"SC-PageNav_link\"\u003eBlogs\u003c/a\u003e\n        \u003ca href=\"/articles/case-studies\" class=\"SC-PageNav_link\"\u003eCase Studies\u003c/a\u003e\n        \u003ca href=\"/articles/events\" class=\"SC-PageNav_link\"\u003eUpcoming Events\u003c/a\u003e\n        \u003ca href=\"/articles/tutorials\" class=\"SC-PageNav_link\"\u003eTutorials\u003c/a\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"SC-PageNav_menu-toggle target-hidden\" data-toggle-visibility=\"article-sidebar\"\u003e\u003csvg class=\"\" width=\"12\" viewBox=\"0 0 100 100\"\u003e\n  \u003cpath d=\"M56.7,75.75 L95.4,37.05 C98.8,33.65 98.8,28.05 95.4,24.65 C92,21.25 86.4,21.25 83,24.65 L50.5,57.05 L18,24.55 C14.6,21.15 9,21.15 5.6,24.55 C3.9,26.25 3,28.55 3,30.75 C3,33.05 3.9,35.25 5.6,36.95 L44.3,75.75 C47.7,79.15 53.3,79.15 56.7,75.75 Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n  \u003cdiv\u003e\n\u003c/nav\u003e\n      \u003c/div\u003e\n\n    \u003cdiv class=\"SC-Grid_main\"\u003e\n      \u003csection class=\"sc-rich-text\"\u003e\n        \u003carticle class=\"SC-Article\"\u003e\u003cheader class=\"SC-PageHeader \" \u003e\n    \u003ch1 class=\"SC-PageHeader_heading\"\u003e\n      How to Build an Application Form with Payment on Salesforce\n    \u003c/h1\u003e\n\u003c/header\u003e\n            \u003cp class=\"sc-font-medium sc-shade-neutral\"\u003e\n              And do it all within a single afternoon!\n            \u003c/p\u003e\n              \u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/c_fit,f_auto,h_1024,w_1024/v1/media/Groundswell-social-memberships.png\" class=\"sc-mb-base\" loading=\"lazy\"\u003e\n            \u003cdiv class=\"sc-mb-base sc-shade-neutral\"\u003e\n              December 7, 2023\n            \u003c/div\u003e\n          \u003cp\u003eMember registration is a common requirement for many businesses. Even more so is being able to pay for that membership through a public-facing webpage.\u003c/p\u003e\n\n\u003cp\u003eThis has traditionally been quite difficult or complex to do on Salesforce, requiring either heavy solutions costing tens of thousands of dollars a year to license and taking weeks or months to complete the sales and installation process.\u003c/p\u003e\n\n\u003cp\u003eThis guide will show you how to create a complex membership form that also accepts payment, all powered by a StoreConnect instance. You could then register via credit card for a \u003ca href=\"https://getstoreconnect.com/pricing\"\u003esmall month-to-month payment\u003c/a\u003e without any sales process required!\u003c/p\u003e\n\n\u003cp\u003eWe can do this by leveraging a Salesforce Lightning Screen Flow and then embedding it within a StoreConnect page to capture the membership details, make it available on a public StoreConnect site and then take the data provided to capture payment for the membership.\u003c/p\u003e\n\n\u003cp\u003eAnd do this all in a single afternoon, using this architecture diagram.\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1700184281/media/Public_Facing_Membership_Sign-Ups_Diagram2.jpg\" alt=\"High-level Solution Diagram\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"install-storeconnect\"\u003e1. Install StoreConnect\u003c/h2\u003e\n\n\u003cp\u003eTo host this on a website, we need to get StoreConnect installed, so let’s get that started.\u003c/p\u003e\n\n\u003cp\u003eBefore beginning with StoreConnect, ensure it is installed and properly set up. Here is the \u003ca href=\"https://help.getstoreconnect.com/documentation/prerequisites-to-getting-started\" target=\"_blank\"\u003einstallation guide\u003c/a\u003e. Additionally, your StoreConnect Store and Site should be active with a functional URL. This setup enables a great way to integrate the web form and payment system.\u003c/p\u003e\n\n\u003cp\u003eYou can install a \u003ca href=\"https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT\" target=\"_blank\"\u003eStoreConnect\u003c/a\u003e trial to test this solution (as done in this guide) if you are not working on a production or sandbox site implementation.\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701936477/media/Screenshot_2023-12-07_at_6.33.3336_pm.png\" alt=\"Step 1 Option 1\" /\u003e\u003c/p\u003e\n\n\u003cp\u003eOnce this is complete, you should have a StoreConnect Store and Site that is accessible online.\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701936610/media/Screenshot_2023-12-07_at_6.31.51_pm.png\" alt=\"Step 1 Result 1\" /\u003e\u003c/p\u003e\n\n\u003cp\u003eIf you are installing StoreConnect as a package into your production or sandbox org, check to see this entry in the Installed Packages setup screen:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701912352/media/Screenshot_2023-12-07_at_11.54.47_am.png\" alt=\"Step 1 Result 2\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"openurl-installation\"\u003e2. OpenUrl Installation:\u003c/h2\u003e\n\n\u003cp\u003eThe first tool we need to make this work is the OpenUrl package from UnofficialSF, which allows us to redirect from the screen flow we will create to the checkout page.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eVisit the \u003ca href=\"https://unofficialsf.com/new-ways-to-open-web-pages-from-flow/\" target=\"_blank\"\u003eUnofficialSF page for OpenURL\u003c/a\u003e.\u003c/li\u003e\n  \u003cli\u003eClick either the “production” or “sandbox” links to install into your Salesforce Org.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eAs a result, we should see this entry in the Installed Packages setup screen:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701912508/media/Screenshot_2023-12-07_at_11.58.09_am.png\" alt=\"Step 2 Result\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"site-custom-domain-setup\"\u003e3. Site Custom Domain Setup:\u003c/h2\u003e\n\n\u003cp\u003eThe next thing we need to do is create a site within the Salesforce Org to publish your Screen Flow and make it available to embed within the StoreConnect site.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eSearch ‘Sites’ in the Setup Quick Find bar.\u003c/li\u003e\n  \u003cli\u003eAccept the Sites Terms of Use to continue if not done previously.\u003c/li\u003e\n  \u003cli\u003eCreate a new Site record in the Sites list.\u003c/li\u003e\n  \u003cli\u003eGive the site a name referring to the page or type of form, for example, \u003ccode\u003eSignUpSite\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eSet the Active Site Home Page lookup to \u003ccode\u003eUnderConstruction\u003c/code\u003e, which we will use as a placeholder, to meet this required field.\u003c/li\u003e\n  \u003cli\u003eCheck the \u003ccode\u003eActive\u003c/code\u003e checkbox.\nThe record should look like this:\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701913335/media/Screenshot_2023-12-07_at_12.11.43_pm.png\" alt=\"Step 3 Edit\" /\u003e\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eLeave other settings as default, and save.\u003c/li\u003e\n  \u003cli\u003eNote the URL of the site for the last step in Section 9.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eAs a result, we should see this red highlighted \u003ccode\u003eSignUpSite\u003c/code\u003e record in the Sites setup screen:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701913520/media/Screenshot_2023-12-07_at_12.09.44_pm.png\" alt=\"Step 3a Result\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"enabling-cors\"\u003e4. Enabling CORS:\u003c/h2\u003e\n\n\u003cp\u003eCORS (or Cross-Origin Resource Sharing) is a security feature that prevents sites that you don’t authorize from embedding your Screen Flow form. So, this means we need to explicitly authorize our StoreConnect site to be able to embed the form.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eSearch ‘CORS’ in the Setup Quick Find bar.\u003c/li\u003e\n  \u003cli\u003eIn the ‘Allowed Origins List’, click New.\u003c/li\u003e\n  \u003cli\u003eAdd the URL pattern of the domain where your webpage form will be located. In this example, we will be using our StoreConnect store domain which you can find on the Store record created in step 1 of this guide.\u003c/li\u003e\n  \u003cli\u003eThen click Save.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eAs a result, we should see this red highlighted entry in the CORS setup screen:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701912714/media/Screenshot_2023-12-07_at_12.01.04_pm.png\" alt=\"Step 4 Result\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"form-structure-definition\"\u003e5. Form Structure Definition:\u003c/h2\u003e\n\n\u003cp\u003eActively defining the form fields on paper or a digital document allows us to determine and reference our data model. Use existing fields or create the necessary new object and fields in Salesforce, reflecting the information you need from new members for your form. You will use these at multiple points along the solution.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eDefine or note the fields that will be in the form.\u003c/li\u003e\n  \u003cli\u003eCreate or modify any Custom Objects and Custom Fields to be used that are not to be used with existing standard fields.\u003c/li\u003e\n  \u003cli\u003eIn this example, I will be using StoreConnect commerce checkout which creates the standard Salesforce Objects of Order, Order Items, Contact, and Account records on a successful checkout.\u003c/li\u003e\n  \u003cli\u003eWe will define the required Contact information to complete a StoreConnect checkout.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cpre\u003e\u003ccode\u003eContact.FirstName\nContact.LastName  \nContact.Phone\nContact.Email\nContact.MailingStreet\nContact.MailingCity\nContact.MailingState\nContact.MailingPostalCode\nContact.MailingCountry\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003cem\u003eNote: The StoreConnect checkout creates Contact and Account records through the checkout process, and we will take advantage of that here. If you wanted to create a Lead in this process, you would reference Lead fields and consider permissions for creating these fields through the form and flow, as we will explore next.\u003c/em\u003e\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eWe will define a Custom Object called \u003ccode\u003eApplication\u003c/code\u003e and a Custom field called \u003ccode\u003eMembership_Option__c\u003c/code\u003e to demonstrate this concept. For this field, we will create it as a single select picklist, with 4 values: \u003ccode\u003eBasic\u003c/code\u003e, \u003ccode\u003ePremium\u003c/code\u003e, \u003ccode\u003eProfessional\u003c/code\u003e, \u003ccode\u003eCorporate\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eWe will create a lookup field called \u003ccode\u003eMembership_Order__c\u003c/code\u003e, which is a lookup to the Order Object. We will end up linking the Application record to the Order record at the end of the checkout.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cpre\u003e\u003ccode\u003eApplication__c.Membership_Option__c\nApplication__c.Membership_Order__c\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003cem\u003eNote: You may have more fields for a more lengthy, involved form, to suit your needs. Also, for this example, we will not trigger any logic based on the membership options picklist selection, but based on this selection in the flow, we \u003cstrong\u003ecould\u003c/strong\u003e modify the direct-to-cart formula to change products with a CASE() or IF() functions.\u003c/em\u003e\u003c/p\u003e\n\n\u003ch2 id=\"access-settings-adjustment\"\u003e6. Access Settings Adjustment:\u003c/h2\u003e\n\u003cp\u003eModify the Site Public Access Settings for your newly created object and fields, allowing non-Salesforce users to complete your form.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eSearch ‘Sites’ in the Setup Quick Find bar.\u003c/li\u003e\n  \u003cli\u003eClick on the Site Label in the Sites list. Not \u003ccode\u003eEdit\u003c/code\u003e or the site URL.\u003c/li\u003e\n  \u003cli\u003eClick the \u003ccode\u003ePublic Access Settings\u003c/code\u003e button.\u003c/li\u003e\n  \u003cli\u003eClick Edit and check Read and Create for any of the Objects we will create in this form. In this instance, I will do this for \u003ccode\u003eApplications\u003c/code\u003e, then click Save.\u003c/li\u003e\n  \u003cli\u003eIn the ‘Field-Level Security’ section of the Profile page, click the [ \u003cu\u003eView\u003c/u\u003e ] hyperlink to view and appropriately modify the permissions of the fields in your form for Read Access or Edit Access. In this example, I will provide Read and Edit Access for the \u003ccode\u003eMembership Option\u003c/code\u003e field on the \u003ccode\u003eApplications\u003c/code\u003e object. Click the ‘Back to Profile’ button when complete.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003e\u003cem\u003eNote: The StoreConnect checkout creates Contact and Account records, so we will not need to provide access for these fields in this example. Ensure you allow access for objects and fields in your form in this step.\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eNote: We will revisit this page when we follow section 10 below on embedding the flow on our website, after we create our Screenflow. This will allow the form to show on the page via the profile access settings.\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003eAs a result, we should have this profile configured for access to our defined data-model.\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701913764/media/Screenshot_2023-12-07_at_12.18.31_pm.png\" alt=\"Step 6 Result\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"flow-creation\"\u003e7. Flow Creation:\u003c/h2\u003e\n\u003cp\u003eDesign a Salesforce Lightning Flow that captures user information and directs them to the StoreConnect payment page.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eSearch ‘Flows’ in the Setup Quick Find bar and click \u003ccode\u003eFlows\u003c/code\u003e under ‘Process Management’.\u003c/li\u003e\n  \u003cli\u003eClick the ‘New Flow’ button on the top right of the screen.\u003c/li\u003e\n  \u003cli\u003eEnsure the “Screen Flow” option is selected and click the ‘Create’ button at the bottom right of the modal.\u003c/li\u003e\n  \u003cli\u003eClick the ‘Add Element’ circle connector that turns to a plus sign on mouse hover.\u003c/li\u003e\n  \u003cli\u003eSelect a \u003ccode\u003eScreen\u003c/code\u003e option from the ‘Interaction’ group.\u003c/li\u003e\n  \u003cli\u003eGive your Screen a Label and an API Name.\u003c/li\u003e\n  \u003cli\u003eConfigure the Header and Footer options of the Screen Flow to control which form buttons are displayed. I will be configuring a single ‘Submit’ button.\u003c/li\u003e\n  \u003cli\u003eUse the component menu to create a form which aligns with the data defined in section 5 of this guide. When completed, click ‘Done’.\n\u003cem\u003eNote: Take note of the API Names of the fields to use in our direct-to-cart step below.\u003c/em\u003e\nAs a result, your screen form should look something like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701914372/media/Screenshot_2023-12-07_at_12.28.13_pm.png\" alt=\"Step 7 Form\" /\u003e\u003c/li\u003e\n  \u003cli\u003eClick the ‘Add Element’ connector under the Screen we just created.\u003c/li\u003e\n  \u003cli\u003eUnder the ‘Data’ group, select \u003ccode\u003eCreate Records\u003c/code\u003e option.\u003c/li\u003e\n  \u003cli\u003eProvide a Label and API Name. I will use ‘Create Application’ and \u003ccode\u003eCreate_Application\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eFor this example, choose options to create One record and the option to “Use separate resources, and literal values”.\u003c/li\u003e\n  \u003cli\u003eUnder ‘Create a Record of This Object’ Record lookup. Select the Object for this Element. We are using \u003ccode\u003eApplication\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eMap the Object ‘Fields’ to the ‘Values’ of the API Names of the fields created in the screen element in step 8 above.\u003c/li\u003e\n  \u003cli\u003eCheck the ‘Manually assign variables’ checkbox as we will capture an ID of this record in a variable for use in Sections 7 \u0026amp; 10 below. Where we pass and then link the records together post-checkout.\u003c/li\u003e\n  \u003cli\u003eUnder ‘Store Application ID in Variable’ Variable field. Create a new resource of type ‘Variable’ with a data type of text and check the ‘Available for output’ checkbox. Here we will give an API Name of \u003ccode\u003eApplicationID\u003c/code\u003e.\nAs a result, your Create Records function should look like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701914394/media/Screenshot_2023-12-07_at_12.28.36_pm.png\" alt=\"Step 7\" /\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2 id=\"cart-url-integration\"\u003e8. Cart URL Integration:\u003c/h2\u003e\n\u003cp\u003eThis URL solution utilises StoreConnect’s \u003ca href=\"https://help.getstoreconnect.com/documentation/direct-to-cart.html\" target=\"_blank\"\u003edirect-to-cart\u003c/a\u003e URL structure.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eEnsure that a \u003ca href=\"https://help.getstoreconnect.com/documentation/subscription-products.html\" target=\"_blank\"\u003esubscription\u003c/a\u003e Product is configured and visible on the site and can be purchased through a checkout.\u003c/li\u003e\n  \u003cli\u003eNote the URL path name of the product. In this example, we will note \u003ccode\u003eomnico-basic-membership\u003c/code\u003e path section from the full URL \u003ccode\u003ehttps://d-storeconn-00d5j00000dgr9xeab-4b88d3aba2fc.herokuapp.com/products/omnico-basic-membership\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eNow we define the direct-to-cart URL we will use as the browser will accept it in StoreConnect. Based on this format \u003ccode\u003e[store domain]{/path}/cart/[product string]?[other-parameters]\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eThis will be our desired output with example customer data:\n    \u003cpre\u003e\u003ccode\u003e\"https://d-storeconn-00d5j00000dgr9xeab-4b88d3aba2fc.herokuapp.com/cart/omnico-basic-membership:1?type=buy\u0026amp;name=Bob%20Jones\u0026amp;email=bob@example.com\u0026amp;phone=0400123123\u0026amp;street=1%20Omega%20Street\u0026amp;city=Adelaide\u0026amp;state=South%20Australia\u0026amp;country=Australia\u0026amp;postcode=5000\u0026amp;return=false\n\u003c/code\u003e\u003c/pre\u003e\n  \u003c/li\u003e\n  \u003cli\u003eWe will also utilise UTM codes via StoreConnect’s \u003ca href=\"https://help.getstoreconnect.com/documentation/utm-tracking-codes.html\" target=\"_blank\"\u003eUTM Tracking Codes\u003c/a\u003e to pass an Application Process and Id into the Order data and append these UTMs to our direct-to-cart URL.\n    \u003cpre\u003e\u003ccode\u003e\u0026amp;utm_source=membership-application\u0026amp;utm_token=a3I5j000000sh4PEAQ\n\u003c/code\u003e\u003c/pre\u003e\n\n    \u003cp\u003e\u003cem\u003eNote: We are using a constant string that defines this process for the utm_source and the application Id we created in Section 7.16 with the utm_token.\u003c/em\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003eWe will now create the Salesforce formula from our Variables in the flow, to merge a URL that OpenURL will send to the browser. We will utilise the HTMLENCODE function to transform our variable text values to URL standards. Create a New Resource in the flow with a type of formula and name it \u003ccode\u003eDirect_To_Cart_URL\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eHere’s a sample formula that constructs the URL based on our current example:\u003c/p\u003e\n\n    \u003cpre\u003e\u003ccode\u003e\"https://d-storeconn-00d5j00000dgr9xeab-4b88d3aba2fc.herokuapp.com/cart/omnico-basic-membership:1?type=buy\" +\n \"\u0026amp;name=\" + HTMLENCODE({!First_Name}) + \"%20\" + HTMLENCODE({!Last_Name}) +\n \"\u0026amp;email=\" + HTMLENCODE({!Email.value}) +\n \"\u0026amp;phone=\" + HTMLENCODE({!Mobile.value}) +\n \"\u0026amp;street=\" + HTMLENCODE({!Address.street}) +\n \"\u0026amp;city=\" + HTMLENCODE({!Address.city}) +\n \"\u0026amp;state=\" + HTMLENCODE({!Address.province}) +\n \"\u0026amp;country=\" + HTMLENCODE({!Address.country}) +\n \"\u0026amp;postcode=\" + HTMLENCODE({!Address.postalCode}) +\n \"\u0026amp;return=false\u0026amp;utm_source=membership-application\u0026amp;utm_token=\" + HTMLENCODE({!ApplicationID})\n\u003c/code\u003e\u003c/pre\u003e\n\n    \u003cp\u003eAs a result, the formula should look like this:\n \u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701915127/media/Screenshot_2023-12-07_at_12.41.34_pm.png\" alt=\"Step 8 Formula\" /\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003eAfter saving this formula, click the ‘Add Element’ connector under the Create Records we just created.\u003c/li\u003e\n  \u003cli\u003eIn the Search box, type \u003ccode\u003eOpenURL\u003c/code\u003e and click the element called OpenURL (we installed this component in section 2).\u003c/li\u003e\n  \u003cli\u003eProvide a Label and API Name. We will use \u003ccode\u003eRedirect_Direct_To_Cart\u003c/code\u003e as the API Name here.\u003c/li\u003e\n  \u003cli\u003eType \u003ccode\u003ereplace\u003c/code\u003e into the Mode field.\u003c/li\u003e\n  \u003cli\u003eAdd the \u003ccode\u003eDirect_To_Cart_URL\u003c/code\u003e formula resource.  \u003cbr /\u003e\nAs a result, we should see this in Open URL function:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701914414/media/Screenshot_2023-12-07_at_12.28.49_pm.png\" alt=\"Step 8 OpenURL\" /\u003e\u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eClose this section by clicking the Done button.\u003c/p\u003e\n\n    \u003cp\u003eAs a result, our flow should look like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701914437/media/Screenshot_2023-12-07_at_12.27.47_pm.png\" alt=\"Step 8 Result\" /\u003e\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli\u003eWe now name, save, and activate the flow we created.\u003c/li\u003e\n  \u003cli\u003eClick Save and provide a Flow Label and Flow API Name. The Flow API Name we will use is \u003ccode\u003eMembership_Application\u003c/code\u003e. Note this for use later in the next section.\u003c/li\u003e\n  \u003cli\u003eIn the Show Advanced section, set ‘How to Run the Flow’ to ‘System Context Without Sharing - Access All Data’. Click Save.\u003c/li\u003e\n  \u003cli\u003eClick the ‘Activate’ button at the top right of the flow builder interface.\u003c/li\u003e\n  \u003cli\u003eClick the Back arrow at the top left of the flow interface to return to our flows list.\u003c/li\u003e\n  \u003cli\u003eFind the Flow we just created and click the arrow-down button on the far right of the row of our flow entry. Select “Edit Access.”\u003c/li\u003e\n  \u003cli\u003eCheck the ‘Override default behaviour and restrict access to enabled profiles or permission sets’ checkbox and ensure that at least the Site Profile in section 6 step 3 is Enabled here.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2 id=\"lightning-web-component-and-app-development\"\u003e9. Lightning Web Component and App Development:\u003c/h2\u003e\n\u003cp\u003eBuild a Lightning Web Component and App to embed your flow into your external website. This contains the form on your site.\u003c/p\u003e\n\n\u003cp\u003eUtilise the resources from \u003ca href=\"https://github.com/rygramer/embedFlowInExternalWebsite\"\u003eGitHub: embedFlowInExternalWebsite\u003c/a\u003e as a guide. In this example, we follow this guide and will add code to the component and controller of a Lightning component and in a Lightning App.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eOpen the Developer console from the Salesforce Setup cog icon menu.\u003c/li\u003e\n  \u003cli\u003eGo to ‘File’ -\u0026gt; ‘New’ -\u0026gt; ‘Lightning Component’.\u003c/li\u003e\n  \u003cli\u003eIn the New Lightning Bundle dialogue that pops up, provide a Name \u003ccode\u003eembedFlowInExternalWebsite\u003c/code\u003e. No other options in this box are required in this example. Click the Submit button.\u003c/li\u003e\n  \u003cli\u003eEnsure you are navigated to the Component item of this Lightning Component (Hold: Ctrl + Shift + 1) navigate to the \u003ccode\u003eembedFlowInExternalWebsite.cmp\u003c/code\u003e tab in the console.\u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eReplace the aura:component template with the following code:\u003c/p\u003e\n\n    \u003cpre\u003e\u003ccode\u003e\u0026lt;aura:component implements=\"flexipage:availableForAllPageTypes,lightning:availableForFlowActions\" access=\"GLOBAL\"\u0026gt;\n  \u0026lt;aura:handler name=\"init\" value=\"{!this}\" action=\"{!c.init}\" /\u0026gt;\n  \u0026lt;lightning:flow aura:id=\"flowData\"/\u0026gt;\n \u0026lt;/aura:component\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n  \u003c/li\u003e\n  \u003cli\u003eGo to ‘File’ -\u0026gt; Save.\u003c/li\u003e\n  \u003cli\u003eNavigate to the Controller Element of the Lightning Component. Click the ‘Controller’ element in the top right panel of the developer console or Hold: Ctrl + Shift + 2. Click the tab called \u003ccode\u003eembedFlowInExternalWebsiteController.js\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eReplace the Javascript template with the following code and reference the API Name of the flow we created previously in this line \u003ccode\u003eflow.startFlow(\"YOUR_FLOW_API_NAME\");\u003c/code\u003e Below is our example.\u003c/p\u003e\n\n    \u003cpre\u003e\u003ccode\u003e({\n  init : function (component) {\n      var flow = component.find(\"flowData\");\n      flow.startFlow(\"Membership_Application\");\n  }\n })\n\u003c/code\u003e\u003c/pre\u003e\n  \u003c/li\u003e\n  \u003cli\u003eGo to ‘File’ -\u0026gt; Save.\u003c/li\u003e\n  \u003cli\u003eGo to ‘File’ -\u0026gt; ‘New’ -\u0026gt; ‘Lightning Application’ and provide the Name: \u003ccode\u003eembedFlowInExternalWebsiteApp\u003c/code\u003e, check the ‘Lightning Out Dependency App’ checkbox and click the Submit button.\u003c/li\u003e\n  \u003cli\u003eEnsure we are viewing the \u003ccode\u003eembedFlowInExternalWebsiteApp.app\u003c/code\u003e tab in the console and can see the aura:application template.\u003c/li\u003e\n  \u003cli\u003e\n    \u003cp\u003eReplace the aura:application template with the following code.\u003c/p\u003e\n\n    \u003cpre\u003e\u003ccode\u003e\u0026lt;aura:application access=\"GLOBAL\" extends=\"ltng:outApp\" implements=\"ltng:allowGuestAccess\"\u0026gt;\n \u0026lt;aura:dependency resource=\"c:embedFlowInExternalWebsite\"/\u0026gt; \n \u0026lt;/aura:application\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n  \u003c/li\u003e\n  \u003cli\u003eGo to ‘File’ -\u0026gt; Save All.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eWe should now see these 3 screens in the developer console:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701933928/media/Screenshot_2023-12-07_at_5.53.01_pm.png\" alt=\"Lightning 1\" /\u003e\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701933951/media/Screenshot_2023-12-07_at_5.53.12_pm.png\" alt=\"Lightning 2\" /\u003e\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701933968/media/Screenshot_2023-12-07_at_5.53.31_pm.png\" alt=\"Lightning 3\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"flow-embedding-on-website\"\u003e10. Flow Embedding on Website:\u003c/h2\u003e\n\u003cp\u003eEmbed the Salesforce Lightning Flow into your website using the provided script from the guide in the previous step. This script will render the flow within a designated div element on your website. (The below script utilises a StoreConnect web-page)\u003c/p\u003e\n\n\u003cp\u003eFirst, we need to ensure our Screen Flow has access to our Site Profile.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eSearch ‘Sites’ in the Setup Quick Find bar.\u003c/li\u003e\n  \u003cli\u003eClick on the Site Label in the Sites list. Not \u003ccode\u003eEdit\u003c/code\u003e or the site URL.\u003c/li\u003e\n  \u003cli\u003eClick the \u003ccode\u003ePublic Access Settings\u003c/code\u003e button.\u003c/li\u003e\n  \u003cli\u003eScroll down to the ‘Enabled Flow Access’ list and click Edit.\u003c/li\u003e\n  \u003cli\u003eSelect the flow we created in the last step, from Available Flows column into the Enabled Flows column and then click Save.\n\u003cem\u003eNote: This Flow should be available if we provided access in Section 7 step 20.\u003c/em\u003e\u003c/li\u003e\n  \u003cli\u003eCreate a WebPage on your website, if using StoreConnect CMS, Create a new Page, name it, give it a path, identifier and associate it with a Store.\u003c/li\u003e\n  \u003cli\u003eIn the Content field, include the following script and markup. If you are using a CMS or webhost other than StoreConnect, ensure that this script is on your website’s page markup.\u003c/li\u003e\n  \u003cli\u003eWhere we see \u003ccode\u003ehttps://YOUR-SALESFORCE-SITE-URL.com\u003c/code\u003e, replace this with the URL of the site URL we created in Section 3.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cpre\u003e\n  \u003ccode\u003e\u0026lt;script src=\"https://YOUR-SALESFORCE-SITE-URL.com/lightning/lightning.out.js\"\u0026gt;\u0026lt;/script\u0026gt;\n   \u0026lt;div id=\"lightningLocator\"\u0026gt;\u0026lt;/div\u0026gt;\n   \u0026lt;script\u0026gt;\n       $Lightning.use(\"c:embedFlowInExternalWebsiteApp\",\n           function() {\n               $Lightning.createComponent(\n                   \"c:embedFlowInExternalWebsite\",\n                   { },                  \n                   \"lightningLocator\",   \n                   function(cmp) {}\n               );\n           },\n           'https://YOUR-SALESFORCE-SITE-URL.com'  // Site endpoint\n       );\n   \u0026lt;/script\u0026gt;\n  \u003c/code\u003e\n\u003c/pre\u003e\n\n\u003cp\u003eFollowing these steps, we should see a Page record that looks like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701934266/media/Screenshot_2023-12-07_at_6.00.23_pm.png\" alt=\"Step 10 Result 1\" /\u003e\u003c/p\u003e\n\n\u003cp\u003eThis should render the form on the store public website at the address \u003ccode\u003ehttps://YOUR-STORE-SITE-URL/PAGE-NAME]\u003c/code\u003e and look like this: \n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701934462/media/Screenshot_2023-12-07_at_6.03.53_pm.png\" alt=\"Step 10 Result 2\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"linking-flow-data-to-order\"\u003e11. Linking Flow Data to Order:\u003c/h2\u003e\n\u003cp\u003eFinally, we create an automation that takes the form data and custom record and links it to the order in Salesforce. We will use a record-triggered flow from the StoreConnect Order Campaigns records that capture UTM codes. In this example, the UTM Source and UTM Token \u003ccode\u003e\u0026amp;utm_source=membership-application\u0026amp;utm_token=a3I5j000000sh4PEAQ\u003c/code\u003e.\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eSearch ‘Flows’ in the Setup Quick Find bar and click \u003ccode\u003eFlows\u003c/code\u003e under ‘Process Management’.\u003c/li\u003e\n  \u003cli\u003eClick the ‘New Flow’ button on the top right of the screen.\u003c/li\u003e\n  \u003cli\u003eEnsure the “Record-Triggered Flow” option is selected and click the ‘Create’ button at the bottom right of the modal.\u003c/li\u003e\n  \u003cli\u003eSelect \u003ccode\u003eOrder Campaign\u003c/code\u003e for the Object.\u003c/li\u003e\n  \u003cli\u003eIn this example, we only need to set ‘Trigger the Flow When: A record is created’.\u003c/li\u003e\n  \u003cli\u003eSet our Condition Requirements to All Conditions Are Met and here we will filter the trigger to when an Order Campaign is created with a UTM source of \u003ccode\u003emembership-application\u003c/code\u003e. Set the s_c__UTM_Source Field (operator) Equals \u003ccode\u003emembership-application\u003c/code\u003e for the Value.\u003c/li\u003e\n  \u003cli\u003eOptimize the flow for: Actions and Related Records (which is an ‘after update’).\u003c/li\u003e\n  \u003cli\u003eClick the ‘Add Element’ circle connector that turns to a plus sign on mouse hover.\u003c/li\u003e\n  \u003cli\u003eChoose an Assignment element and call the API Name \u003ccode\u003eAssign_Application_Order_Variables\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eCreate the first variable as a Text Data type and call it \u003ccode\u003eApplicationIdVar\u003c/code\u003e, set the Operator to Add and then set the Value to $Record (s_c__Order_Campaign__c) \u0026gt; UTM Token (s_c__UTM_Token__c).\u003c/li\u003e\n  \u003cli\u003eCreate a second variable as a Text Data type and call it \u003ccode\u003eOrderIdVar\u003c/code\u003e, set the Operator to Add and then set the Value to $Record (s_c__Order_Campaign__c) \u0026gt; Order (s_c__Order_Id__c).\u003c/li\u003e\n  \u003cli\u003eClick the ‘Add Element’ circle connector to add a new function under our variable keys assignment above.\u003c/li\u003e\n  \u003cli\u003eCall the Element API Name \u003ccode\u003eLink_Application_to_Order\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eWhen setting “How to Find Records to Update and Set Their Values”, select \u003ccode\u003eSpecify conditions to identify records, and set fields individually\u003c/code\u003e to find an Application record and link it to the parent Order of this Order Campaign.\u003c/li\u003e\n  \u003cli\u003eSet the Update Record Object to \u003ccode\u003eApplication\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eSet the filter to ‘All Conditions Are Met’ with the \u003ccode\u003eId\u003c/code\u003e Field and Equals (operator) to our \u003ccode\u003eApplicationIdVar\u003c/code\u003e for the Value.\u003c/li\u003e\n  \u003cli\u003eTo “Set Field Values for the Application Records”, select the Lookup field to the order on our Application custom object, in this case, the field is \u003ccode\u003eMembership_Order__c\u003c/code\u003e, set the Value to our \u003ccode\u003eOrderIdVar\u003c/code\u003e variable.\u003c/li\u003e\n  \u003cli\u003eWe now name, save and activate the flow we created.\u003c/li\u003e\n  \u003cli\u003eClick Save and provide a Flow Label and Flow API Name. The Flow API Name we will use is \u003ccode\u003eLink_Application_To_Order\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eIn the Show Advanced section, set ‘How to Run the Flow’ to ‘System Context Without Sharing - Access All Data’. Click Save.\u003c/li\u003e\n  \u003cli\u003eClick the ‘Activate’ button at the top right of the flow builder interface.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eOur flow and trigger function should look like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701934741/media/Screenshot_2023-12-07_at_6.07.45_pm.png\" alt=\"11-1\" /\u003e\nThe assignment function should look like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701934761/media/Screenshot_2023-12-07_at_6.07.57_pm.png\" alt=\"11-2\" /\u003e\nThe record Update function should look like this:\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701934775/media/Screenshot_2023-12-07_at_6.08.13_pm.png\" alt=\"11-3\" /\u003e\u003c/p\u003e\n\n\u003ch2 id=\"our-solution-now-should-do-the-following\"\u003e12. Our Solution Now Should Do the Following:\u003c/h2\u003e\n\n\u003col\u003e\n  \u003cli\u003eProduce a Lightning Screen Flow webform on an unauthenticated webpage.\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701940293/media/Screenshot_2023-12-07_at_7.40.51_pm.png\" alt=\"Final Result 1\" /\u003e\u003c/li\u003e\n  \u003cli\u003eClicking Submit on the Lightning form will create a Custom Object Record.\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701935440/media/Screenshot_2023-12-07_at_6.18.51_pm.png\" alt=\"Final Result 2\" /\u003e\u003c/li\u003e\n  \u003cli\u003eIt will then take the required customer and process data, and pass it to a preselected product in a checkout for payment via direct-to-cart URL.\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701935907/media/Screenshot_2023-12-07_at_6.28.05_pm.png\" alt=\"Final Result 3\" /\u003e\u003c/li\u003e\n  \u003cli\u003eOnce the checkout creates an Order, Order Items, \u003cstrong\u003eOrder Campaign\u003c/strong\u003e, Contact and Account in Salesforce, our second flow is triggered from the Order Campaign and links our Application to the Order in Salesforce.\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701935745/media/Screenshot_2023-12-07_at_6.25.22_pm.png\" alt=\"Final Result 4\" /\u003e\n\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1701940486/media/Screenshot_2023-12-07_at_6.17.002_pm.png\" alt=\"Final Result 5\" /\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003e\u003cstrong\u003eNotes on Future Enhancements:\u003c/strong\u003e\nThis solution can be extended for file uploads utilising advanced file upload on UnofficialSF. The web form will take a moment to cache the lightning component from the Salesforce servers, which could be further enhanced by creating a webform with a framework such as React for more advanced trailblazers. Stay on the lookout for further enhancements to come.\u003c/p\u003e\n\n        \u003c/article\u003e\n      \u003c/section\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e","flash":null,"action":null,"notice":null}