Elements SDK

Complete your checkout process with a list of payment options. From easy-to-use ones like Apple Pay, Google Pay and PayPal (etc), to buy-now-pay-later ones like Klarna, Sezzle, Affirm and more.

Quick demo

Check out our demo page to see the flow in action.

SensePass Elements Demojs.sandbox.sensepass.com

This is a checkout page example with the Elements SDK.

Configuration

You can copy-paste the (relevant) following HTML code to your checkout page to get going.

Note that the current widget configuration is set up to use the mock client-id - and replace it with yours.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SensePass Elements SDK</title>
    <!-- Set the SensePass SDK script -->
    <script src="https://js.sensepass.com/scripts/[email protected]"></script>
</head>
<body style="width: 25rem; margin: 0 auto">
    <!-- Top Payment Button -->
    <button id="primary-payment-button" onclick="handlePaymentButtonClick()">Complete Payment (primary)</button>
    <!-- SensePass Elements Container -->
    <div id="sensepass-front-end"></div>
    <!-- Bottom Payment Button -->
    <button id="secondary-payment-button" onclick="handlePaymentButtonClick()">Complete Payment (secondary)</button>
    <script>
        // Configure the SDK
        const spClient = SensePassFrontEndSDK.config({
            mode: "sandbox", // "sandbox" | "production"
            debug: true,
            clientId: "SensePassSDKGeneralClientId",
            methodType: "manual_capture", // "manual_capture" | "authorize" | "tokenize"
            theme: {
                paymentMethodGrid: "vertical" // "horizontal" | "vertical" | "vertical-b"
            },
            payButtonId: ['primary-payment-button', 'secondary-payment-button'], // Array of button IDs
        });
        // Initialize the SDK
        const sensepass = spClient.init();
        // Event: Payment method selected
        sensepass.paymentSelected(payload => console.log('Payment method selected:', payload));
        // Event: Payment in progress
        sensepass.paying(payload => console.log('Payment in progress:', payload));
        // Event: Payment method validation status
        sensepass.paymentMethodValidationStatus(payload => console.log('Payment validation status:', payload));
        // Event: Error occurred
        sensepass.error(payload => console.error('SDK Error:', payload));

        function handlePaymentButtonClick() {
            // Call the pay method when button is clicked
            sensepass.pay(payload => console.log('Payment result:', payload),
                {
                    amount: 1299, // Amount in cents (12.99 USD)
                    currency: "USD",
                    billingAddress: {
                        city: "New York",
                        email: "[email protected]",
                        firstName: "John",
                        lastName: "Doe",
                        street: "123 Demo St",
                        state: "NY",
                        zipcode: "10001",
                        mobilePhone: "5551234567",
                        country: "US"
                    }
                }
            );
        }
    </script>
</body>
</html>

Payment Data

Example of the SDK's "pay" callback payload (sets the payment for commit)

{
  "TransactionNumber": "7f943e53476a3efcc263d0f975a01c45a6118fc55852efde8dad7227",
  "status": 20
}

Customization

This code sample demonstrates how to customize the appearance of the Elements Widget's payment buttons/elements. Set this object in our SDK configuration to apply your custom theme.

Download and edit the following themes you wish to style on your own:

Material theme: https://pay.sandbox.sensepass.com/publicAssets/themes/material.theme.css
SensePass theme: https://pay.sandbox.sensepass.com/publicAssets/themes/ecommerce.theme.css
Save your themes in a hosting site of your choosing and set their URL in the config JSON.
Use the SDK Theme Config Model to set you custom text and other UI configurations.

SensePassFrontEndSDK.config({
   // ...,
   theme: { // optional theme for various packages
	/** angular material provides extensive documentation on customizing their theme
	* you can find it at: https://material.angular.io/guide/theming */
	material: "https://pay.sandbox.sensepass.com/publicAssets/themes/custom-sample-material.theme.css", // sample for a customized material theme
	sensepassEcommerce: "https://pay.sandbox.sensepass.com/publicAssets/themes/custom-sample-ecommerce.theme.css", // sample for a customized sensepass theme
	paymentMethodGrid: "horizontal", // horizontal | vertical style of the payment options
	config: {} // a configuration object for specific payment methods text/animations
   }
})

Last updated 1 month ago

Was this helpful?