The ExpressCheckout component lets you embed an express checkout for digital wallets inside your website or application. Currently, only Apple Pay is supported.

Usage

This component lets you add a robust low-code way to accept payments from a digital wallet to your pages or apps.

See Library URLs for important information about embedded components library URLs.

Step 1: Include the Payabli component

Add the script to the <body> element of your HTML.

Sandbox
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
    <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
</body>
</html>

You need to include <meta charset="UTF-8"> in the <head> element of your HTML to prevent problems with special characters such as ‘á’ or ‘ñ’.

Step 2: Define the component container

Add the container to your HTML. This <div> tag is where the page renders the component. The ID is the identifier for rootContainer in your component configuration.

Sandbox
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
    <div id="pay-component-2"></div>
    <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test></script>
</body>
</html>

Step 3: Configure the component

Define the component configuration in a script block immediately after component.js and create an instance of the component. See the Configuration section for a full reference of options.

Full configuration example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="express-checkout-component"></div>
  <script type="text/javascript" src="https://embedded-component-sandbox.payabli.com/component.js">
    //Use the correct version for your environment
  </script>
  <script>
    var token = ""; // Input your Public Organization API Token here:
    var entryPoint = ""; // Input your paypoint entryName here:
    var expressCheckoutConfig = {
      token: token,
      type: "expressCheckout",
      entryPoint: entryPoint,
      rootContainer: "express-checkout-component",
      //customCssUrl: "your url to a custom css file",
      expressCheckout: {
        amount: 100,
        fee: 0.01,
        currency: "USD",
        supportedNetworks: ["visa"],
        columns: 1,
        applePay: {
          enabled: true,
          buttonStyle: "black-outline",
          buttonType: "plain",
          language: "en-US",
        },
        requiredShippingContactFields: true,
        appearance: {
          buttonHeight: 50, // optional
          buttonBorderRadius: 10, // optional
          padding: {
            x: 10, // optional
            y: 10, // optional
          },
        },
      },
      customerData: {
        customerNumber: "00001",
        firstName: "John",
        lastName: "Doe",
        billingEmail: "johndoe@email.com"
      },
      functionCallBackReady: function(data) {
        console.log('Apple Pay ready: ', data)
      },
      functionCallBackSuccess: function(data) {
        console.log('Apple Pay Success: ', data)
      },
      functionCallBackError: function(data) {
        console.log('Apple Pay Error: ', data)
      },
      functionCallBackCancel: function(data) {
        console.log('Apple Pay Cancel: ', data)
      },
    }
    new PayabliComponent(payabliConfig0);
  </script>
</body>
</html>

Step 4: Style the component

Information about styling embedded components is available in Embedded Components Overview.

Configuration reference

These are the configuration parameters available for the ExpressCheckout component.

The component accepts only the data below. If you need to pass more data than what’s supported, consider using the temporary token flow.

type
string
required

Accepted values are: methodEmbedded, methodLightbox, vterminal, or expressCheckout.

Use expressCheckout for digital wallet acceptance.

rootContainer
string
required

Container ID used for the component.

token
string
required

API token for authentication. This should be a public API token, as described here.

entryPoint
string
required

When the API token belongs to an organization, the entrypoint name identifies the target paypoint (merchant).

customCssUrl
string

Complete URL of a custom CSS stylesheet to use with the component.

expressCheckout
object
required

Configuration for the express checkout functionality.

customerData
object
required
functionCallBackReady
function

Triggered when the ExpressCheckout component is ready to use.

functionCallBackSuccess
function

Triggered upon successful completion of a digital wallet transaction.

functionCallBackError
function

Triggered if an error occurs during the digital wallet transaction.

functionCallBackCancel
function

Triggered if the user cancels the digital wallet transaction.

Response examples

functionCallbackReady response

This response is triggered when the component is ready to use.

  {
    applePay: true,
    googlePay: false
  }
applePay
boolean

When true, the component is ready to accept Apple Pay.

googlePay
boolean

Not in use yet.

functionCallbackSuccess response

