# Integration Steps

## Adding PayPangea SDK

First, include the PayPangea SDK in your HTML file's `<head>` section. This is crucial for accessing the PayPangea functions in your application.

```html
<script src="https://sdk.paypangea.com/sdk.js?ver=4"></script>
```

## **Environment Setup**

Decide whether you will be testing your integration in a development environment or deploying it directly to production. PayPangea supports both environments, allowing you to test your integration thoroughly before going live.

#### Evironments

| Value      | Descripton                         |
| ---------- | ---------------------------------- |
| STAGING    | `Staging environment of PayPangea` |
| PRODUCTION | `Live environment of PayPangea`    |

## Initializing PayPangea

Once the SDK is loaded, you can initialize PayPangea in your JavaScript code. This step involves creating a new `PayPangea` instance with your API key and specifying the environment.

```javascript
let payPangeaWidget;

document.addEventListener('DOMContentLoaded', function () {
    payPangeaWidget = new PayPangea({
        apiKey: 'YOUR_API_KEY_HERE',
        environment: 'ENVIRONMENT',
    });
});
```

Replace `'YOUR_API_KEY_HERE'` with your actual PayPangea API key.

Replace `'ENVIRONMENT'` with the environment you want to target.

## **Server Configuration**

If you plan to use webhooks or process transactions server-side, ensure your server is configured to receive HTTPS POST requests. This is crucial for handling callbacks and transaction notifications securely.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paypangea.com/login-with-paypangea/sdk-integration/integration-steps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
