Skip to content

DAT-745: Update payment button library to version 3.1.0 and add transaction API version selection #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alexabreuplanet wants to merge 2 commits into
base: master
Choose a base branch
from
Open

DAT-745: Update payment button library to version 3.1.0 and add transaction API version selection #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
207b69b
DAT-745: Update payment button library to version 3.1.0 and add trans…
alexabreuplanet Jul 15, 2026
bf2c5c9
DAT-745: Add tokenOnly field to the documentation
alexabreuplanet Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ Render Apple Pay and Google Pay buttons for payments via Datatrans. Buttons are
## Usage example

```js
PaymentButton.init({
const paymentButton = new PaymentButton();

paymentButton.init({
merchantId: '1100002476',
merchantName: 'Test',
useGooglePay: true,
Expand All @@ -23,28 +25,28 @@ PaymentButton.init({
}
})

PaymentButton.on('init', function () {
$('.console-content').append('init event dispatched <br>')
PaymentButton.create(document.getElementById('paybutton'), payment)
paymentButton.on('init', function () {
$('.console-content').append('init event dispatched <br>')
paymentButton.create(document.getElementById('paybutton'), payment)
})

PaymentButton.on('create', function () {
paymentButton.on('create', function () {
$('.console-content').append('create event dispatched <br>')
})

PaymentButton.on('authorization', function (response) {
paymentButton.on('authorization', function (response) {
$('.console-content').append('authorization response:' + '<br>' + response + '<br>')
})

PaymentButton.on('abort', function () {
paymentButton.on('abort', function () {
$('.console-content').append('Payment request aborted' + '<br>')
})

PaymentButton.on('error', function (error) {
paymentButton.on('error', function (error) {
$('.console-content').append('Error:' + JSON.stringify(error) + '<br>')
})

PaymentButton.on('unsupported', function () {
paymentButton.on('unsupported', function () {
$('.console-content').append('Payment method not supported in this browser <br>')
})
```
Expand All @@ -53,9 +55,10 @@ PaymentButton.on('unsupported', function () {

The following events can be subscribed to:

- `initialized` - emitted when the library was initialized
- `created` - emitted when all buttons were rendered
- `init` - emitted when the library was initialized
- `create` - emitted when all buttons were rendered
- `authorization` - emitted when the authorization process has completed
- `token` - emitted when a token was received from the payment provider (if `tokenOnly` is set to `true`)
- `abort` - emitted when the payment request was aborted
- `error` - emitted when an error happens
- `unsupported` - emitted when no payment method is supported by the client
40 changes: 38 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.0.0.js"></script>
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.1.0.js"></script>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
Expand Down Expand Up @@ -114,6 +114,13 @@ <h3>Configure and test the example </h3>
<option value="EUR">EUR</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="version">Transaction API version</label>
<select class="form-select" id="version">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
</div>
</form>
</div>

Expand Down Expand Up @@ -167,12 +174,13 @@ <h4>1) The payment request</h4>
transaction: {
countryCode: 'CH',
refno: '3e23dasdasd1123',
version: 1,
},
};</code></pre>
</div>
<div class="col-12 column">
<h4>2) Initialize the library</h4>
<pre><code class="language-markup">&lt;script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.0.0.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<pre><code class="language-markup">&lt;script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.1.0.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<pre><code class="language-javascript">
const paymentButton = new PaymentButton();

