diff --git a/package.json b/package.json index 94393410..a816f18b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "processout.js", - "version": "1.0.15", + "version": "1.0.16", "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.", "scripts": { "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js", diff --git a/src/dynamic-checkout/locales/en.ts b/src/dynamic-checkout/locales/en.ts index 012eeed0..ca1ac608 100644 --- a/src/dynamic-checkout/locales/en.ts +++ b/src/dynamic-checkout/locales/en.ts @@ -15,6 +15,7 @@ module ProcessOut { "cvc-error-message": "CVC is invalid", "cardholder-name-error-message": "Cardholder name is invalid", "payment-error-message": "Something went wrong. Please try again.", + "payment-cancelled-message": "Payment has been cancelled.", "express-checkout-header": "Express checkout", "other-payment-methods-header": "Other payment methods", "select-payment-method-label": "Select payment method", diff --git a/src/dynamic-checkout/locales/es.ts b/src/dynamic-checkout/locales/es.ts index 37cc55b3..a86a30df 100644 --- a/src/dynamic-checkout/locales/es.ts +++ b/src/dynamic-checkout/locales/es.ts @@ -15,6 +15,7 @@ module ProcessOut { "cvc-error-message": "El CVC es inválido", "cardholder-name-error-message": "El nombre del titular de la tarjeta es inválido", "payment-error-message": "Algo salió mal. Por favor, inténtalo de nuevo.", + "payment-cancelled-message": "El pago ha sido cancelado.", "express-checkout-header": "Pago exprés", "other-payment-methods-header": "Otros métodos de pago", "select-payment-method-label": "Seleccionar método de pago", diff --git a/src/dynamic-checkout/locales/fr.ts b/src/dynamic-checkout/locales/fr.ts index f9c4e204..7f3b3e97 100644 --- a/src/dynamic-checkout/locales/fr.ts +++ b/src/dynamic-checkout/locales/fr.ts @@ -15,6 +15,7 @@ module ProcessOut { "cvc-error-message": "Le CVC est invalide", "cardholder-name-error-message": "Le nom du titulaire de la carte est invalide", "payment-error-message": "Quelque chose a mal tourné. Veuillez réessayer.", + "payment-cancelled-message": "Le paiement a été annulé.", "express-checkout-header": "Paiement express", "other-payment-methods-header": "Autres méthodes de paiement", "select-payment-method-label": "Sélectionner un méthode de paiement", diff --git a/src/dynamic-checkout/locales/pl.ts b/src/dynamic-checkout/locales/pl.ts index fe7ce9e8..5bbfcb96 100644 --- a/src/dynamic-checkout/locales/pl.ts +++ b/src/dynamic-checkout/locales/pl.ts @@ -15,6 +15,7 @@ module ProcessOut { "cvc-error-message": "CVC jest nieprawidłowy", "cardholder-name-error-message": "Imię i nazwisko posiadacza karty jest nieprawidłowe", "payment-error-message": "Coś poszło nie tak. Spróbuj ponownie.", + "payment-cancelled-message": "Płatność została anulowana.", "express-checkout-header": "Szybka płatność", "other-payment-methods-header": "Inne metody płatności", "select-payment-method-label": "Wybierz metodę płatności", diff --git a/src/dynamic-checkout/locales/pt.ts b/src/dynamic-checkout/locales/pt.ts index ced693cc..893405e3 100644 --- a/src/dynamic-checkout/locales/pt.ts +++ b/src/dynamic-checkout/locales/pt.ts @@ -15,6 +15,7 @@ module ProcessOut { "cvc-error-message": "O CVC é inválido", "cardholder-name-error-message": "O nome do titular do cartão é inválido", "payment-error-message": "Algo deu errado. Por favor, tente novamente.", + "payment-cancelled-message": "O pagamento foi cancelado.", "express-checkout-header": "Checkout expresso", "other-payment-methods-header": "Outros métodos de pagamento", "select-payment-method-label": "Selecionar método de pagamento", diff --git a/src/dynamic-checkout/payment-methods/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts index 9a154702..73988873 100644 --- a/src/dynamic-checkout/payment-methods/apm.ts +++ b/src/dynamic-checkout/payment-methods/apm.ts @@ -124,12 +124,23 @@ module ProcessOut { ) }, error => { - this.resetContainerHtml().appendChild( - new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) - .element, - ) - - DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + if (error.code === "customer.canceled") { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentCancelledView(this.processOutInstance, this.paymentConfig) + .element, + ) + + DynamicCheckoutEventsUtils.dispatchPaymentCancelledEvent({ + payment_method_name: apm.gateway_name, + }) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) + .element, + ) + + DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) + } }, actionHandlerOptions, this.paymentConfig.invoiceId, diff --git a/src/dynamic-checkout/references.ts b/src/dynamic-checkout/references.ts index 42041adc..43d220b0 100644 --- a/src/dynamic-checkout/references.ts +++ b/src/dynamic-checkout/references.ts @@ -16,6 +16,7 @@ /// /// /// +/// /// /// /// diff --git a/src/dynamic-checkout/utils/events.ts b/src/dynamic-checkout/utils/events.ts index 5188fd58..6d85697d 100644 --- a/src/dynamic-checkout/utils/events.ts +++ b/src/dynamic-checkout/utils/events.ts @@ -11,6 +11,7 @@ module ProcessOut { "processout_dynamic_checkout_no_dynamic_checkout_configuration", PAYMENT_ERROR: "processout_dynamic_checkout_payment_error", PAYMENT_SUCCESS: "processout_dynamic_checkout_payment_success", + PAYMENT_CANCELLED: "processout_dynamic_checkout_payment_cancelled", TRANSACTION_ERROR: "processout_dynamic_checkout_transaction_error", GOOGLE_PAY_LOAD_ERROR: "processout_dynamic_checkout_google_pay_load_error", APPLE_PAY_NEW_SESSION: "processout_dynamic_checkout_apple_pay_new_session", @@ -139,6 +140,13 @@ module ProcessOut { return window.dispatchEvent(event) } + static dispatchPaymentCancelledEvent(details: { payment_method_name: string }) { + const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_CANCELLED, { + details, + }) + + return window.dispatchEvent(event) + } static dispatchPaymentPendingEvent(token: string, details: { payment_method_name: string }) { const event = EventsUtils.createEvent(DYNAMIC_CHECKOUT_EVENTS.PAYMENT_PENDING, { diff --git a/src/dynamic-checkout/views/payment-cancelled.ts b/src/dynamic-checkout/views/payment-cancelled.ts new file mode 100644 index 00000000..946f7390 --- /dev/null +++ b/src/dynamic-checkout/views/payment-cancelled.ts @@ -0,0 +1,32 @@ +/// + +module ProcessOut { + export class DynamicCheckoutPaymentCancelledView { + public element: Element + + constructor(processOutInstance: ProcessOut, paymentConfig: DynamicCheckoutPaymentConfig) { + const [element, image, message] = HTMLElements.createMultipleElements([ + { + tagName: "div", + classNames: ["dco-card-payment-success"], + }, + { + tagName: "img", + classNames: ["dco-card-payment-success-image"], + attributes: { + src: processOutInstance.endpoint("js", PAYMENT_ERROR_IMAGE_ASSET), + }, + }, + { + tagName: "div", + classNames: ["dco-card-payment-error-text"], + textContent: Translations.getText("payment-cancelled-message", paymentConfig.locale), + }, + ]) + + this.element = element + + HTMLElements.appendChildren(element, [image, message]) + } + } +}