Intro

Payment Button is a JavaScript library from Datatrans that facilitates the setup, rendering and usage of payment buttons of different Wallet providers like Google and Apple. It also makes use of the Payment Request API specified by W3C when available. If the Payment Request API is not available, 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 Apple Pay or Google Pay button. The library will authorize the transactions automatically.

Currently the library supports following wallets:

Apple Pay
Google Pay

Try the sample!

How it works

Include the java script

<script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-1.0.0.js"></script>

Initialize the library

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

Create a payment request

const payment = {
  // W3C spec
  details: {
    total: {
      label: "My Merchant",
      amount: { value: "1.50", currency: "USD" },
    },
    displayItems: [
      {
        label: "Tax",
        amount: { value: "2.50", currency: "USD" },
      }
    ],
    shippingOptions: [
      {
        id: "ground",
        label: "Ground Shipping",
        amount: { value: "5.00", currency: "USD" },
        selected: true,
      },
      {
        id: "express",
        label: "Express Shipping",
        amount: { value: "10.00", currency: "USD" },
      }
    ]
  },
  // W3C spec
  options: {
    requestPayerEmail: true,
    requestPayerName: true,
    requestPayerPhone: false,
    requestShipping: true
  },
  // Datatrans specific
  transaction: {
    countryCode: "CH",
    refno: "3e23dasdasd1123"
  }
};

Create a button after initialization

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

Domain whitelisting

Your domain needs to be whitelisted in order for the Payment Button to automatically do the authorization. To do so, login to our Webadmin Tool where you can find the whitelist section within the UPP Administration tab.

Listen for the authorization event

PaymentButton.on("authorization", function (response) {
  // your code
});

Documentation

For a more detailed sample and documentation refer to our Sample