diff --git a/README.md b/README.md index 69037fa..6aeb03d 100644 --- a/README.md +++ b/README.md @@ -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, @@ -23,28 +25,28 @@ PaymentButton.init({ } }) -PaymentButton.on('init', function () { - $('.console-content').append('init event dispatched
') - PaymentButton.create(document.getElementById('paybutton'), payment) +paymentButton.on('init', function () { + $('.console-content').append('init event dispatched
') + paymentButton.create(document.getElementById('paybutton'), payment) }) -PaymentButton.on('create', function () { +paymentButton.on('create', function () { $('.console-content').append('create event dispatched
') }) -PaymentButton.on('authorization', function (response) { +paymentButton.on('authorization', function (response) { $('.console-content').append('authorization response:' + '
' + response + '
') }) -PaymentButton.on('abort', function () { +paymentButton.on('abort', function () { $('.console-content').append('Payment request aborted' + '
') }) -PaymentButton.on('error', function (error) { +paymentButton.on('error', function (error) { $('.console-content').append('Error:' + JSON.stringify(error) + '
') }) -PaymentButton.on('unsupported', function () { +paymentButton.on('unsupported', function () { $('.console-content').append('Payment method not supported in this browser
') }) ``` @@ -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 diff --git a/index.html b/index.html index 83a4670..97719c8 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -114,6 +114,13 @@

Configure and test the example

+
+ + +
@@ -167,12 +174,13 @@

1) The payment request

transaction: { countryCode: 'CH', refno: '3e23dasdasd1123', + version: 1, }, };

2) Initialize the library

- 
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.0.0.js" type="text/javascript"></script>
+ 
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/payment-button-3.1.0.js" type="text/javascript"></script>

 const paymentButton = new PaymentButton();
 
@@ -268,6 +276,11 @@ 
Init parameters

                     Safari browsers. Note: By default Apple Pay is enabled if supported by the browser
                   Boolean
                 
+                
+                    tokenOnly
+                    Whether to output token data only. Default is false.
+                    Boolean
+                
                 
                   autoSettle
                   Whether the transaction will be settled automatically. Default is false.
@@ -325,6 +338,7 @@ 
Transaction parameters

                 
                   
                     Option
+                    Since
                     Description
                     Data type
                   
@@ -335,6 +349,7 @@ 
Transaction parameters

                       refno
                       
required

                     
+                    v1.0
                     
                       Your reference number. Find out more
                       here
@@ -346,6 +361,7 @@ 
Transaction parameters

                       countryCode
                       
required

                     
+                    v1.0
                     
                       
ISO 3166-1 alpha-2 country code where the transaction is processed.

                       
This is required for merchants based in European Economic Area (EEA) countries.

@@ -355,6 +371,7 @@ 
Transaction parameters

                   
                   
                     createAlias
+                    v1.0
                     
                       
Whether to create an alias.

                       

@@ -366,21 +383,34 @@ 
Transaction parameters

                   
                   
                     authenticationOnly
+                    v1.0
                     Only authenticate the transaction (used for deferred authorization)
                     Boolean
                   
+                  
+                    version
+                    v3.1
+                    
+                      
Transaction API version. Default: 1

+                      
Allowed values: 1 | 2

+                    
+                    Number
+                  
                   
                     mcp
+                    v3.0
                     Configuration of Multi-Currency Pricing. Find out more here.
                     Object
                   
                   
                     amount
+                    v3.0
                     
                     Object
                   
                   
                     value
+                    v3.0
                     
                       
Amount the customer will pay in their currency.

                       

@@ -392,21 +422,25 @@ 
Transaction parameters

                   
                   
                     currency
+                    v3.0
                     ISO 4217 currency code of the amount the customer will pay.
                     String
                   
                   
                     provider
+                    v3.0
                     Identify the MCP provider used.
                     String
                   
                   
                     reasonIndicator
+                    v3.0
                     If received from acquirer the reason indicator can be set
                     String
                   
                   
                     conversionRate
+                    v3.0
                     
                       
Rate used to calculate MCP amount.

                       
Note: Only used in dynamic MCP

@@ -415,6 +449,7 @@ 
Transaction parameters

                   
                   
                     transactionDate
+                    v3.0
                     
                       
Date when the rate was fetched from the MCP provider.

                       
Note: Only used in dynamic MCP

@@ -423,6 +458,7 @@ 
Transaction parameters

                   
                   
                     retrievalReferenceNumber
+                    v3.0
                     
                       
Reference number of the MCP provider response.

                       
Note: Only used in dynamic MCP

diff --git a/index.js b/index.js
index daf2418..d622014 100644
--- a/index.js
+++ b/index.js
@@ -46,6 +46,7 @@ const payment = {
     countryCode: 'CH',
     refno: '3e23dasdasd1123',
     createAlias: false,
+    version: 1
   },
 };
 
@@ -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);
+    }
+
     if (data.target.id === 'merchantName') {
       const merchantName = data.target.value;
 
diff --git a/react-example/PaymentButtonWithHook.js b/react-example/PaymentButtonWithHook.js
index e63b4f5..38a2c9e 100644
--- a/react-example/PaymentButtonWithHook.js
+++ b/react-example/PaymentButtonWithHook.js
@@ -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,
diff --git a/react-example/index.js b/react-example/index.js
index 7ba0103..b0fe590 100644
--- a/react-example/index.js
+++ b/react-example/index.js
@@ -34,6 +34,7 @@ const OPTIONS = {
     transaction: {
       countryCode: 'CH',
       refno: '3e23dasdasd1123',
+      version: 1
     },
   },
 }
diff --git a/react-example/paymentButton.js b/react-example/paymentButton.js
index 1536afb..c8d3712 100644
--- a/react-example/paymentButton.js
+++ b/react-example/paymentButton.js
@@ -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,