# Elements SDK ### Quick demo Check out our demo page to see the flow in action. {% embed url="" %} {% hint style="info" %} This is a checkout page example with the Elements SDK. {% endhint %} ***
### Configuration {% hint style="info" %} 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. {% endhint %} {% code lineNumbers="true" expandable="true" %} ```html SensePass Elements SDK
``` {% endcode %} *** ### Payment Data {% hint style="info" %} Example of the SDK's "pay" callback payload (sets the payment for commit) {% endhint %} {% code lineNumbers="true" expandable="true" %} ```json { "TransactionNumber": "7f943e53476a3efcc263d0f975a01c45a6118fc55852efde8dad7227", "status": 20 } ``` {% endcode %} ### Customization {% hint style="info" %} 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: 1. Material theme: 2. SensePass theme: [https://pay.sandbox.sensepass.com/publicAssets/themes/ecommerce.theme.css](https://pay.sandbox.sensepass.com/publicAssets/themes/material.theme.css) 3. Save your themes in a hosting site of your choosing and set their URL in the config JSON. 4. Use the [SDK Theme Config Model](https://docs.sensepass.com/sensepay/transaction-api/models/sdk-theme-config-model) to set you custom text and other UI configurations. {% endhint %} {% code lineNumbers="true" %} ```javascript 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 } }) ``` {% endcode %}