datatrans / payment-button Goto Github PK

Hi there,

apple pay button is not displayed on my iphone. When checking the console log I see 'no wallet available' from the unsupported listener.
However, wallet is set with all credit cards. I tried on other websites implementing apple pay and I saw this button.

Also, window.AppleSession and window.AppleSession.canMakePayments() passed.

Idea?

Hi,

debugging and handling errors locally with

paymentButton.on("error", () => {});

When errors are thrown the event listener goes into an infinite call and crashes my safari/chrome. It is asif something is being re-triggered (call to apple or google pay?) from the payment button js file. Therefore, call/error, call/error...

I am not sure where to call paymentButton.off('error'). I tried immediately inside onError but...not sure if that is where it should be.

Suggestion?

Hi,

I've noticed that when calling

paymentButton.destroy()

an error is thrown because destroy is not defined on paymentButton.

Is it missing from the implementation or?

Could you provide an example of how to integrate this with react?

Hey Datatrans team!

It looks like there is no way to whitelist any domains that are not in format: www.{url}. Resulting in this error
Access to fetch at 'https://pay.sandbox.datatrans.com/upp/wallets/auth' from origin 'https://{url}' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can you guide me how to overcome this issue?

Hi,

in my useEffect I have the following,

useEffect(() => {
...

   return () => {
       paymentButton.destroy()
   }
}, [...])

when the component unmounts I am getting the following error in console,

Uncaught TypeError: Cannot set property 'innerHTML' of undefined
    at Object.ie [as destroy] (payment-button-1.0.0.js:255)

I don't get this when I return only () => {}

Idea? Setup same as usual Google and Apple pay.

Webhook URL

In JSON API, it's possible to define a custom webhook URL (webhook.url):

https://api-reference.datatrans.ch/#tag/v1transactions/operation/init

It would be nice to have the same in the payment-button context:

PaymentButton.init({
  webhook: {
    url: 'domain.com/xy'
})

Callback Dispatch Event

In our workflow, a payment entity needs to be created remotely, before any further (datatrans) actions can be dispatched (That's why we also need that dynamic webhook).

If a user dispatches the "Pay with apple/google" button, we need to push some data to our server first to initiate the payment. The response of this request also returns the webhook URL.

Exemplary code:

PaymentButton.on('dispatch', function (callback, initConfiguration) {

    fetch('https://domain.com/init-payment', {
        method: 'POST',
        body: JSON.stringify({foo: bar})
    })
    .then(response => response.json())
    .then(data => {

        // override init configuration
        initConfiguration.webhook.url = data.webhookUrl;

        // tell datatrans to proceed
        callback(initConfiguration);

    });
});

Otherwise, we're not able to prepare a payment item, which your service tries to allocate later by server to server communication. Hope this makes sense.

Hi again,

in my configuration I disabled googlePay. However, I keep on getting "ReferenceError: Can't find variable: PaymentRequest".
This originates from pay.js.

Below is my default init,

const defaultInit = {
	merchantName: 'test',
	useApplePay: true,
	useGooglePay: false,
	auto: false,
	allowedCardNetworks: [
		PAYMENT_METHOD_CREDITCARD_VISA,
		PAYMENT_METHOD_CREDITCARD_MASTERCARD,
		PAYMENT_METHOD_CREDITCARD_AMEX,
	],
	googlePayConfiguration: {
		buttonType: 'long',
		buttonStyle: 'black',
	},
	applePayConfiguration: {
		buttonType: 'plain',
		buttonStyle: 'black',
	},
}

Also, I am adding the merchantId later on,

window.PaymentButton.init({
				...defaultInit,
				merchantId,
                                 googlePayConfiguration: {
                                     ...defaultInit.googlePayConfiguration,
                                     merchantId, // why 2 different merchantIds?
                                 }
			})

This is my payment request,

details: {
		total: {
			label: 'Test label',
			amount: { value: amount, currency },
		},
	},
	options: {
		requestPayerEmail: false,
		requestPayerName: false,
		requestPayerPhone: false,
		requestShipping: false,
	},
	transaction: {
		countryCode: 'CH',
		refno,
	}

Seems I must have googlePay set as well...but I don't want. How to do that?

Hi,

if I cancel the apple pay process the first time and click on the apple pay button again, I am getting the following error in console,

InvalidStateError: The object is in an invalid state. from payment-button-1.0.0.js

Idea?

Thanks