Use LeadPages + Stripe + WordPress + Gravity Forms together

index.md

This allows you to set a LeadPages button to pop up a Stripe payment form, and then send the data to your WordPress Gravity Forms (with Stripe Add-On) to capture the payment and record the form submission. This means you can also add other feeds to the same form to add people to a mailing list and so on.

Usage:

1. You will require WordPress with Gravity Forms and the Gravity Forms Stripe Add-On
2. Create a form with a credit card field, an email field, a "total" field, and a product "drop down" field.
3. Mark the product "drop down" field as "Allow field to be populated dynamically" in the Advanced tab
4. For the product "drop down" it doesn't matter what products you have for this purpose, the values will be filled from this script
5. Copy the appropriate form and field IDs into the values below
6. Also fill in the rest of it as you please with links to an image, your product name, price and so on
7. Insert all that into your end-of-body tracking codes for your LeadPage
8. Back in gravity forms be sure to set up Stripe and whatever else you need for your form, that part isn't specific to this script.

    <script src="https://checkout.stripe.com/checkout.js"></script>

    <script>
    gf_stripe_form = { 
      "button_class" : "cta-btn", // CSS class of the buttons on your LeadPage
      "key": 'pk_...', // Stripe publishable key (test/live)
      "image": "https://...", // Stripe cehckout image to use, should be square, but will be placed in a circle shape
      "name" : "...", // Name fielf for Stripe Checkout UI
      "product":"...", // Produce name, used for Stripe Checkout UI and sent to Gravity Forms
      "price":495.00, // Price in dollars
      "id": 1, // ID of the Gravity Form to submit to
      "email_input": "input_2", // "input_2" means gravity form field ID 2 is the Email text field
      "product_input": "input_4", // "input_4" means field with ID 4 is the Product (a "SelecT" type input)
      "success_url" : "https://www.menoraway.com/create-miracles-thank-you" // Where to send them on success
    };
    
    // ... insert code from leadpages-stripe-gravityforms-helper.js here ...
    </script>

leadpages-stripe-gravityforms-helper.js

$(function() {

    var handler = StripeCheckout.configure({
        key: gf_stripe_form.key,
        //image: '/img/documentation/checkout/marketplace.png',
        token: function(token) {
          // Use the token to create the charge with a server-side script.
          // You can access the token ID with `token.id`
          var input_values = {
            //"input_4":"Create Miracles Bootcamp!|495",
            //"input_2":token.email,
            "stripe_credit_card_type":token.card.brand,
            "stripe_credit_card_last_four":token.card.last4,
            "stripe_response": JSON.stringify(token),
          };
          
          input_values[gf_stripe_form.email_input] = token.email;
          input_values[gf_stripe_form.product_input] = gf_stripe_form.product+"|"+gf_stripe_form.price;

          $.ajax({
            type: 'POST',
            url: 'https://www.menoraway.com/gravityformsapi/forms/'+gf_stripe_form.id+'/submissions',
            data: JSON.stringify({ "input_values":input_values }),
            contentType: "application/json; charset=utf-8",
            dataType: "json" 
          }).done(function(data) { location.href = gf_stripe_form.success_url; });
        }
    });

    $('.'+gf_stripe_form.button_class).on('click', function(e) {
        // Open Checkout with further options
        handler.open({
          name: gf_stripe_form.name,
          image: gf_stripe_form.image,
          description: gf_stripe_form.product,
          amount: Math.round(gf_stripe_form.price*100)
        });
        e.preventDefault();
    });

    // Close Checkout on page navigation
    $(window).on('popstate', function() { handler.close(); });

});