# 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: HTML Form Structure
Below is the basic HTML code to create the credit card input fields.
```html
```
### Step 2: 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 3: 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 4: Handle Payment Form Submission
Use createOrder method of returned clientinstance and initialize payment upon user submission. Check [Brazil](https://docs.pagsmile.com/payin/submit-a-payin/brazil/creditcard), [Mexico](https://docs.pagsmile.com/payin/submit-a-payin/mexico/creditcard), [Peru](https://docs.pagsmile.com/payin/submit-a-payin/peru/creditcard), [Ecuador](https://docs.pagsmile.com/payin/submit-a-payin/ecuador/creditcard), [Egypt](https://docs.pagsmile.com/payin/submit-a-payin/egypt/creditcard), [Saudi Arabia](https://docs.pagsmile.com/payin/submit-a-payin/saudi-arabia/creditcard), [Kuwait](https://docs.pagsmile.com/payin/submit-a-payin/kuwait/creditcard), [Qatar](https://docs.pagsmile.com/payin/submit-a-payin/qatar/creditcard), [Nigeria](https://docs.pagsmile.com/payin/submit-a-payin/nigeria/debitcard), [Europe](https://docs.pagsmile.com/payin/submit-a-payin/europe/creditcard), or [North America](https://docs.pagsmile.com/payin/submit-a-payin/north-america/creditcard). Once you get status: "success" query transaction status with help of related backend endpoints.
#### *setPublishableKey* Optional Parameters
**pre\_auth**: `boolean` (optional) Whether pre-authorization is enabled. When set to `true`, pre-authorization is enabled for payments. Defaults to `false`.**form\_id**: `string` (conditional, required for Mexico) The ID of the form element to be used for payment processing. This parameter is required for transactions in Mexico.
**form\_id**: `string` (conditional, required for Mexico) The ID of the form element to be used for payment processing. This parameter is required for transactions in Mexico.
#### *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.
**phone:** `string` (optional) Mobile phone number
**email:** `string` (optional) Personal email address
**postal\_code:** `string` (optional) Postal code of residential address
**payer\_id:** `string` (optional) Personal identification number (CPF for Brazil)
**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 },
address: { country_code: "SWE"},
phone: "5575991435892",
email: "test@gmail.com",
postal_code: "12345678",
payer_id: "12345678900",
})
```
```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"`.