Stripe - Upgrading to Firebase 4.1, Stripe v3

I’m having a hard time figuring out how to upgrade this example to the latest and greatest Firebase and Stripe JS SDKs.

https://github.com/firebase/functions-samples/tree/master/stripe

How to reproduce these conditions In https://github.com/firebase/functions-samples/blob/master/stripe/public/index.html Add: <script src="https://js.stripe.com/v3/"></script> after the v2 script. So:

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

Replace:

    <script src="/__/firebase/3.9.0/firebase-app.js"></script>
    <script src="/__/firebase/3.9.0/firebase-auth.js"></script>
    <script src="/__/firebase/3.9.0/firebase-database.js"></script>
    <script src="/__/firebase/init.js"></script>

with:

   <script src="/__/firebase/4.1.1/firebase-app.js"></script>
    <script src="/__/firebase/4.1.1/firebase-auth.js"></script>
    <script src="/__/firebase/4.1.1/firebase-database.js"></script>
    <script src="/__/firebase/init.js"></script>

You may also need to switch the Stripe API Key from:

      var stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXXXX');

to:

      Stripe.setPublishableKey('pk_test_XXXXXXXXXXXXXXXXXXXX');

Sample name or URL where you found the bug https://github.com/firebase/functions-samples/tree/master/stripe

firebase/functions-samples/stripe

Failing Function code used (including require/import commands at the top) It’s not really the function code that seems to be failing, but listening to whether or not the customer has a stripe id in the firebase database. I’m able to create the customer/account in Firebase and see them in Stripe, but I am unable to tell if the stripe customer is initialized or to set stripeCustomerInitialized to be true.

            firebase.database().ref(`/stripe_customers/${this.currentUser.uid}/customer_id`).on('value', snapshot => {
              this.stripeCustomerInitialized = (snapshot.val() !== null);
            }, () => {
              this.stripeCustomerInitialized = false;
            });

When, it listens for this function, even though a customer is created and has values within Firebase, this.stripeCustomerInitialized always sets to be false.

Steps to set up and reproduce

Sample data pasted or attached as JSON (not an image)

{
  "stripe_customers" : {
    "XXXXXXXXXXXXXXXXXXX" : {
      "customer_id" : "cus_XXXXXXXXXXXXX"
    }
}

Not sure if I needed to obfusicate the UID and cus_ID or not. (The XXXXXXX’s in the database are a random unique string)

Security rules used

{
  "rules": {
    "stripe_customers": {
      "$uid": {
        ".read": "$uid === auth.uid",
        "sources": {
          "$chargeId" : {
            ".write": "$uid === auth.uid",
            "token": { ".validate": "newData.isString()" },
            "$other": { ".validate": false }
          }
        },
        "charges": {
          "$sourceId" : {
            ".write": "$uid === auth.uid",
            "source": { ".validate": "newData.isString()" },
            "amount": { ".validate": "newData.isNumber()" },
            "$other": { ".validate": false }
          }
        }
      }
    }
  }
}

Debug output

Errors in the console logs

c:0:0:0 Websocket connecting to wss://s-usc1c-nss-XXX.firebaseio.com/.ws?v=5&ns=XXXXXXXXXXXXXXXXXXX
SortedMap.js:287 c:0:0:0 Websocket connected.  
SortedMap.js:287 c:0:0: Realtime connection established.  
SortedMap.js:287 p:0: connection ready  
SortedMap.js:287 p:0: reportStats {"c":{"sdk.js.4-1-1":1}}  
SortedMap.js:287 p:0: {"r":1,"a":"s","b":{"c":{"sdk.js.4-1-1":1}}}  
SortedMap.js:287 p:0: Listen on /stripe_customers/XXXXXXXXXXXXXXXXXXX/customer_id for default  
SortedMap.js:287 p:0: {"r":2,"a":"q","b":{"p":"/stripe_customers/XXXXXXXXXXXXXXXXXXX/customer_id","h":""}}  
SortedMap.js:287 p:0: Listen on /stripe_customers/XXXXXXXXXXXXXXXXXXX/sources for default  
SortedMap.js:287 p:0: {"r":3,"a":"q","b":{"p":"/stripe_customers/XXXXXXXXXXXXXXXXXXX/sources","h":""}}  
SortedMap.js:287 p:0: Listen on /stripe_customers/XXXXXXXXXXXXXXXXXXX/charges for default  
SortedMap.js:287 p:0: {"r":4,"a":"q","b":{"p":"/stripe_customers/XXXXXXXXXXXXXXXXXXX/charges","h":""}}  
SortedMap.js:287 p:0: from server: {"r":1,"b":{"s":"ok","d":""}}  
SortedMap.js:287 c:0:0: Primary connection is healthy.  
SortedMap.js:287 p:0: from server: {"r":2,"b":{"s":"permission_denied","d":"Permission denied"}}  
SortedMap.js:287 p:0: listen response {"s":"permission_denied","d":"Permission denied"}  
SortedMap.js:287 event: /stripe_customers/XXXXXXXXXXXXXXXXXXX/customer_id:cancel 
SortedMap.js:287 p:0: from server: {"r":3,"b":{"s":"permission_denied","d":"Permission denied"}}  
SortedMap.js:287 p:0: listen response {"s":"permission_denied","d":"Permission denied"}  
SortedMap.js:287 event: /stripe_customers/XXXXXXXXXXXXXXXXXXX/sources:cancel 
SortedMap.js:287 p:0: from server: {"r":4,"b":{"s":"permission_denied","d":"Permission denied"}}  
SortedMap.js:287 p:0: listen response {"s":"permission_denied","d":"Permission denied"}  
SortedMap.js:287 event: /stripe_customers/XXXXXXXXXXXXXXXXXXX/charges:cancel 

Not sure if I needed to obfusicate the UID or not. (The XXXXXXX’s in the database are a random unique string)

Screenshots

Expected behavior Note: [e-mail] is actually whatever email address of the user who is logged in.

Actual behavior Note: [e-mail] is actually whatever email address of the user who is logged in.

[chasemac]

I’m having the same issue

[nicolasgarnier]

@jamesdaniels: would be nice to polish the Stripe sample a bit, it’s pretty popular! 😃