Before you start

Make sure you have your publicKey. You can find it here, under Account Settings -> API. If you don't have an account with us yet, sign up for your free test account here.

Step 1: Choose your integration method

We offer two integration methods for your website:

Method	Description
iframe	When a customer on your checkout page clicks the Paynote payment button, it opens a plaid iFrame window that appears on top of your checkout page. Inside this iFrame, the user enters their bank information. Once complete, the iFrame window closes, and you can customize an onSuccess event. This event allows you to guide the user to your "thank you" page or take any action of your choice.
redirect	When a customer clicks the payment button on your checkout page, they are directed to a secure HTTPS page on the Paynote website. Here, the buyer enters their information securely. After they complete the transaction, a redirect is triggered to the URL specified in the redirectUrl field in your merchant settings.

Step 2: Insert JavaScript code into your checkout page

Use the provided JavaScript code for your chosen integration method and enter it on your checkout page. Replace the sample "publicKey" with your public key (found here). Note: Make sure to adjust the required key-value pairs to match your order details (refer to the JavaScript keys table below for guidance).

iframe

<html>
  <head>
    ...
    <script type="text/javascript" src="https://developers.seamlesschex.com/docs/checkoutjs/sdk-min.js"></script>
    ...
  </head>
  <body>
    ...
    <script>
      window.onload = function(e){
        var objRequestIframe = {
          publicKey: 'pk_test_6ff46046-30af-41d9-bf58-11111111cd14',
          sandbox: true,
          saveBankDetails: false,
          displayMethod: 'iframe',
          paymentToken: 'pay_tok_SPECIMEN-' + Math.random(),
          widgetContainerSelector: 'wrapper-pay-buttons',
          style: {
            buttonClass: 'btn green-btn btn-block no-overflow',
            buttonColor: '#00b660',
            buttonLabelColor: '#ffffff',
            buttonLabel: 'Pay'
          },
          lightBox: {
            title: 'Title Pay',
            subtitle: 'Sub Title Pay',
            logoUrl: "https://your.webSite.com/img/logo.png",
            formButtonLabel: 'PAY',
            show_cart_summary: false
          },
          checkout: {
            totalValue: 100,
            currency: 'USD',
            description: 'Description',
            items: [
              {title: '45 Units', price: 100}
            ],
            customerEmail: 'Kelley_Franecki@gmail.com',
            customerFirstName: 'Kelley',
            customerLastName: 'Franecki'
          },
          onSuccess: function() {
           yourCallBackFunction();
          }
        };
        var paynoteIframe =  new PAYNOTE(objRequestIframe);
        paynoteIframe.render();
      }
    </script>
  </body>
</html>

Redirect

<html>
  <head>
    ...
    <script type="text/javascript" src="https://developers.seamlesschex.com/docs/checkoutjs/sdk-min.js"></script>
    ...
  </head>
  <body>
    ...
    <script>
      window.onload = function(e){
        var objRequestRedirect = {
          publicKey: 'pk_test_6ff46046-30af-41d9-bf58-11111111cd14',
          sandbox: true,
          saveBankDetails: false,
          displayMethod: 'redirect',
          paymentToken: 'pay_tok_SPECIMEN-' + Math.random(),
          widgetContainerSelector: 'wrapper-pay-buttons',
          storeName: 'Fashion Store',
          style: {
            buttonClass: 'btn green-btn btn-block no-overflow',
            buttonColor: '#00b660',
            buttonLabelColor: '#ffffff',
            buttonLabel: 'Pay'
          },
          lightBox: {
            redirectUrl: 'https://your.webSite.com/complete-purchase.html',
            cancelUrl: 'https://your.webSite.com/checkout.html',
            title: 'Title Pay',
            subtitle: 'Sub Title Pay',
            logoUrl: "https://your.webSite.com/img/logo.png",
            formButtonLabel: 'PAY',
            show_cart_summary: false
          },
          checkout: {
            totalValue: 100,
            currency: 'USD',
            description: 'Description',
            items: [
              {title: '45 Units', price: 100}
            ],
            customerEmail: 'Kelley_Franecki@gmail.com',
            customerFirstName: 'Kelley',
            customerLastName: 'Franecki'
          }
        };
        var paynoteRedirect = new PAYNOTE(objRequestRedirect);
        paynoteRedirect.render();
      };
    </script>
  </body>
</html>

Environment Mode

When you're processing live payments, replace sandbox: true with sandbox: false

JavaScript keys

These are the JavaScript keys you need to use when embedding Checkout.js.

JavaScript Keys	Description
publicKey (REQUIRED)	Your public key. You'll find this in the Paynote.
displayMethod (REQUIRED)	Set to iframe to make payment in iframe window or redirect to redirect our service
paymentToken (REQUIRED)	Your payment token. Any custom information can be entered here (order label or order_id, for example)
widgetContainerSelector (REQUIRED)	The class of the element acting as the parent for the widget button
sandbox	Processing live or test payments
saveBankDetails	When this field is enabled, you are simply getting permission from a customer to create future payments using the bank account they connect. No transaction will be created. Authorization Only requires On-Demand payments enabled. Reach out to paynote@seamlesschex.com to have this feature enabled
storeName	Your store name or organization. This option required if you choose displayMethod as redirect or saveBankDetails enabled