Brand Pay Implementation Inquiry
Hi,
We are a foreign business trying to make a shop in Korea. Google Translate did not seem to work in correctly translating the steps to the implementation. We are confused about the part of applying a redirect URI.
We have the widget visible on our site (melotomorrow.com) but after inputting the card information, the widget spits out: "Uncaught (in promise) Error: The redirect URL is not registered. Please register on the development information page."
We can speak a little Korean but not to the extent of following the guide. Thank you for your assistance.
65 Replies
Good morning @멜로투모로, thank you for reach us.
Unfortunately, our english documentation is quite limited, so we agree that you can get confusing at some point.
You mentioned that Redirect URI setting part is confusing now, can you share little bit more about where you confusing now?
Just to explain what we understand, redirectUrl must first be registered in our admin page. Otherwise you will get the same error as you got before.
Thank you for using Toss Payments' service!
Thank you so much for the reply! We understand that we have to register the redirectURL on our admin page. We don't understand what the redirect URL is and how to implement it in our code. On a side note, our company does not have a login function, so items are all purchased without logging in.
Just for note, Brandpay is not suitable for websites that do not use a login process.
So you may need to use different product of Tosspayments such as paymentWindow or paymentWidget.
Redirecturl is needed for this process.
When the customer clicks the payment button on the website, they will be redirected to the Tosspayments website. After authorization is processed on the Tosspayments website, it will be redirected to you again for confirmation, DB logic, and other processing. At this time, you will need a Redirect URI that must be registered on the admin page.
This is similar to how Oauth2.0 works.
HI, we really need to start selling by the 31st. If we apply for paymentWindow or paymentWidget, would we be able to access the functions by then? Again, thank you so much for your assistance
Also, with this brand pay, do we need to make our own authorization? We tried setting the redirect URI to https://google.com just to test it out, and it spit out this:
Google
Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
Let me explain which endpoint is needed.
1. Callback URL(Authorization Endpoint, as known as RedirectUrl)
When a customer registers a payment method in the payment UI and agrees to the terms and conditions,
they are redirected to the redirect URL registered in the developer center. Learn more
When it redirects to callback URL, a temporary authentication code and customerKey are returned, as follows:
https://{CALLBACK_URL}/?code={CODE}&customerKey={CUSTOMER_KEY}
code: Authorization Code (temporary authentication code) required to issue an Access Token. It expires in 5 minutes.
customerKey: The customer's unique ID created by your store (as known as user ID).
As soon as you got authorization code and customerKey, you need to call our token endpoint (https://api.tosspayments.com/v1/brandpay/authorizations/access-token) which defined on OAuth 2.0 RFC rule. Learn more
e.g.)
After your shop's server calls our token endpoint, you will get Access Token and Refresh Token as follows:
The SDK now automatically checks and uses the paying customer's Access Token.
2. Success URL(Success Confirm Endpoint)
If the Access Token is successfully issued and the payment request is successful, it moves to the successUrl set as a parameter of requestPayment(). There are four query parameters after successUrl. The first parameter is paymentType. Since it is a Brand Pay payment, it returns to BRANDPAY.
e.g.) https://{SUCCESS_URL}/?paymentType=BRANDPAY&paymentKey={PAYMENT_KEY}&orderId={ORDER_ID}&amount={AMOUNT}
* paymentType: Payment type. Brand Pay payments are always BRANDPAY.
* paymentKey: The key value of the payment. This is a unique value that identifies the payment. Payment data must be saved for management purposes. The value is maintained even if the payment status changes. Used for payment authorization.
* orderId: Order ID. It serves to identify the ordered payment. It is a value created by the affiliated store and sent in requestPayment() when requesting payment. Payment data must be saved for management purposes. Must issue unique, non-duplicate values. The value is maintained even if the payment status changes.
* amount: The amount actually paid.
When it redirects to success URL and paymentType is BRANDPAY, call BrandPay confirm endpoint (https://api.tosspayments.com/v1/brandpay/payments/confirm). Learn more
e.g.)
When the Confirm Endpoint is successfully called, payment is completed. All you have to do is show the payment completion page to the user.If you decide to use paymentWindow or paymentWidget instead, you will need to make a contract again and change some code, so I don't think it will be able to start selling by the 31st. However, I suggest you use paymentWindow/Widget instead, as your business is unsuitable with brandpay.
(Brand Pay is a service that provides SDK and API that allows stores to implement their own simple payments. If a buyer registers their card or account information once, they can easily make payments from then on. This means that your shopping mall must have the user's information on a permanent basis - a login process will be required.)
For paymentWindow and Widget, English documentation is available. You can check out here: https://docs.tosspayments.com/en/integration-widget and https://docs.tosspayments.com/en/integration.
for right now, is it ok to store the access token and regresh token in cookies? sounds like security risk we don't have time to implment full auth
or should we just apply for the paymentWindow?
You're using BrandPay SDK or PaymentWidget with BrandPay?
Please check which js script are you including now. If your project uses React/Vue/etc, please check your package.json.
payment widget with brand pay
i’m using nextjs
Then you don't need to store the access token and refresh token at all. (paymentWidget SDK will automatically gets/stores access_token in secured way)
And if you want, you can simply change to regular payment product because you already using paymentWidget.
GitHub
GitHub - tosspayments/payment-widget-sample: 토스페이먼츠 결제위젯 샘플 앱입니다.
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
i’m following the nextjs example from this repo
is this what you mean?
i don’t know why we are getting the error
This sample is for regular payment, not brandpay.
you need to implement more to use brandpay which is I mentioned above.
ok does it use the same widget though?
is there a js example for the brand pay?
No, not yet for PaymentWidget. You will need to read documentation and implement it.
If you having trouble with understanding, please let me know, we will help you 🙂
thank you
what is the usage for this npm package?
npm
@tosspayments/brandpay-sdk
TossPayments.js Brand Pay SDK. Latest version: 1.5.2, last published: 2 months ago. Start using @tosspayments/brandpay-sdk in your project by running
npm i @tosspayments/brandpay-sdk. There is 1 other project in the npm registry using @tosspayments/brandpay-sdk.how can i initialize the brandpay
we are still getting a 403 error
I set up an api rout and added it to the developer center
"Failed to load resource: the server responded with a status of 403"
This library is for who aren't using PaymentWidget for Brandpay. If you want, you can use, but you need to re-implementing some lines of code.
Please screenshot/copy from Devtools -> Network -> Response
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
hi sorry
what is the best way to go about implmeneting it then
Do you still want to use Brandpay? Do you have any contracts for Brandpay? Then, it is up to you.
If you don't have contracts for Brandpay but you want to use Tosspayments, use Regular PaymentWidget and make contract.
we are still using brandpay
oh no, you are mixing with different SDK. That's why you got the error.
the weird thing is its working
just payment is not getting taken
like it gets all the way to the end
i don't know what sdk to use
there are too many sdks
Yes, because it is a completely different SDK.
So let's clarify.
yes please
we don't get any toss related errors till the end
everything payment related goes through
first we should understand what sdk we have to use
we are using brandpay
and i would prefer to use the widget because i don't want to implment it fully myself
i don't have the time for that right now
Yes, just give me a sec.
thhank you for your help
* Does your shop have a login process?
* If so, Do you know what Brandpay is?
* Do you still want to use Brandpay?
* Use PaymentWidget SDK to implement Brandpay (this is a new SDK)
* If not, Do you want to make a normal transaction?
* Use PaymentWidget SDK for regular transaction
In both choice, you have to use @tosspayments/payment-widget-sdk.
ok
we want the second option
we don't have a login
ok
we only have access to brand pay at this moment, so how can i ensure we are using the payment-widget-sdk with brandpay?
Once you integrate with PaymentWidget first,
you can access our admin page(dashboard.tosspayments.com)
In admin page, you can access payment UI Setup - You can setup your brandpay integration on there
so is it safe to follow this nextjs example. because previously you said it wasn't https://github.com/tosspayments/payment-widget-sample/tree/main/nextjs
GitHub
payment-widget-sample/nextjs at main · tosspayments/payment-widget-...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
Yes if you want to drop Brandpay support, please use this sample.
but i believe we only have access to brandpay
we don't have the other
Do you have a brandpay contract?
yes
Ah, can I see your merchant ID?
It will starts with cp_....
cp_melrotzjti
^
Ok, thanks. I got it.
Ah... then You may need to make login process
crap
This means you should have a user identifier; it should be unique and shouldn't be changed for one customer; It means you have to make login process or identify verification process.
we are not in the best spot to be implmenting full auth right now
should we apply for the other one?
For contracts, to be honest, we don't know; it is entirely up to you.
I am sorry for saying this, because you don't have a time for open your service, but you need to ask our contract team to clarify.
thats ok we can push the date
but we still have to solve this asap
what would you recomend?
full auth?
i can do it it will just be a pain
I think you need to choose the correct product that is suitable for your business. I think Brandpay is not a good idea for you, but I am not a sales team, so I cannot give you a sure answer.
the way i solved the "user identifier" problem was i just assigned a new random id and store it in the cookies of the site
No, it should be stores on your DB.
ok
its probably best for us to just apply to the other
thank you for the help
Not exactly, I suggest you to email or call our sales team.
It's okay we applied for the other one
thank you for your help
Because the user identifier is used for getting pre-registered Card, Bank Accounts, and User Personal Data, it shouldn't be changed, so the cookie is too dangerous.
that makes sense
Cool, just for note, if you need to talk with the sales team:
enterprise-sales@tosspayments.com OR +82-02-1544-7772 (Calls Korean Only)
If you need to talk with the contract team:
contract@tosspayments.com OR +82-02-1544-7772 (Calls Korean Only)
토스페이먼츠 결제연동팀
Because this channel is tech team only, so to be honest, we are limited for answer your problem.
We apologize for confusing you with the product and SDK; I promise it will be improved later.
If you applied for regular payment, you can use this sample:
https://github.com/tosspayments/payment-widget-sample
Docs: https://docs.tosspayments.com/en/index