emnaturo07-checkout | Stripe Developers | Page 1

sage vale Jan 18, 2022, 5:50 AM

#

Hi there, are you trying to embed a checkout page inside an iframe?

blazing lodge Jan 18, 2022, 5:52 AM

#

i guess a tag

#

actually i'm not using any tag

#

just a normal submit button

sage vale Jan 18, 2022, 5:54 AM

#

can you show me the code?

blazing lodge Jan 18, 2022, 5:56 AM

#

📎 message.txt

#

sorry wait

#

https://pastebin.com/9MwWH1i9

Pastebin

import { Formik, Field, Form } from 'formik';import { useState, use...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

#

please check

#

line number 736

#

and line 80 for handlesubmit function

sage vale Jan 18, 2022, 5:59 AM

#

OK, are you doing a redirect in your backend?

blazing lodge Jan 18, 2022, 5:59 AM

#

yes

#

same as docs, also you can see my screenshot . you will find checkout link

#

    def post(self, request, *args, **kwargs):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        # Provide the exact Price ID (for example, pr_1234) of the product you want to sell
                        'price': 'price_1KG5QhDaN18cbJKsqJcwgiRY',
                        'quantity': 1,
                    },
                ],
                mode='payment',
                success_url=YOUR_DOMAIN + '?success=true',
                cancel_url=YOUR_DOMAIN + '?canceled=true',
            )
        except Exception as e:
            return str(e)

        return redirect(checkout_session.url, code=303)```

sage vale Jan 18, 2022, 6:01 AM

#

the Stripe checkout page (i.e., https://checkout.stripe.com) is a cross-origin to your webpage. Since there is no Access-Control-Allow-Origin header present in the Stripe checkout page, the browser complained about the CORS error.

#

Instead of returning 303 in your backend, return 200 together with the session URL. Process the response in your frontend and use JavaScript window.open(sessionUrl)to open the Checkout page

blazing lodge Jan 18, 2022, 6:03 AM

#

can you tell me the frontend part

#

means where should i add

#

?

#

by the way thanks for the help

sage vale Jan 18, 2022, 6:08 AM

#

          headers: {
              "Authorization": `Token ${token}`
          }
          })
          .then(res => {
//Use the url in the response to open the checkout page
window.open(res.sessionUrl);
//              console.log(res.data)
 //             navigate("/")

          })
          .finally(() => {
              setLoading(false)
          })```

blazing lodge Jan 18, 2022, 6:09 AM

#

thanks

#

hi jack

#

are you sure, response data have sessionUrl variable?

#

because i can't see any link in my console as well as i'm having the same issue.

sage vale Jan 18, 2022, 6:20 AM

#

blazing lodge are you sure, response data have sessionUrl variable?

You need to make changes in your backend, currently your backend is responding 303 redirect, you need to change it to 200 and send the url as the response data, for instance
Return
{
sessionUrl: session.url
}

blazing lodge Jan 18, 2022, 6:21 AM

#

i did make the change to 200

#

    def post(self, request, *args, **kwargs):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        # Provide the exact Price ID (for example, pr_1234) of the product you want to sell
                        'price': 'price_1KG5QhDaN18cbJKsqJcwgiRY',
                        'quantity': 1,
                    },
                ],
                mode='payment',
                success_url=YOUR_DOMAIN + '?success=true',
                cancel_url=YOUR_DOMAIN + '?canceled=true',
            )
        except Exception as e:
            return str(e)

        return redirect(checkout_session.url, code=200)```

#

          headers: {
              "Authorization": `Token ${token}`
          }
      })
          .then(res => {
              window.open(res.sessionUrl);
              console.log(res.sessionUrl)
              navigate("/")

          })
          .finally(() => {
              setLoading(false)
          })```

sage vale Jan 18, 2022, 6:22 AM

#

you are still making a redirect

blazing lodge Jan 18, 2022, 6:22 AM

#

ohhh

#

sorry

