seamlesspay-web v3.0.0

seamlesspay-web

A suite of tools for integrating Seamlesspay in the browser.

Install

npm install seamlesspay-web

Usage

Hosted Fields integration

<form action="/" id="my-sample-form">
  <input type="hidden" name="payment_method_id">
  <label for="card-number">Card Number</label>
  <div id="card-number"></div>

  <label for="expiration-date">Expiration Date</label>
  <div id="expiration-date"></div>

  <input id="my-submit" type="submit" value="Pay" disabled/>
</form>

var submitBtn = document.getElementById('my-submit');
var form = document.getElementById('my-sample-form');

seamlesspay.client.create({
  authorization: CLIENT_PUBLISHABLE_KEY
}, clientDidCreate);

function clientDidCreate(error, client) {
  seamlesspay.hostedFields.create({
    type: 'CREDIT',
    client: client,
    styles: {
      'input': {
        'font-size': '16pt',
        'color': '#3A3A3A'
      },
      '.valid': {
        'color': 'green'
      }
    },
    fields: {
      accountNumber: {
        selector: '#card-number'
      },
      expirationDate: {
        selector: '#expiration-date'
      }
    }
  }, hostedFieldsDidCreate);
}

function hostedFieldsDidCreate(error, hostedFields) {
  submitBtn.addEventListener('click', submitHandler.bind(null, hostedFields));
  submitBtn.removeAttribute('disabled');
}

function submitHandler(hostedFields, event) {
  event.preventDefault();
  submitBtn.setAttribute('disabled', 'disabled');

  hostedFields.tokenize(function (error, payload) {
    if (error) {
      submitBtn.removeAttribute('disabled');
      console.error(error);
    } else {
      form['payment_method_id'].value = payload.token;
      form.submit();
    }
  });
}

Advanced integration

<form action="/" id="my-sample-form">

  <label for="method">Transaction Type</label>
  <div id="method"></div>

  <label for="account-number">Card Number</label>
  <div id="account-number"></div>

  <label for="expiration-date">Expiration Date</label>
  <div id="expiration-date"></div>

  <label for="amount">Amount</label>
  <div id="amount"></div>

  <label for="description">Description</label>
  <input id="description" type="text"/>

  <input id="my-submit" type="submit" value="Pay" disabled/>
</form>

var submitBtn = document.getElementById('my-submit');
var form = document.getElementById('my-sample-form');

seamlesspay.client.create({
  authorization: CLIENT_PUBLISHABLE_KEY,
  transactionApi: {
    url: 'https://your.transaction.processing.server.com'
  }
}, clientDidCreate);

function clientDidCreate(error, client) {
  seamlesspay.hostedFields.create({
    type: 'CREDIT',
    client: client,
    styles: {
      'input': {
        'font-size': '16pt',
        'color': '#3A3A3A'
      },
      '.valid': {
        'color': 'green'
      }
    },
    fields: {
      method: {
        selector: '#method',
        defaultValue: 'sale'
      },
      accountNumber: {
        selector: '#account-number'
      },
      expirationDate: {
        selector: '#expiration-date'
      },
      amount: {
        selector: '#amount'
      }
    }
  }, hostedFieldsDidCreate);
}

function hostedFieldsDidCreate(error, hostedFields) {
  submitBtn.addEventListener('click', submitHandler.bind(null, hostedFields));
  submitBtn.removeAttribute('disabled');
}

function submitHandler(hostedFields, event) {
  event.preventDefault();
  submitBtn.setAttribute('disabled', 'disabled');

  hostedFields.createTransaction({
    description: document.getElementById('description').value
  }, function (error, payload) {
    if (error) {
      submitBtn.removeAttribute('disabled');
      console.error(error);
    } else {
      form['transaction'].value = JSON.stringify(payload);
      form.submit();
    }
  });
}

Payment Request integration

<button id="payment-request-button">Make Payment Request $ 1.00</button>

Check that window.PaymentRequest exists to ensure that Payment Request is supported and available in the browser.

if (window.PaymentRequest) {
  // This browser supports Payment Request
  // Display your Payment Request button
} else {
  alert('Browser does not support Payment Request');
  // Browser does not support Payment Request
  // Set up Hosted Fields, etc.
}

Set up your Payment Request button

var button = document.querySelector('#payment-request-button');

seamlesspay.client.create(
  {
    authorization: CLIENT_PUBLISHABLE_KEY
  },
  clientDidCreate,
);

function clientDidCreate(error, client) {
  if (error) {
    // handle client error here
    return;
  }

  seamlesspay.paymentRequest.create({
    client: client
  }, paymentRequestDidCreate);
}

function paymentRequestDidCreate(error, paymentRequest) {
  if (error) {
    // Handle Payment Request errors here
    return;
  }

  button.addEventListener('click', submitHandler.bind(null, paymentRequest));
}

function submitHandler(paymentRequest, event) {
  event.preventDefault();

  paymentRequest.tokenize({
    details: {
      total: {
        label: 'Total Amount',
        amount: {
          currency: 'USD',
          value: '1.00'
        }
      }
    },
    options: {
      requestPayerName: true,
      requestPayerPhone: true,
      requestPayerEmail: true
    }
  }, function(error, payload) {
    if (error) {
      // Handle errors from processing payment request
      return;
    }

    // Send payload.token to your server here
    alert(payload.token)
  });
}

For more examples, see the reference.