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 and public_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".

PreviousVoid NextPix

Last updated 1 year ago

Was this helpful?