#

    def post(self, request, *args, **kwargs):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        # Provide the exact Price ID (for example, pr_1234) of the product you want to sell
                        'price': 'price_1KG5QhDaN18cbJKsqJcwgiRY',
                        'quantity': 1,
                    },
                ],
                mode='payment',
                success_url=YOUR_DOMAIN + '?success=true',
                cancel_url=YOUR_DOMAIN + '?canceled=true',
            )
        except Exception as e:
            return str(e)

        return Response({"sessionUrl":checkout_session.url}, status=200)```

#

Now just my window is popping up but value is undefined

#

undefined

sage vale Jan 18, 2022, 6:33 AM

#

you might need to check the data structure of the response , do a console.log(res) and see what's inside

blazing lodge Jan 18, 2022, 6:33 AM

#

ok

#

Thankyou, so much jack

#

its actaully res.data.sessionurl

#

but i dont want to open a new window. I want my customers to pay and then redirect into the same window

#

do i have to use custom flow?

sage vale Jan 18, 2022, 8:11 AM

#

you can use window.location to stay in the current page https://www.w3schools.com/js/js_window_location.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

blazing lodge Jan 18, 2022, 8:41 AM

#

@sage vale Thankyou

#

can i ask some more questions? if you don't mind? I'm a new developer.

sage vale Jan 18, 2022, 8:42 AM

#

Sure what can I help?

blazing lodge Jan 18, 2022, 8:48 AM

#

So, i have a job portal, where i want to people pay first and then only i want to run my database create method to list the job. So, Do i have to first save the transaction detail in the database and then can i use webhooks to run my create method?

sage vale Jan 18, 2022, 8:55 AM

#

Yup you can do it this way, once you received the checkout.session.completed event, you can then fulfil the order. https://stripe.com/docs/api/events/types#event_types-checkout.session.completed

Stripe API reference – Types of events – curl

Complete reference documentation for the Stripe API. Includes code snippets and examples for our Python, Java, PHP, Node.js, Go, Ruby, and .NET libraries.

blazing lodge Jan 18, 2022, 9:01 AM

#

type and intended are the same thing?

sage vale Jan 18, 2022, 9:01 AM

#

Hi there, my shift is over. My colleague will join this thread soon to continue helping you.

blazing lodge Jan 18, 2022, 9:01 AM

#

Sure

valid flame Jan 18, 2022, 9:11 AM

#

Hi! I'm not sure I understand your last question. Can you clarify?

type and intended are the same thing?

blazing lodge Jan 18, 2022, 9:16 AM

#

sorry typo

#

how to run my database query after the user successfully do the payment?

valid flame Jan 18, 2022, 9:22 AM

#

You should setup a Stripe webhook: https://stripe.com/docs/webhooks
And when you receive the checkout.session.completed event, you run your query.

blazing lodge Jan 18, 2022, 9:23 AM

#

ok, also. is it recommended to save transaction details in the database?

#

[ERROR] Failed to POST: Post "http://localhost:4242/webhook": dial tcp 127.0.0.1:4242: connect: connection refused

valid flame Jan 18, 2022, 9:30 AM

#

ok, also. is it recommended to save transaction details in the database?
What would you like to store exactly?

#

And what exactly are you doing to get this error?

blazing lodge Jan 18, 2022, 9:30 AM

#

valid flame And what exactly are you doing to get this error?

How to know which customer did pay me?

blazing lodge Jan 18, 2022, 9:31 AM

#

valid flame And what exactly are you doing to get this error?

stripe listen --forward-to localhost:4242/webhook

#

2022-01-18 14:54:03            [ERROR] Failed to POST: Post "http://localhost:4242/webhook": dial tcp 127.0.0.1:4242: connect: connection refused

2022-01-18 14:54:29   --> payment_intent.succeeded [evt_3KJDv5DaN18cbJKs0TtgmLVb]
2022-01-18 14:54:29   --> charge.succeeded [evt_3KJDv5DaN18cbJKs0AU2caZS]
2022-01-18 14:54:29   --> customer.created [evt_1KJDvVDaN18cbJKscJrNaTEY]
2022-01-18 14:54:29            [ERROR] Failed to POST: Post "http://localhost:4242/webhook": dial tcp 127.0.0.1:4242: connect: connection refused

2022-01-18 14:54:29            [ERROR] Failed to POST: Post "http://localhost:4242/webhook": dial tcp 127.0.0.1:4242: connect: connection refused

2022-01-18 14:54:29   --> checkout.session.completed [evt_1KJDvVDaN18cbJKs1uQCWtBX]
2022-01-18 14:54:29            [ERROR] Failed to POST: Post "http://localhost:4242/webhook": dial tcp 127.0.0.1:4242: connect: connection refused```

valid flame Jan 18, 2022, 9:34 AM

#

stripe listen --forward-to localhost:4242/webhook
Do you have a server running at the url "localhost:4242/webhook"? And did you write some code to handle webhook events and return a 200 reponse?

blazing lodge Jan 18, 2022, 9:35 AM

#

    def my_webhook_view(request):
        payload = request.body

        # For now, you only need to print out the webhook payload so you can see
        # the structure.
        print(payload)

        return HttpResponse(status=200)```

#

for my webhook

#

I think for now i'm good

#

just want to understand do i have to save details if i want to track paid users?

#emnaturo07-checkout