# Pagsmile JavaScript
## Pagsmile Payment Gateway Integration Guide
This guide provides step-by-step instructions for integrating Pagsmile into your website for seamless payment processing. Pagsmile offers robust features and security measures to ensure smooth transactions for your customers.
### Prerequisites
1. **Pagsmile Account**: Ensure you have signed up for a Pagsmile account. You will need your `app_id` and `public_key` provided by Pagsmile.
2. **Environment**: Access to your website's HTML and JavaScript files for integration.
### Step 1: Include Pagsmile Script
Add the Pagsmile JavaScript library to the `` section of your HTML file. This script is necessary to initialize and interact with the Pagsmile API.
```HTML
```
### Step 2: Initialize Pagsmile
After the page loads and the Pagsmile script has loaded, initialize Pagsmile with your credentials (`app_id` and `public_key`) other mandatory parameters. This step prepares Pagsmile for handling payment transactions securely.
### Step 3: Handle Payment Form Submission
Use createOrder method of returned clientinstance and initialize payment upon user submission. Check [Brazil](/payin/submit-a-payin/brazil/creditcard.md), [Europe](/payin/submit-a-payin/europe/creditcard.md), or [North America](/payin/submit-a-payin/north-america/creditcard.md). Once you get status: "success" query transaction status with help of related backend endpoints.
#### *setPublishableKey* Optional Parameters
**pre\_auth**: `boolean` (required) Set to `true` to enable pre-authorization for payments.
**form\_id**: `string` (conditional) The ID of the form element to be used for payment processing.
#### *createOrder* Optional Parameters
**installments**: `object` (optional) parameter should be provided if there is installment information is returned by [Installment Detail Query](https://docs.pagsmile.com/payin/tools/installment-detail-query) endpoint.
**address**: `Object` (optional) An optional address object that specifies the country associated with the payment.
* **country\_code**: `string` (optional) A 3-letter ISO country code that specifies the country associated with the payment (e.g., `"SWE"` for Sweden). If not provided, this field will be omitted.
```Plain
createOrder({
installments: { stage: 3 }, //stage support 1 ~ 12
address: { country_code: "SWE"}
})
```
```HTML
```
### Step 4: Testing and Deployment
1. **Sandbox Mode**: During development and testing, use `env: "sandbox"`. Verify that payments process correctly and error handling works as expected.
2. **Production Mode**: Before deploying to production, change the `env` setting to `"prod"`.
---
# 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.pagsmile.com/payin/submit-a-payin/brazil/creditcardpreauth/pagsmile-javascript.md?ask=
```
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.