▼
Streaming live at 10am (PST)

How to tie checkout for a digital good to a form submission together without 3party tools

Design help Custom code
,
#1

Hey guys,

I’m trying to create an efficient checkout experience for a digital good (feature job listing on a job board). I’ve spent the last months talking to external providers, reading through past Webflow forums post, and trying out a variety of hacks (no-code and js/external code) to get this to work. To this day, I’m quite stuck on how best to process and would love to get some inspiration from the community or hear if anyone has found a workaround to this.

My goal is to unify the job listing form submission together with the checkout process. Does not really matter if one comes before the other, but I’m pretty sure checkout needs to come fist given the limited options. Ideally, all should happen on the same page, and I’m trying to avoid manually coding a Stripe checkout (& plans) right within my form, but it’s unclear how well this option would actually work with selecting different stripe plans, etc without breaking the form submission etc. Similarly, I’m avoiding Typeform and Airtable forms, which I personally think look terribly bad (ux/design-wise), but obviously actually do work with simple workflows powered by zapier (which btw, is crazy expensive when scaling).

I got quite enthusiastic when webflow launched the digital goods feature (beta) when using e-commerce, and thought this was going to work. But adding dropdown and rich text editor in the checkout form is not really an option to capture job listings details anyway, and redirecting the user after the checkout form to a different webflow form seems quite fragile. This said, I successfully managed to create a webflow webhook which triggers a python function using AWS API gateway and AWS Lambda and so am able to create WF Items whenever a form is filled (Funny how no-code pushed me into “know code”). But I am stuck in webflow in understanding how best to manage this workflow… Is it possible to pass a field (order id number) from the checkout confirmation page through a redirect as a hidden field within a weblow form which then captures the remaining job listings details? Did anyone have to go through all this pain? Does anyone have any major or even minor tips? Thanks in advance,

Happy Lorem ipsum!

#2

Did you find the order id displayed as a field in the checkout page?

#3

Ok, went too deep in my thinking/assumptions…there’s no order ID field on the checkout, correct.
That only gets created after I guess. But the good news now is that I can use the order-ID dynamically (project.webflow.io/form/ {Order Number}) when sending out the confirmation email of the order, and so pass the Order Number ID from the URL as a parameter to the form as a hidden field? Is my thinking correct?

#4

actually, this will not work, because I cannot properly format the order number to be part of the clickable URL.

#5

I actually didn’t understand what the workflow is from your initial post. Might help if you list out the steps and where you are stuck?

#6

Ok, agreed my question could be structured better! :slight_smile:

Goal: a) accept payment using Webflow’s native e-commerce features and b) collect additional customer data using a Webflow form while having an automated way to cross-reference a & b.

Given the goal, here are possible workflows:

Workflow A

  1. User checks-out and receives a confirmation e-mail with the order ID
  2. User is redirected to Webflow Form to collect details
  3. Form submission triggers a webhook to create a CMS item (easy)

Problem:
The user needs to manually input the order id from steps 1 to 2. This should work, but it makes the process slow and fragile. I thought I could improve this process, but adding a unique custom link sent to the user upon approval of the order, which includes the order-id as a parameter that is then passed to the form as a hidden field. While I’m able to pass URL parameters successfully as hidden fields to a Webflow form, I cannot format the URL properly when including a dynamic field in the email notification settings of the eCommerce section.

Workflow B

  1. User checks-out and receives a confirmation e-mail with the order ID
  2. User is redirected immediately after the checkout confirmation page to the form. Relevant fields such as order-id, e-mail are passed along so that orders and form submission can be cross-referenced/matched.
  3. Form submission triggers a webhook to create a CMS item (easy)

Problem:
While it’s obviously possible to redirect the user to a Webflow form from the checkout confirmation page, I’m unable to pass relevant fields such as order id. I might find a hack to pass the e-mail field, but it’s the order id that makes the order unique to a form submission. A user with the same e-mail address could be checking out several times and submitting several forms

Workflow C

  1. User provides job listings details within the checkout form
  2. Form submission triggers a webhook to create a CMS item (easy)

