Datatrans Payment Button

Use this javascript library to render an Apple or Google Pay button. It uses the Payment Request API specified by W3C when available. If not it falls back to the corresponding vendor implementation. This library gives you a single integration for rendering payment buttons. It can automatically detect which button should be displayed depending on the browser and device combination that is supported and used. In the demo below, depending on your device you will see either an ApplePay or GooglePay button. Please note that for ApplePay this library only works with a Datatrans merchantId which has been enabled for ApplePay processing via Datatrans.

Configure and test the example

Events output

How it works

1) The payment request

The library expects a payment request when a button is created. The payment request is an object which conforms with the W3C payment request interface description . The object is extended with a transaction property wich contains Datatrans specific values, which currently are "currencyCode" and "refno".

const payment = {
  // W3C spec
  details: {
    total: {
      label: 'My Merchant',
      amount: { value: '4', currency: 'USD' },
    },
    displayItems: [
      {
        label: 'Tax',
        amount: { value: '2.50', currency: 'USD' },
      },
    ],
  },
  // W3C spec
  options: {
    requestPayerEmail: false,
    requestPayerName: false,
    requestPayerPhone: false,
  },
  // Datatrans specific
  transaction: {
    countryCode: 'CH',
    refno: '3e23dasdasd1123',
  },
};

2) Initialize the library

<script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-2.0.0.js" type="text/javascript"></script>
PaymentButton.init({
  merchantId: '1000011011',
  merchantName: 'Test',
  tokenOnly: false,
  autoSettle: false,
  allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'],
  googlePayConfiguration: {
    buttonType: 'long',
    buttonStyle: 'black',
    merchantId: '01234567890123456789'
  },
  applePayConfiguration: {
    buttonType: 'plain',
    buttonStyle: 'black'
  },
});

3) Listen for the init event and create the button

PaymentButton.on("init", function () {
  PaymentButton.create(document.getElementById('paybutton'), payment)
});

4) Listen for the authorization event and continue

PaymentButton.on("authorization", function (response) {
  // handle transaction result
});

Reference

Events

Following events will be emmited by the library
  • init - emitted when the library is initialized and ready to use
  • create - emitted when payment button is rendered
  • authorization - emitted when an authorization response has been received - payload: authorization response
  • abort - emitted when the payment request has been cancelled by the user
  • unsupported - emitted when no payment method is supported
  • error - emitted when an error occurs - <optional>payload: error message

Options and parameters

Option Description Data type
merchantId Your datatrans merchantId String
merchantName Your merchant name String
useGooglePay Use this property to disable Google Pay. Note: By default Google Pay is enabled if supported by the browser boolean
useApplePay Use this property to disable Apple Pay. Note: Apple Pay can only be displayed in Safari browsers. Note: By default Apple Pay is enabled if supported by the browser boolean
autoSettle Wether the transaction will be settled automatically. Default is false. boolean
allowedCardNetworks Which cardnetworks to accept String array
googlePayConfiguration Option Description Type
buttonType The type of button, described here String
buttonStyle The style of button, described here String
merchantId Your google pay merchantId. Can be found in the Google Pay merchant console String
applePayConfiguration Option Description Type
buttonType The type of button, described here String
buttonStyle The style of the button, described here String
Payment Request - transaction Option Description Type
refno Your reference number. Find out more here String
createAlias Whether to create an alias. The alias will be sent on the webhook and is also returned through a status call. boolean
authenticationOnly Only authenticate the transaction (used for deferred authorization) boolean
countryCode ISO 3166-1 alpha-2 country code where the transaction is processed. This is required for merchants based in European Economic Area (EEA) countries. Mandatory for payment-button-v2 library. String