# Iframe integration process

This section explains how to embed Spotnana as an iframe within your application using OAuth 2.0 token exchange authentication.

## Overview

The integration consists of two parts:

- **Backend:** Your server authenticates with Spotnana on behalf of your users. It sends a user token to Spotnana, and our system returns an access token and a refresh token. These tokens allow the iframe to load an authenticated session for that user.
- **Frontend:** Your application loads the Spotnana iframe and handles a token exchange. When the iframe loads, Spotnana automatically sends your page a message requesting tokens. Your page responds with the tokens your backend obtained from Spotnana. This communication happens through the browser's `postMessage` API, which is the standard way for a parent page and an iframe on different domains to exchange data securely.


### Spotnana URLs

The following are the base URLs to access the Spotnana platform:

| Environment  | API URL  | Embed URL  |
|  --- | --- | --- |
| Sandbox | [https://api-ext-sboxmeta.partners.spotnana.com](https://api-ext-sboxmeta.partners.spotnana.com) | [https://sboxmeta-embed-app.partners.spotnana.com](https://sboxmeta-embed-app.partners.spotnana.com) |
| Production | [https://api.spotnana.com](https://api.spotnana.com) | [https://embed-app.spotnana.com](https://embed-app.spotnana.com) |


### Sequence diagram

The sequence diagram below explains the token exchange flow between Spotnana and your application in an iframe integration:



```mermaid
sequenceDiagram
    participant PF as Your frontend <br>application
    participant PB as Your backend <br>system
    participant SA as Spotnana API

    PF->>PB: 1. Authenticate
    PB->>PB: 2. Generate signed JWT<br>(containing user email signed with private key)
    PB->>SA: 3. POST /v2/auth/oauth-token<br>(with JWT as the subject_token)
    SA->>SA: 4. Validate API credentials
    SA->>SA: 5. Validate JWT signature<br>using your JWKS public key
    SA->>SA: 6. Extract email <br>from the JWT
    SA->>SA: 7. Look up Spotnana user <br>using the email
    SA->>PB: 8. Return access_token and <br>refresh_token
    PB->>PF: 9. Return tokens to render the iframe.
    PF->>PF: 10. Render iframe after </br>successful authentication.
```

## Setup process

The information provided below explain the complete iframe setup process:

1. Backend setup
2. Frontend setup
3. Customize the appearance
4. Card management