Problem: I cannot include more advanced form fields such as dropdowns inside Webflow’s native checkout form.

My question is, which workflow could be working out given my goal using only Webflow’s native features and eCommerce solutions, JS custom code. Happy to use AWS Lambda functions to intervene and treat/automate intermediary steps if needed.

Are there any other workflows that could solve my goal that are not listed here? Any tips on how to solve this? Many thanks in advance for your help.

#7

Yes. :smile:

Some paths to explore…

Workflow A
Issue:
Ecommerce email notifications in Webflow are not very customisable.
Workaround:
One option is just to handle the email notification yourself where you can be sure the order id/custom link is handled correctly. You could even build the form and send it in the email.

Workflow B
Issue:
Order id is not available to confirmation page.
Workaround:
Match orders on email and date/time to minimise conflict with multiple orders from the same user.

Workflow C
Issue:
Limited checkout page fields.
Workaround:
Modify the workflow so the user completes a form before adding the product to checkout. Save the form and then complete the CMS item creation on successful payment.

1 Like
Is it possible to collect payment for a service within a webflow form?
#8

Actually, order id is available in order confirmation page… But it is in the url of the page.
What you can do :
Add a Form in the order confirmation page, add a hidden input to this form and with vanilla js or jquery get the url parameter from the order confirmation url, it’s a parameter written like this : orderId

Here’s a function to get parameters in a url :

// look for URL params
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

You just need to write a script that passes the orderId in this function to get a variable with your orderId inside. Then you can use it wherever you need.
Hope this helps

2 Likes
#9

@Gail_Ranger, thanks for all these thoughtful comments. All workflows seem more feasible now, I need to go and experiment…but I’m quite intrigued on your workaround for workflow C: you’re saying redirect the user after form completion to the checkout page, or integrate the checkout experience within the form? These are quite different. I mean, my dream would have been to allow someone to simply hit a button and do both actions, submit form AND pay…but from my understanding I cannot really embed Webflow’s native checkout within the form right?

#10

@pepperclip You are absolutely right. Well spotted! How did miss that? Haha. That’s great news to validate one of the workflows. So, now I just need to move my form to the order confirmation page, and pass the order id from the URL to a hidden field. This should work! I’ll get back with feedback here. Thanks a million!

#11

I think @pepperclip solution’s is a more efficient checkout from a coding perspective.
I guess from a user’s perspective the checkout is page typically the final step. My thought on Workflow C was something like a multi-step form where the details are collected before adding the product and checkout buttons in the subsequent steps. I haven’t tried that option before so I don’t know if there are any obstacles.

#12

@LucaVJ I had a quick look at implementing workflow C (modified version) and it seems viable with some custom code.

#13

@Gail_Ranger So custom code that intervenes where exactly? Can you elaborate a little? From your description of workflow C, I interpret 2 scenarios:

  1. a simple redirect to a checkout page after submitting a form?
  2. an integrated checkout at the end of a form, but preceding form submission AND checkout button?

I assume you are refering to scenario2 where custom code handles this workflow?

#14

@LucaVJ I’m thinking along the lines of scenario 1 with custom code (cc):

  1. Collect the form data (cc)
  2. Add product to cart (cc)
  3. Redirect to checkout (simple redirect)
  4. Post form data on confirmation (cc)
    My comment on it being viable was based on testing out step 2 and 3. I don’t have a (non-live) ecommerce site to evaluate on right now…
1 Like
#15

Got it! Just want to make sure I understand this correctly:
[Step1] Collect the form data. Why cc? Are you suggesting not using webflow’s native form block and a html hard-coded one? why?
[Step 2 and 3] Quite stragithforward. I guess in [Step 1], you can provide a dropdown or radio-sytle option fields options of choosing between say 2 or 3 payments plans, and then pass that information through the redirect so that the checkout page is relative/unique to the selction?
[Step4] is confusing. I thought form data had been posted already in[Step 1]?

Thanks for these valuable comments, I feel I’m multiplying options as we speak!