When a transaction is successfully completed via the ExpressCheckout component, the functionCallBackSuccess response is triggered.

In the response, the referenceId is the transaction ID you can use for other operations.

{
    "data": {
        "isSuccess": true,
        "pageIdentifier": "t.XMzKRgtV6eJrI2Fsn45RLKuRujHi53qDnsizyJXNM7ChdejoRNOdb0Dm7VXQ3H/aBVMu+14IB9sOS1hbZF/kXMKgUY94nspVI+mRSphe8HeSwbr5OxLUSmu0Uuc6RmDzaLUYXn8eDr…",
        "responseData": {
            "authCode": "",
            "avsResponseText": null,
            "billingContact": {
                "addressLines": [
                    "9425 SW 172nd Pl"
                ],
                "administrativeArea": "FL",
                "country": "United States",
                "countryCode": "US",
                "familyName": "Martinez",
                "givenName": "Fernando",
                "locality": "Miami",
                "phoneticFamilyName": "",
                "phoneticGivenName": "",
                "postalCode": "33197",
                "subAdministrativeArea": "",
                "subLocality": ""
            },
            "customerId": 6886,
            "cvvResponseText": null,
            "methodReferenceId": null,
            "referenceId": "1148-2305e2cb80eb5969920f2cf9f2565455",
            "resultCode": 1,
            "resultText": "Approved",
            "shippingContact": {
                "addressLines": [
                    "9425 SW 172nd Pl"
                ],
                "administrativeArea": "FL",
                "country": "United States",
                "countryCode": "US",
                "emailAddress": "fernandotest@payabli.com",
                "familyName": "Martinez",
                "givenName": "Fernando",
                "locality": "Miami",
                "phoneNumber": "4089752020",
                "phoneticFamilyName": "4192412942195",
                "phoneticGivenName": "941924129412943",
                "postalCode": "33197",
                "subAdministrativeArea": "",
                "subLocality": ""
            }
        },
        "responseText": "Success"
    },
    "paymentMethod": "apple_pay"
}
responseText
string

“Success” or “Declined”

responseData
object

Container for response details.

isSuccess
boolean

Boolean indicating whether the operation was successful. A true value indicates success. A false value indicates failure.

pageIdentifier
string

Auxiliary validation used by Payabli in payment pages and components.

paymentMethod
string

The payment method used. Possible values include “apple_pay”, “google_pay”, etc.

functionCallBackError response

This response is triggered if an error occurs during the transaction.

{
  "paymentMethod": "apple_pay", // apple_pay, google_pay etc
  "error": {
    "isSuccess": false
    "pageIdentifier": null,
    "responseCode": 5005,
    "responseData": {
      "explanation": string,
      "todoAction": string
    },
    "responseText": string,
    roomId: null
  }
}
paymentMethod
string

The payment method used. Possible values include “apple_pay”, “google_pay”, etc.

error
object

Container for error details when an error occurs.

functionCallBackCancel response

This response is triggered when the user cancels the transaction while the modal is shown.

{
  data: {
    isTrusted: true
  },
  paymentMethod: "apple_pay"
}
data
object

Container for response data.

paymentMethod
string

The digital wallet method used. Currently, only apple_pay is supported.

Combine components

If you want to accept digital wallet payments along with card or ACH payments, you can load both the EmbeddedMethod UI and ExpressCheckout UI components on the same page. You can also use updateConfig to switch between component configurations on your page.

The code example renders the components in this image:

