Iframe: Pop-up payment

The iframe model embeds a third-party payment window within the Shoplazza checkout page.

Sequence diagram steps

1. The customer selects a payment method and clicks to complete payment.
2. The browser sends the payment request to the Shoplazza server.
3. The Shoplazza server forwards the payment request to the payments app server.
4. The payments app server returns a redirect URL to the Shoplazza server.
5. The Shoplazza server sends the redirect URL back to the browser.
6. The browser opens the third-party payment page in an iframe or pop-up container.
7. The customer submits payment details in the payment window.
8. The payments app server calls the Complete Payment API.
9. Shoplazza returns a redirect URL to the payments app server.
10. If payment fails, the customer is redirected to the cancel_url provided in the payment request.
11. If payment succeeds, the customer is redirected to the complete_url returned by Shoplazza.
12. The customer is directed to the order payment result page.
13. The payments app server sends the final payment result notification to the callback URL.
14. Shoplazza acknowledges receipt of the notification with HTTP 200.

Payment request

The iframe payment request uses the same payment session request structure as the sale model. The payments app returns a redirect_url that Shoplazza loads inside the iframe or pop-up payment container.

{
  "redirect_url": "https://payment-gateway.example/iframe"
}

Iframe dimensions

The payments app can customize iframe dimensions:

• Width and height are specified in pixels, without units.
• Minimum width is 300px.
• Minimum height is 200px.
• Maximum width and height must not exceed screen dimensions.
• Values exceeding screen size default to 80vw x 80vh.

Failure response

For failures, return an error code and message.

{
  "code": "ERR-1234",
  "message": "Invalid amount"
}