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, which contains Datatrans-specific values such as "countryCode", "refno", etc.

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-3.0.0.js" type="text/javascript"></script>

const paymentButton = new PaymentButton();

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
});