ExpressCheckout, ACH, and Card example
<body>
    <div>
        <div id="embeddedComponentStyle">
            <h4>Pay your order</h4>
            <div id='containerExpressCheckout' class="hidden">
                <div id='express-checkout-component'></div>
                <div style='display: flex; gap: 0.5rem; align-items:center' class="my-2">
                    <hr style='height:1px;width:35%' />
                    <small style='width:100%; text-align: center'>or pay with card or bank account</small>
                    <hr style='height:1px;width:35%' />
                </div>

            </div>
            <div class="tabs">
                <ul class="nav nav-tabs" id="tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="card-tab" data-bs-toggle="tab"
                            data-bs-target="#pay-component-card-cont" role="tab" aria-controls="pay-component-card-cont"
                            aria-selected="true">Payment Card</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="bank-tab" data-bs-toggle="tab" data-bs-target="#pay-component-ach-cont"
                            role="tab" aria-controls="pay-component-ach-cont" aria-selected="false">Bank Debit</a>
                    </li>
                </ul>
            </div>
            <div class="payment-form tab-content">
                <div class="tab-pane fade show active" id="pay-component-card-cont" role="tabpanel"
                    aria-labelledby="pay-component-card-cont">
                    <div id="pay-component-card">

                    </div>
                    <button id="btn-pay" class="mt-20">
                        <img
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAPxJREFUSEvtldGNwjAMhr9/AnQTAJNwbMAG9CZATAC3ARvABjACN8mVDW4DI6Mg9VqStEWVeMAvjSrb3x8ndsTApoHz0wpgZgtgBXwGQWfgW5J/k5YFmNkBWEayOGSbIiQBQfkxJFgDp7AugE1Yz1M7yQG8BDNgLWlXVWpmrtwhP5LupWtsJgewEPEh6a8GmAC//k9SNE8rQCyBmd0EDAbI3aAbPOXURmEO0gCYmR/YHvAad7ES+KrfqEcAdxx3yVzxLSVNq7GPAPeb04tRP/A3oNm5taZ7l+g1S+RTc9SrCeAi6d8EiI0Kf8W6dvMFKLKjoqfyaFj2TX4WeAX0MmsZ8nx06AAAAABJRU5ErkJggg==" />
                        Save Payment
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://embedded-component-sandbox.payabli.com/component.js" data-test>>"></script>

    <script>
        var token =
            "<API TOKEN";
        var entryPoint = "7f1a381696";
        var customCssUrl = "https://embedded-component-sandbox.payabli.com/customForm.css";
        var payabliConfigCard = { // The config for the EmbeddedMethodUI component that accepts ACH
            type: "methodEmbedded",
            rootContainer: "pay-component-card",
            defaultOpen: "card",
            token: token,
            customCssUrl: customCssUrl,
            entryPoint: entryPoint,
            card: {
                enabled: true,
                amex: false,
                discover: true,
                visa: true,
                mastercard: true,
                inputs: {
                    //here we are customizing the input fields
                    cardHolderName: {
                        label: "NAME ON CARD",
                        placeholder: "",
                        floating: false,
                        value: "John Doe",
                        size: 12,
                        row: 0,
                        order: 0
                    },
                    cardNumber: {
                        label: "CARD NUMBER",
                        placeholder: "1234 1234 1234 1234",
                        floating: false,
                        size: 6,
                        row: 1,
                        order: 0
                    },
                    cardExpirationDate: {
                        label: "EXPIRATION DATE",
                        placeholder: "MM/YY",
                        floating: false,
                        size: 6,
                        row: 1,
                        order: 1
                    },
                    cardCvv: {
                        label: "CVV/CVC",
                        placeholder: "CVV/CVC",
                        floating: false,
                        size: 6,
                        row: 2,
                        order: 0
                    },
                    cardZipcode: {
                        label: "ZIP/POSTAL CODE",
                        placeholder: "Zip/Postal Code",
                        floating: false,
                        size: 6,
                        row: 2,
                        order: 1,
                        country: ["us", "ca"],
                    }
                }
            },
            ach: {
                enabled: false
            },
            customerData: {
                customerNumber: "00001",
                firstName: "John",
                lastName: "Doeee",
                billingEmail: "johndoe@email.com"
            },
            functionCallBackSuccess: function (response) {
                alert("card success");
                // paycomponentCard.removeListener();
                paycomponentCard.payabliExec("reinit");
            },
            functionCallBackReady: function (data) { },
            functionCallBackError: function (errors) {
                alert("Error!");
                console.log(errors);
            }
        };

        var payabliConfigACH = { // The config for the EmbeddedMethodUI component that accepts ACH
            type: "methodEmbedded",
            entryPoint: entryPoint,
            rootContainer: "pay-component-card",
            defaultOpen: "ach",
            token: token,
            customCssUrl: customCssUrl,
            customerData: {
                customerNumber: "00001",
                firstName: "John",
                lastName: "Doe",
                billingEmail: "johndoe@email.com"
            },
            card: {
                enabled: false
            },
            ach: {
                enabled: true,
                checking: true,
                savings: true,
                inputs: {
                    achAccountHolderName: {
                        label: "ACCOUNTHOLDER NAME",
                        floating: false,
                        size: 6,
                        row: 0,
                        order: 0
                    },
                    achAccountType: {
                        label: "ACCOUNT TYPE",
                        floating: false,
                        size: 6,
                        row: 0,
                        order: 1
                    },
                    achRouting: {
                        label: "ROUTING NUMBER",
                        floating: false,
                        size: 6,
                        row: 1,
                        order: 0,
                        confirm: true // Confirm routing number
                    },
                    achAccount: {
                        label: "ACCOUNT NUMBER",
                        floating: false,
                        size: 6,
                        row: 1,
                        order: 1,
                        confirm: true // Confirm account number
                    }
                }
            },


            functionCallBackSuccess: function (response) {
                alert("ach");
                // paycomponentCard.payabliExec('reinit');
            },
            functionCallBackError: function (errors) {
                console.log(errors);
            },
            functionCallBackReady: function (data) {

            }
        };

        var expressCheckoutConfig = { //The ExpressCheckout config
            token: token,
            type: "expressCheckout",
            entryPoint: entryPoint,
            rootContainer: "express-checkout-component",
            //customCssUrl: "your url to a custom css file",
            expressCheckout: {
                amount: 100,
                fee: 0.01,
                currency: "USD",
                supportedNetworks: ["visa"],
                columns: 1,
                applePay: {
                    enabled: true,
                    buttonStyle: "black-outline",
                    buttonType: "plain",
                    language: "en-US",
                },
                requiredShippingContactFields: true,
                appearance: {
                    buttonHeight: 50, // optional
                    buttonBorderRadius: 10, // optional
                    padding: {
                        x: 10, // optional
                        y: 10, // optional
                    },
                },
            },
            customerData: {
                customerNumber: "00001",
                firstName: "John",
                lastName: "Doe",
                billingEmail: "johndoe@email.com"
            },
            functionCallBackReady: function (data) {
                console.log('Express Checkout ready: ', data)
                const container = document.querySelector("#containerExpressCheckout");
                console.log(container)
                container.classList.remove("hidden");
            },
            functionCallBackSuccess: function (data) {
                console.log('Express Checkout Success: ', data)
            },
            functionCallBackError: function (data) {
                console.log('Express Checkout Error: ', data)
            },
            functionCallBackCancel: function (data) {
                console.log('Express Checkout Cancel: ', data)
            },
        }
        var paycomponentCard = new PayabliComponent(payabliConfigCard);

        new PayabliComponent(expressCheckoutConfig)

        function executeActionCard() {
            paycomponentCard.payabliExec("pay", {
                paymentDetails: {
                    totalAmount: 100,
                    serviceFee: 0,
                    categories: [
                        {
                            label: "payment",
                            amount: 100,
                            qty: 1
                        }
                    ]
                }
            });
        }

        let cardTab = document.getElementById("card-tab");
        let bankTab = document.getElementById("bank-tab");
        let payBtn = document.getElementById("btn-pay");

        cardTab.addEventListener("click", function () { // using updateConfig to switch between components
            paycomponentCard.updateConfig(payabliConfigCard);
        });

        bankTab.addEventListener("click", function () {
            paycomponentCard.updateConfig(payabliConfigACH);
        });

        payBtn.addEventListener("click", () => {
            paycomponentCard.payabliExec("pay", {
                paymentDetails: {
                    totalAmount: 100,
                    serviceFee: 0,
                    categories: [
                        {
                            label: "payment",
                            amount: 100,
                            qty: 1
                        }
                    ]
                }
            });
        });

    </script>

    </script>
</body>
</html>