Pagsmile JavaScript
Updated on 2024.9.19
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
Pagsmile Account: Ensure you have signed up for a Pagsmile account. You will need your
app_id
andpublic_key
provided by Pagsmile.Environment: Access to your website's HTML and JavaScript files for integration.
Step 1: Include Pagsmile Script
Add the Pagsmile JavaScript library to the <head>
section of your HTML file. This script is necessary to initialize and interact with the Pagsmile API.
<head>
<!-- Other head content -->
<script src="https://res.pagsmile.com/lib/js/pagsmile.min.js"></script>
</head>
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, Europe, or North America. 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 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"}
})
<script>
document.addEventListener('DOMContentLoaded', function() {
Pagsmile.setPublishableKey({
app_id: "1649*********8673",
public_key: "Pagsmile_pk_86fc***************************************************",
env: "sandbox", // Change to "production" in live environment
region_code: "BRA", //BRA for Brazil
prepay_id: "cjExNDB5dUZhK1lkLzgzMjhSUkpFdk13YVloaEZ5T09OVG5WdEcxdmNIaz0=-06168a6c",
fields: {
card_name: {
id_selector: "card holder name",
},
card_number: {
id_selector: "card number",
},
expiration_month: {
id_selector: "exp month",
},
expiration_year: {
id_selector: "exp year",
},
cvv: {
id_selector: "card cvv",
},
},
}).then((clientInstance) => {
// successfully initiated
document.getElementById("submit-pay").addEventListener("click", function (e) {
clientInstance
.createOrder()
.then((res) => {
console.log("res: ", res);
// {
// status: "success",
// query: true, // query transaction status through API endpoint /trade/query
// }
})
.catch((err) => {
console.log("Error: ", err);
});
});
})
.catch((err) => {
console.log("Initializing Pagsmile Error: ", err);
});
});
</script>
Step 4: Testing and Deployment
Sandbox Mode: During development and testing, use
env: "sandbox"
. Verify that payments process correctly and error handling works as expected.Production Mode: Before deploying to production, change the
env
setting to"prod"
.
Last updated
Was this helpful?