Integrating Webpay Plus into a modern stack

If you've ever worked on an e-commerce project in Chile, sooner or later you bump into Transbank. There's no avoiding it. I built a reference template that use NestJS on the backend and Next.js 16 on the frontend, and in this post I want to walk you through the whole thing: what Webpay Plus actually is, why the integration looks the way it does, and how each piece fits together. Github Repository Reference: Link A bit of context Webpay Plus is one of the most important online payment methods in Chile. The user experience is straightforward: your customer enters an amount on your site, gets redirected to Transbank's branded payment page, fills in their card details there, and comes back to your site with a result. From a UX perspective it's not as slick as Stripe Elements or a fully embedded checkout — the user always sees Transbank's domain in the address bar during the payment — but from a developer's perspective that's actually a feature. You never touch card numbers. PCI scope stays minimal. Transbank handles 3D Secure, fraud rules, and bank routing. The trade-off is that the integration model is what you might politely call classical . It's built around full-page redirects and form POSTs, not modern APIs with JSON responses and webhooks. That's important to understand up front, because it shapes every decision you'll make in the code. The integration flow, step by step Before looking at any code, it helps to have a clear mental model of what's happening . There are three distinct moments where your system talks to Transbank's system, and each one has a specific shape. First Step: When the customer clicks "Pay", the backend asks Transbank to create a transaction (amount, order ID, return URL) . Transbank returns a transaction token and a redirect URL where you must send the user. Second Step: Transbank requires the redirect to be an HTTP POST with the token in a token_ws form field, so you must generate an HTML form with a hidden token_ws input and submit it prog