> For the complete documentation index, see [llms.txt](https://docs.pagsmile.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pagsmile.com/reference/payin/submit-a-payin/brazil/creditcardpreauth/pagsmile-javascript.md).
# 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](/reference/payin/submit-a-payin/brazil/creditcard.md), [Europe](/reference/payin/submit-a-payin/europe/creditcard.md), or [North America](/reference/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.
```
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"`.