• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 84
  • Last Modified:

Stripe application Javascript error

I'm struggling to get an example of taking payments with stripe, using a mixture of client and server side code. I have the following JavaScript (example) code which generates, the example listed below generates an error when I run it in a debugger this line "<script type="text/javascript">" gives the following error "
 SCRIPT5009: '$' is not defined" I'm new to both stripe and jquery so not sure what needs changing can someone help.

Mark

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workflow.aspx.cs" Inherits="StripeDemo.workflow" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <script src="https://checkout.stripe.com/checkout.js" ></script>
    <script type="text/javascript">
    $(function () {
                var renderPaymentMethod = function () {

                    var handler = StripeCheckout.configure({
                        key: 'pk_XXXXX_XXXXX', //Your publishable key from the Stripe Portal
                        //image: "http://tempurl.com/logo.jpg",
                        email: 'YourSoToBeCustomers@email.com',

                        token: function (token, args) {
                            //However you want to get the Token back to the server
                             AjaxPostToCreateCustomerOnToServer(token.id);                              
                        }
                    });

                    //Stripe's  checkout.js will display a iframe modal to collect CC info
                    handler.open({
                        name: 'My Awesome Business',
                        panelLabel: 'Add Payment Method',
                        description: 'AwesomeBusiness.com',
                        allowRememberMe: false
                    });
                };

                $("#btnSubscribePayment").click(function () {
                    renderPaymentMethod();

                });

            });

   </script>

        <input id = "btnSubscribePayment" type="submit" value="Release"/>
    </div>
    </form>
</body>
</html>
0
markej
Asked:
markej
  • 3
  • 2
1 Solution
 
zephyr_hex (Megan)DeveloperCommented:
My first guess is that you need to include jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Open in new window

0
 
David Johnson, CD, MVPOwnerCommented:
you could just modify the stripe demo
Demo Solution
Example Site
Did you remember to add stripe via github?
0
 
markejAuthor Commented:
I've added stripe via GitHub, the problem is I have multiple products that each have their own subscriptions so need to generate/connect to the appropriate subscription in the back end hence the problem and why I'm trying to do it this way. The example I'm using to try is in this page A Mix of Server Side vs Client Side Stripe .NET Exampl
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
zephyr_hex (Megan)DeveloperCommented:
So, you've verified that you've linked in jQuery?  If you comment out everything inside  $(function () { ... }); do you still get the error?
0
 
markejAuthor Commented:
After further experimentation including adding the jquery reference, I get the stripe form to load BUT immediately closes. I've added an alert which if I wait for approx. 5+ secs before clicking OK allows the form to show BUT it's there for a couple of seconds before it disappears. This happens whether I try to make a call to the server code or not. In fact currently I have that parted commented out.

Can someone tell me what I'm doing wrong? OR rather what I have to change to keep the stripe Iframe open until populated and the submit button pressed? It even closes when I'm entering data. It appears the page is reposting itself.

Here is the code with the alert in:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://checkout.stripe.com/checkout.js"></script>
    <script> // type="text/javascript">
    $(function () {
                var renderPaymentMethod = function () {

                    var handler = StripeCheckout.configure({
                        key: '<%= stripePublishableKey %>',  //Your publishable key from the Stripe Portal
                        email: 'YourSoToBeCustomers@email.com',
                        
                        token: function (token, args) {
                            //However you want to get the Token back to the server
                         //$.AjaxPostToCreateCustomerOnToServer(token.id);
                            
                          // $.CreateStripeCustomer(token.id);
                        }
                        
                    }

                    );


                    //Stripe's  checkout.js will display a iframe modal to collect CC info
                    handler.open({
                        name: 'My Awesome Business',
                        panelLabel: 'Add Payment Method',
                        description: 'AwesomeBusiness.com',
                        allowRememberMe: false
                    }

                    );
                    
                    alert("CreateCust");
                };

                $("#btnSubscribePayment").click(function () {
                    renderPaymentMethod();

                });

            });

   </script>

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
For one, the button is a submit button, which means the form will submit as soon as it's clicked.  You can change it to type = button, and then handle the form submission via  jQuery/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now