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.
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',
},
};
<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'
},
});
PaymentButton.on("init", function () {
PaymentButton.create(document.getElementById('paybutton'), payment)
});
PaymentButton.on("authorization", function (response) {
// handle transaction result
});
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 |