The developer.datatrans.com Developer Hub

Welcome to the developer.datatrans.com developer hub. You'll find comprehensive guides and documentation to help you start working with developer.datatrans.com as quickly as possible, as well as support if you get stuck. Let's jump right in!

Payment Button

Payment Button is a JavaScript library from Datatrans that facilitates the setup, rendering and usage of payment buttons of different Wallet providers. It also makes use of the Payment Request API specified by W3C. 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 used. On your device, you will see either an Apple Pay or Google Pay button. The library will authorize a transaction automatically and return the same response as our JSON APIs.



61



79 (IE: not supported)



Not supported yet



11

Currently the library supports the following wallets:

Domain whitelisting required for Apple Pay

Your domain needs to be whitelisted to allow the Payment Button to correctly do authorizations with Apple Pay. Please login to your merchant account and proceed with whitelisting your domains. The domain whitelist section for Apple Pay can be found in your merchant configuration within the section Apple Pay Settings.

Process Overview

To start a transaction via our Payment Button Integration, you will need to initialize the Payment Button Javascript library and wait for your customer to hit the button provided by the library ¹. We will inform your front end again once a transaction has been finalized ² and call your webhook once the transaction has been completed ³.

Payment Button Integration

To get started include our Payment Button script on your web page.

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

Our Payment Button expects the object payment which conforms with the W3C payment request interface description. The object transaction contains Datatrans specific values, including countryCode and refno. Please refer to the section important parameters for more details on the expected values.

const payment = {
  // W3C
  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" },
      }
    ]
  },
  options: {
    requestPayerEmail: true,
    requestPayerName: true,
    requestPayerPhone: false,
    requestShipping: true
  },
  // Datatrans
  transaction: {
    countryCode: "CH",
    refno: "3e23dasdasd1123"
  }
};

Next, you'll want to define your payment options. Within PaymentButton.init() you define the merchant configuration, the name visible on the payment sheet, the settlement option, the allowed card brands, and other options related to the wallets.

PaymentButton.init({
  merchantId: '{{merchantId}}',
  merchantName: 'Test',
  tokenOnly: false,
  autoSettle: false,
  allowedCardNetworks: ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'],
  googlePayConfiguration: {
    buttonType: "long",
    buttonStyle: "black",
    merchantId: "{{googlePayMerchantId}}"
  },
  applePayConfiguration: {
    buttonType: "plain",
    buttonStyle: "black"
  }
});

Placing the Payment Button

Place the button at your desired location.

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

Success

Listen for the authorization event of the PaymentButton.on() call.

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

Webhook

After any transaction that was processed via our Payment Button integration, we will call your webhook with all relevant transaction information. You can define your webhook URL within your merchant configuration. Any server to server request to modify an existing transaction has to be made with our transactionId. Please refer to our page After The Payment for more information on actions you can make after a payment has been completed.

Within our Payment Button integration, your webhook will always be called asynchronously after a transaction has been completed. We only try to call your webhook once. If it fails, no additional calls will be performed.

Showcase & More

For a detailed sample you can visit our Payment Button showcase. All events and parameters are explained there in detail too.

Updated 22 days ago

Payment Button


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.