How to create a fake-buy-button test page with Typeform

1. Background:
   • Note that the real Stripe integration for Typeform works for single-payments only, you can't test subscription products. (Source?)
     • However, you can create a fake form that makes the user think they're signing up for a subscription product.
   • Major issue: There may not be a way to automatically discard a user's credit card information. You would need to do it manually. This creates some risk.
2. Step-by-step process
   1. Log in to Typeform.
      1. Go to https://admin.typeform.com/login/
         1. Your username and password are stored in LastPass.
   2. Create a new blank form.
      1. Click the button in the top-left of the screen. 
      2. Click 'Add new Workspace' 
         1. Explanation: A workspace is just a folder that contains typeforms.
      3. Name the workspace after your product and click 'Save'. 
         1. Explanation:
            1. I'm not totally sure of the best way to organizing things at the moment.
            2. I'm thinking I may create multiple landing pages for a single product, so it seems to make sense to have a separate workspace for each product.
      4. Click 'Create a new typeform'. 
      5. Click 'Start from scratch'. 
      6. Name the form after your product. 
         1. Use this format: "ProductName - 1 - Initial attempt"
         2. The number indicates branching (eg 1, 2, 3, 1-1, 1-2, 1-3).
         3. In later iterations "Initial attempt" should be replaced with a description of the difference from the initial attempt.
   3. Add the Welcome screen. 
      1. Click 'Welcome Screen'. 
      2. Add the image.
         1. Click the 'Image / Video' button. 
         2. Click 'Upload'. 
         3. Select the image you've created. 
            1. levelsio's image is:
               1. 600x292
               2. PNG format
               3. Mostly transparent
               4. Has his picture on it.
               5. The color of the text in the image matches the color of the text in his Typeform.
      3. Fill out the 'Text' box with a summary of your product. 

         1. "How to build, launch, grow and\nmonetize a bootstrapped startup"

      4. Bold the text in the 'Text' box. 
         1. At least, that's what levelsio did.
      5. Change the 'Button' text box to say "PRE-ORDER — $30" 
   4. Add text boxes explaining the product.
      1. Example:        
      2. Step-by-step process:
         
         1. Click 'Statement'. 
         2. Add the explanatory text. 
         3. If this explanatory text box is one of several-in-a-row and is not the final one:
            1. Change the 'Button' text box to "...". 
         4. Under 'Settings', click the 'Icon (quotation marks)' button to disable the quotation-mark. 
   5. Add questions asking for information you can use to add the user to a mailing list.
      1. Example:   
   6. Add the questions from the Stripe form.
      1. (Optional) Get the text used in the 'Stripe' payment template.
         1. Explanation:
            1. Why it's optional:
               1. This is optional because I've already grabbed the text and provide it for you below.
               2. I'm detailing these steps just for my own future reference, in case I'm wondering how I did this.
            2. Why we're doing this:
               1. First of all, we don't actually want to charge users; we just want them to think we're charging them. There is no official 'fake buy button' form, so we need to create our own by copying the text of the real purchase form.
               2. Second, as of 2016.08.19 you need to be a paying member of Typeform ($35/mo) to use the real Stripe form, and we don't want to sign up if we we may not make money anytime soon.
         2. Step-by-step instructions:
            1. Click the 'Stripe payment' option. 
            2. Select the text in the sample form that appears. 
            3. Copy the text and paste it into Notepad. 
      2. Create a 'Question group'. 
         1. Click 'Question group'. 
         2. In the 'Question group' text box, put 'PAYMENT' in bold. 
         3. Click the 'Description' button. 
         4. Fill out the 'Description' box with the text below. 

            1. P.S. DON'T LIKE CREDIT CARDS? PAYPAL $30 TO HELLO@DOMAINNAME.TLD TO ORDER
               
               Your credit card will be charged: $30
               We never store your Credit Card number or CVC number!

               1. Bold the first line; I'm not doing it here because it would be visually distracting.
               2. Update the price and email address.
         5. Click 'Save'. 
      3. Create the CC number question.
         1. Click 'Number'. 
         2. Fill in the question text: 
            1. "Please enter your Credit or Debit Card number:"
         3. Under 'Settings', click the 'Required' button to make the field required. 
         4. Click 'Save'. 
      4. Create the CVC number question.
         1. Drag the 'Number' option on the left into the 'PAYMENT' question group. 
         2. Fill in the question text: "The CVC number:" 
         3. Click the 'Description' button. 
         4. Fill in the description text: "(3 or 4 digit security number on the back of your card)" 
         5. In the 'Range of values' boxes, put 0 to 999. 
         6. Under 'Settings', click the 'Required' button to make the field required. 
         7. Click 'Save'.
      5. Create the 'Name' question.
         1. Drag the 'Short text' option on the left into the 'PAYMENT' question group.
         2. Fill in the question text: "The name on your card:" 
         3. Under 'Settings', click the 'Required' button to make the field required. 
         4. Click 'Save'.
      6. Create the 'Expiry Month' question.
         1. Drag the 'Multiple choice' option on the left into the 'PAYMENT' question group.
         2. Fill in the question text: "Your card's expiry month:" 
         3. Under 'Choices', fill out the different months. 
            1. Format to use: "01/" through "12/"
         4. Under 'Settings', click the 'Required' button to make the field required. 
            
         5. Click 'Save'.
      7. Create the 'Expiry Year' question.
         1. Drag the 'Multiple choice' option on the left into the 'PAYMENT' question group.
         2. Fill in the question text: "Your card's expiry year:" 
         3. Under 'Choices', fill out the current year and then ten more years. 
            1. Format to use: "/16" through "/27".
         4. Under 'Settings', click the 'Required' button to make the field required. 
            
         5. Click 'Save'.
   7. Set the 'Submit' button to say 'Submit & pay $10'.
      1. Click 'Configure'. 
      2. Click 'Messages'. 
      3. Scroll down and click on 'Submit'. 
      4. Update the text to say 'Submit & pay $10'. 
      5. Click 'Apply'. 

Related pages

• Typeform - Build a PRO typeform - Payment field (Stripe integration)