Web SDK - FAQs

What is Web SDK?

Web SDK is a JavaScript library designed to seamlessly integrate secure payment functionalities into a merchant web page or application. It is provided by payabl. for merchants to handle full payment process, including 3-D Secure. The SDK supports customization and is SAQ-A compliant.

How do I initialize the Web SDK?

To initialize the Web SDK, you need to:

1. Send an initialization request get_payment_widget_session from your server
2. Capture the session_id from the response
3. Use the session_id in the initialize method of the JavaScript payabl. object

What are the required parameters for the initialization request?

The initialization request must include at least mandatory fields from Payment Data (e.g., amount, currency, order ID, etc.) and Customer Data (e.g., email, customer IP).

How do I integrate the Web SDK into my HTML form?

1. Reference the Web SDK library in your HTML form:

<script type="text/javascript" src="https://pay4.sandbox.payabl.com/hpp/js/payabl_sdk.js"></script>

2. Add an HTML placeholder for the widget:

<div id="creditcard-placeholder"></div>

3. Instantiate the Payabl object in your JavaScript code:

Payabl.initialize({
    sessionId: 'your_session_id',
    env: 'sandbox',
    widgetMode: 'modal',
    modalPayButtonText: 'Pay $1.23',
    callback: callbackNotification,
});

4. Render the widget:

Payabl.create()

Payabl.create(document.getElementById('creditcard-placeholder'));

Can I customize the appearance of the Web SDK?

Yes, you can customize the appearance using the Payabl.setStyle() method in your JavaScript code. This method allows you to apply custom CSS styles to various elements of the payment widget. Here is an example of how you can customize the appearance:

let styles = `
    #cvc_code_wrapper { background-color: GhostWhite; }
    #ccn_wrapper { background-color: GhostWhite; }
    #exp_month_year_wrapper { background-color: Azure; }
    .pc21-pay-button { background-color: #FFA822; color: black; }
`;
Payabl.setStyle(styles);

In this example, the background color of the CVC code, credit card number, and expiration date fields are customized, as well as the appearance of the payment button. You can modify these styles to match your website's design and branding. For more detailed information on customization options, you can refer to the Web SDK Customization Guide.

How do I handle the payment result?

After the payment is completed, the Web SDK will post the result to a JavaScript callback provided by the merchant. Use this callback to display a success or failure message to the customer. Additionally, a notification will be sent to the notification_url provided in the server-to-server request.

Can I use real data in the Sandbox environment?

No, only testing credentials are allowed in the Sandbox mode. Do not use real customer details or credit card data. For using the testing credential, refer to our dedicated API section: Testing Credentials for Credit Cards

How does the Sandbox Environment differ from the Live mode?

The Sandbox environment is kept up to date in full accordance with the Live mode and API documentation. However, real bank details and business/risk settings are not supported in the Sandbox Environment.

How do I enable Apple Pay or Google Pay in Web SDK for my Web Page / Web Application?

Please refer to our guide to enable Apple Pay and / or G-Pay (Google Pay) in Web SDK.

How do I switch from 'sandbox' to 'live' for the Web SDK (go to production)?

To switch from the 'sandbox' environment to 'live', you first need to be onboarded and have live merchant credentials ready to use. Follow these steps:

1. Update the Payabl.initialize configuration in your JavaScript code (change env: 'sandbox' to env: 'live'
   JavaScript

   Payabl.initialize({
       sessionId: 'YOUR_SESSION_ID',
       env: 'live',
          // other parameters...
   });
   

2. Change the Web SDK URL to the production URL:
   HTML

   <script src="https://pay4.payabl.com/hpp/js/sdk/latest/payabl_sdk.js"></script>
   

📘

Important

Please note that once you switch to the live environment, you will not be able to perform test transactions. Test transactions are only possible in the sandbox environment.