Overview

The Web SDK allows merchants to integrate various payment methods, including Apple Pay and G-Pay, into their payment pages. This guide provides step-by-step instructions on how to enable and use these payment methods within the Web SDK.

Prerequisites

Before integrating Apple Pay and G-Pay, ensure your merchant ID registered with payabl. is configured (enabled) to accept payments using these payment methods. Note, that currently Apple Pay for Windows OS and other non-Apple devices is not supported but will be available soon.

PaymentMethods Parameter

The paymentMethods parameter specifies the payment method(s) to be used in a particular payment session within the Web SDK. This parameter supports both single and multiple values.

Parameter Values:

• 1: Credit Card
• 119: Apple Pay
• 121: Google Pay

Examples:

• Single Value:
  JavaScript

  paymentMethods: [119]
  

• Multiple Values:
  JavaScript

  paymentMethods: [1, 119, 121]
  

Integration Steps

1. Contact Technical Support: Ensure that Apple Pay or Google Pay are configured (enabled) for your merchant account (merchant ID). You can arrange this setup through our Technical Support Team.
2. Follow the Steps to Integrate With the Web SDK: described on our Integration Steps Page
   1. While in Step 4: Initialize the Web SDK: on the Step 4: Initiate payabl. API specify the parameter paymentMethods and its value:
      JavaScript

      Payabl.initialize({
          sessionId: '1150172f665563bff0d018f30b9afd41e3f43f47', // REQUIRED. Received during server-side authentication
          env: 'live', // REQUIRED. If omitted, production is used
          widgetMode: "inline",   // OPTIONAL. VALUES: inline | modal  - DEFAULT: inline
          modalPayButtonText: "Pay $1.23", // OPTIONAL. VALUES: defined text by merchant - DEFAULT: "Pay"
          // secure3dMode: "window", // OPTIONAL. VALUES: window | modal  - DEFAULT: modal
          callback: callbackNotification,
          // validationCallback: validationCallback,
          paymentMethods: [1, 119, 121] // Including Credit Card, Apple Pay, and Google Pay
      });
      

3. Complete the Rest of Integration Steps:
   1. Step 5: Design Customization (optional)
   2. Step 6: Rendering the Widget
   3. Step 7: Submitting the Payment

📘

Note

• It is crucial that Apple Pay and / or G-Pay are preliminary enabled for the used merchant ID
• Mak sure to handle payment sessions appropriately by following the session ID retrieval process outlined in the Get Session ID Guide. Note that the session ID is valid for 15 minutes after it is created.
• If you encounter any issues or need further assistance, please refer to our detailed FAQ for Web SDK Integration or contact our Technical Support Team at [email protected], Monday to Friday, 9:00-17:00 CET/CEST