luna_38953

[tired nacelle]

Are you seeing a specific error? Which step(s) have you followed and what's not happening that you expect?

[gray crown]

Yes I am receiving both a 401 and 402 error in my web inspector console. The 402 occurs when I attempt to click the 'pay' button.

I am testing with the 4242 card, and trying to get my "payment completed" page up and running. I already have html and js code written for that page as per the tutorial on Youtube (I can get the link if that helps?)

[tired nacelle]

Can you share a pi_xxx ID and/or your Stripe.js code that calls confirmPayment

To be clear, you're not redirected to the return_url for your 'payment completed' page, yes?

[gray crown]

I am working on the event listener from ~5 mins into this video

https://www.youtube.com/watch?v=MfFCg7kYCa4

[gray crown]

Yes that is correct. I press the button and nothing visibly happens, just the 402 on my console

[tired nacelle]

What is 'console'? Are you using the CLI?

Again, I need to see some code and/or a payment ID (pi_xxx)

[gray crown]

This is the code that calls confirmPayment

document.addEventListener('DOMContentLoaded', async () =>{
//Fetch publishable key and initialise stripe
const {publishableKey} = await fetch("/config").then(r => r.json())
const stripe = Stripe(publishableKey)
console.log("here!")

const appearance = {
    theme: 'stripe',
    variables: {
      colorPrimary: '#4CBB17', //highlight around selection
      borderRadius: '20px',
      //colorBackground: '#C6AB80',
      //fontFamily: 
    },
  };

//Fetch the client secret and initialise elements
const {clientSecret} = await fetch("/create-payment-intent", {
    method: "POST",
    headers: {
        'Content-Type': 'application/json'
        //pass back 'request body' that includes 
        //info to decide what to charge (calculate amount on server)
    }
}).then(r => r.json())

const elements = stripe.elements({clientSecret, appearance}) //use clientSecret to decide which payment methods to display
const paymentElement = elements.create('payment')
paymentElement.mount('#payment-element') // a 'css selector'

const form = document.getElementById('payment-form')
form.addEventListener('submit', async (e) => {
    e.preventDefault();

    //confirmPayment will redirect to "complete page" after success
    //can pass in options for only specific payment methods redirecting
    // MAKE SURE TO TEST ALL PAYMENT METHODS (act differently)
    const {error} = await stripe.confirmPayment({
        elements, 
        confirmParams: {
            //where customer is redirected after payment flow
            return_url: window.location.href.split("?")[0] + "complete.html" 
        }
    })
    if(error) {
        const messages = document.getElementById('error-messages')
        messages.innerTest - error.message;
    }
})

})

[tired nacelle]

And are yuou redirected here: window.location.href.split("?")[0] + "complete.html"? Or is that the part that errors?

[gray crown]

The console in my web inspector. I am running a test/development server and I am using the CLI

[gray crown]

I am not redirected, I believe this is the origin of the error yes

This is my first attempt at web development from a purely backend environment, so I am very much learning as I go

[tired nacelle]

Can you dive into the 4xx in the browser console?

I suspect there's code on the complete.html that is throwing an exception

[gray crown]

This is what I can see. I'm not sure what I'm looking for exactly?

[tired nacelle]

Can you paste that pi_xxx please

[gray crown]

Sorry where can i find that?

Is it a payment intent id?

Wait, I got it. pi_3Ogwu9BI44JsoHhS1bZhOscp

From this error page:

{
"error": {
"message": "Unrecognized request URL (GET: /v1/payment_intents/pi_3Ogwu9BI44JsoHhS1bZhOscp/confirm). Please see https://stripe.com/docs or we can help at https://support.stripe.com/.",
"type": "invalid_request_error"
}
}

[tired nacelle]

Where are you calling that endpoint? ☝️

[tired nacelle]

These look fine: the 402 error is to indicate payment failure as you're using test cards (4242 with your live keys

[gray crown]

From here:

[tired nacelle]

You need to use test mode keys when developing

[gray crown]

document.addEventListener('DOMContentLoaded', async () => {
const { publishableKey } = await fetch("/config").then(r => r.json())
const stripe = Stripe(publishableKey)

const params = new URLSearchParams(window.location.href)
const clientSecret = params.get('payment_intent_client_secret')

const {paymentIntent} = await stripe.retrievePaymentIntent(clientSecret)
console.log("Complete Here")

const paymentIntentPre = document.getElementById('payment-intent')
paymentIntentPre.innerText = JSON.stringify(paymentIntent, null, 2)
//extract info from paymentIntentPre to display on completion page
//e.g., price, method used (last n digits of bank account), receipt, etc.
//setup webhook handler to ensure payment
//    -> maybe link this to sending a notification to Lenny's email and phone

})

[gray crown]

Oh. Like in my .env file?

[tired nacelle]

Yes: pk_test_xxx and sk_test_xxx

Not pk_live_xxx

[gray crown]

Omg thank you. So do I change the keys over once the code goes live and is integrated into a website?

[tired nacelle]

You'd change the keys to your live keys once you've finished devleoping your integration, have tested it thoroughly and are ready to start processing real payments yep

[gray crown]

Ok I am remembering why I changed the keys now

I need to integrate BECS direct debit and it will not display for me to test with, unless I use the live keys. Is it best practice for me to completely develop the backend and test fully with cards, then transfer to live and test BECS then?

I want to make sure I do this correctly. Espcially if this integration needs to be maintained/updated by someone else in the future.

[tired nacelle]

No, BECS should work in test mode. Did you enable it in the Dashboard?

[gray crown]

Weird. Yes it is enabled in dashboard

[tired nacelle]

Can you share a pi_xx that you created where you expected to see BECS but didn't?

[gray crown]

A test one? I only have the original that came with the code snippit

[tired nacelle]

Well you said BECS only works in live

That's your API key, not a payment ID pi_xxx

[gray crown]

Oops i miss read your message. pi_3Oh8YtBI44JsoHhS1tfMbEhD

[tired nacelle]

Checking

[gray crown]

Thanks!

[tired nacelle]

BECS is disabled in test mode here: https://dashboard.stripe.com/test/settings/payment_methods?platform_id=pmc_1Oh8hoBI44JsoHhSHZuXrcg9

You have separate settings for test and live mode

[gray crown]

Oh I had no idea but it is sorted now. Thank you so much!

Are there any resources that are a bit more step by step and assume that I know less, which you could point me towards?

[tired nacelle]

Sure: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

End-to-end guide