Iframe: Pop-up Payment

This model embeds a third-party payment window within the Shoplazza checkout page using an iframe.

Sequence Diagram

Sequence Diagram Steps:

1. The customer selects a payment method and clicks to complete the 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 redirects the customer to the payment gateway page.
7. The customer submits payment details on the payment gateway page.
8. The payments app server initiates a payment completion callback to the Shoplazza server.
   1. For more information about Complete payment callback API, please view Complete payment callback API.
9. The Shoplazza server returns a redirect URL to the payments app server.
10. If the payment fails, the customer is redirected to the cancel_url provided in the payment request.
11. If the payment is successful, the customer is redirected to the complete_url returned by the Shoplazza server.
12. The customer is directed to the order payment result page based on the payment outcome.
13. The payments app server sends a final payment result notification to the specified callback URL.
    1. For more information about Notify Payment API, please view Notify Payment API.
14. The Shoplazza server acknowledges receipt of the notification with an HTTP 200 response.

📘

step 11 &12 Jump Payment Response

Success: Return a redirect URL for the payment gateway.

• Shoplazza returns 301 Retargeting, with Location as redirect_url in the header. The customer will be redirected to the payment page of the app to complete the payment.

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

Failure: Return an error code and message.

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

Key Differences from Sale Model:

The payments app can customize the iframe dimensions:

• • Width and Height: Specified in pixels (no units required).
  • Minimum Dimensions: 300px (width) × 200px (height).
  • Maximum Dimensions: Must not exceed the screen size. If exceeded, Shoplazza defaults to 80vw × 80vh for the iframe container.