Expand Down Expand Up @@ -268,6 +276,11 @@ <h4>Init parameters</h4>
Safari browsers. Note: By default Apple Pay is enabled if supported by the browser</td>
<td>Boolean</td>
</tr>
<tr>
<th>tokenOnly</th>
<td>Whether to output token data only. Default is false.</td>
<td>Boolean</td>
</tr>
<tr>
<th>autoSettle</th>
<td>Whether the transaction will be settled automatically. Default is false.</td>
Expand Down Expand Up @@ -325,6 +338,7 @@ <h4>Transaction parameters</h4>
<thead>
<tr>
<th>Option</th>
<th>Since</th>
<th>Description</th>
<th class="nowrap">Data type</th>
</tr>
Expand All @@ -335,6 +349,7 @@ <h4>Transaction parameters</h4>
refno
<div class="text-error text-small">required</div>
</th>
<td>v1.0</td>
<td>
Your reference number. Find out more
<a href="https://api-reference.datatrans.ch/#mandatory-parameters">here</a>
Expand All @@ -346,6 +361,7 @@ <h4>Transaction parameters</h4>
countryCode
<div class="text-error text-small">required</div>
</th>
<td>v1.0</td>
<td>
<div>ISO 3166-1 alpha-2 country code where the transaction is processed.</div>
<div>This is required for merchants based in European Economic Area (EEA) countries.</div>
Expand All @@ -355,6 +371,7 @@ <h4>Transaction parameters</h4>
</tr>
<tr>
<th>createAlias</th>
<td>v1.0</td>
<td>
<div>Whether to create an alias.</div>
<div>
Expand All @@ -366,21 +383,34 @@ <h4>Transaction parameters</h4>
</tr>
<tr>
<th>authenticationOnly</th>
<td>v1.0</td>
<td>Only authenticate the transaction (used for deferred authorization)</td>
<td>Boolean</td>
</tr>
<tr>
<th>version</th>
<td>v3.1</td>
<td>
<div>Transaction API version. Default: 1</div>
<div>Allowed values: 1 | 2</div>
</td>
<td>Number</td>
</tr>
Comment thread
alexabreuplanet marked this conversation as resolved.
<tr>
<th>mcp</th>
<td>v3.0</td>
<td>Configuration of Multi-Currency Pricing. Find out more <a href="https://docs.datatrans.ch/docs/multi-currency-pricing">here</a>.</td>
<td>Object</td>
</tr>
<tr>
<th class="indent-1">amount</th>
<td>v3.0</td>
<td></td>
<td>Object</td>
</tr>
<tr>
<th class="indent-2">value</th>
<td>v3.0</td>
<td>
<div>Amount the customer will pay in their currency.</div>
<div>
Expand All @@ -392,21 +422,25 @@ <h4>Transaction parameters</h4>
</tr>
<tr>
<th class="indent-2">currency</th>
<td>v3.0</td>
<td>ISO 4217 currency code of the amount the customer will pay.</td>
<td>String</td>
</tr>
<tr>
<th class="indent-1">provider</th>
<td>v3.0</td>
<td>Identify the MCP provider used.</td>
<td>String</td>
</tr>
<tr>
<th class="indent-1">reasonIndicator</th>
<td>v3.0</td>
<td>If received from acquirer the reason indicator can be set</td>
<td>String</td>
</tr>
<tr>
<th class="indent-1">conversionRate</th>
<td>v3.0</td>
<td>
<div>Rate used to calculate MCP amount.</div>
<div>Note: Only used in dynamic MCP</div>
Expand All @@ -415,6 +449,7 @@ <h4>Transaction parameters</h4>
</tr>
<tr>
<th class="indent-1">transactionDate</th>
<td>v3.0</td>
<td>
<div>Date when the rate was fetched from the MCP provider.</div>
<div>Note: Only used in dynamic MCP</div>
Expand All @@ -423,6 +458,7 @@ <h4>Transaction parameters</h4>
</tr>
<tr>
<th class="indent-1">retrievalReferenceNumber</th>
<td>v3.0</td>
<td>
<div>Reference number of the MCP provider response.</div>
<div>Note: Only used in dynamic MCP</div>
Expand Down
6 changes: 6 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const payment = {
countryCode: 'CH',
refno: '3e23dasdasd1123',
createAlias: false,
version: 1
},
};

Expand Down Expand Up @@ -101,6 +102,11 @@ $(document).ready(function () {
paymentButton1.create(document.getElementById('paybutton'), payment);
}

if (data.target.id === 'version') {
payment.transaction.version = Number(data.target.value);
paymentButton1.create(document.getElementById('paybutton'), payment);
}
Comment thread
alexabreuplanet marked this conversation as resolved.

if (data.target.id === 'merchantName') {
const merchantName = data.target.value;

Expand Down
4 changes: 2 additions & 2 deletions react-example/PaymentButtonWithHook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'

const getUrl = (production) =>
production
? 'https://pay.datatrans.com/upp/payment/js/payment-button-3.0.0.js'
: 'https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.0.0.js'
? 'https://pay.datatrans.com/upp/payment/js/payment-button-3.1.0.js'
: 'https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.1.0.js'

const DEFAULT_OPTIONS = {
useGooglePay: true,
Expand Down
1 change: 1 addition & 0 deletions react-example/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const OPTIONS = {
transaction: {
countryCode: 'CH',
refno: '3e23dasdasd1123',
version: 1
},
},
}
Expand Down
4 changes: 2 additions & 2 deletions react-example/paymentButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { Component } from 'react'

const getUrl = (production) => production
? 'https://pay.datatrans.com/upp/payment/js/payment-button-3.0.0.js'
: 'https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.0.0.js'
? 'https://pay.datatrans.com/upp/payment/js/payment-button-3.1.0.js'
: 'https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.1.0.js'

const DEFAULT_OPTIONS = {
useGooglePay: true,
Expand Down