diff --git a/examples/dynamic-checkout/index.html b/examples/dynamic-checkout/index.html index dc5f39fb..a22ae86c 100644 --- a/examples/dynamic-checkout/index.html +++ b/examples/dynamic-checkout/index.html @@ -11,7 +11,7 @@ document.addEventListener("DOMContentLoaded", function () { // You need to replace these values with your own const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN" - const invoiceId = "iv_36LHtCq6bNj5JR3yggvgO4cSjR6XGBNB" + const invoiceId = "iv_36NWNCq6bNv4SIQ0vHjXXXpZIuMKb0sM" const clientSecret = "" const client = new ProcessOut.ProcessOut(projectId) diff --git a/package.json b/package.json index a7a9a365..472ab187 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "processout.js", - "version": "1.6.4", + "version": "1.6.5", "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/clients/apple-pay.ts b/src/dynamic-checkout/clients/apple-pay.ts index 1ba0ea5f..dc284ca6 100644 --- a/src/dynamic-checkout/clients/apple-pay.ts +++ b/src/dynamic-checkout/clients/apple-pay.ts @@ -134,6 +134,11 @@ module ProcessOut { new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + getViewContainer().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ @@ -147,6 +152,11 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + getViewContainer().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) diff --git a/src/dynamic-checkout/clients/google-pay.ts b/src/dynamic-checkout/clients/google-pay.ts index 4621a62f..026b1762 100644 --- a/src/dynamic-checkout/clients/google-pay.ts +++ b/src/dynamic-checkout/clients/google-pay.ts @@ -136,6 +136,13 @@ module ProcessOut { this.paymentConfig, ).element, ) + } else { + getViewContainer().appendChild( + new DynamicCheckoutPaymentInfoView( + this.processOutInstance, + this.paymentConfig, + ).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ @@ -151,6 +158,13 @@ module ProcessOut { this.paymentConfig, ).element, ) + } else { + getViewContainer().appendChild( + new DynamicCheckoutPaymentInfoView( + this.processOutInstance, + this.paymentConfig, + ).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) diff --git a/src/dynamic-checkout/config/payment-config.ts b/src/dynamic-checkout/config/payment-config.ts index 235d27d1..d43e6cbf 100644 --- a/src/dynamic-checkout/config/payment-config.ts +++ b/src/dynamic-checkout/config/payment-config.ts @@ -30,7 +30,6 @@ module ProcessOut { constructor(config: DynamicCheckoutPublicConfigType) { this.setInitialConfig(config) - console.log(this.showStatusMessage) } public getConfig(): DynamicCheckoutPublicConfigType & DynamicCheckoutInternalConfigType { diff --git a/src/dynamic-checkout/locales/en.ts b/src/dynamic-checkout/locales/en.ts index ca1ac608..852d440f 100644 --- a/src/dynamic-checkout/locales/en.ts +++ b/src/dynamic-checkout/locales/en.ts @@ -20,6 +20,7 @@ module ProcessOut { "other-payment-methods-header": "Other payment methods", "select-payment-method-label": "Select payment method", "payment-success-message": "This payment is completed.", + "payment-info-message": "We are processing your payment. You can now close this window.", "payment-error-generic-message": "We were unable to process your payment.", "street1-label": "Address line 1", "street2-label": "Address line 2", diff --git a/src/dynamic-checkout/locales/es.ts b/src/dynamic-checkout/locales/es.ts index a86a30df..24527694 100644 --- a/src/dynamic-checkout/locales/es.ts +++ b/src/dynamic-checkout/locales/es.ts @@ -20,6 +20,7 @@ module ProcessOut { "other-payment-methods-header": "Otros métodos de pago", "select-payment-method-label": "Seleccionar método de pago", "payment-success-message": "Este pago se ha completado.", + "payment-info-message": "Estamos procesando su pago. Puede cerrar esta ventana.", "payment-error-generic-message": "No pudimos procesar su pago.", "street1-label": "Dirección, línea 1", "street2-label": "Dirección, línea 2", diff --git a/src/dynamic-checkout/locales/fr.ts b/src/dynamic-checkout/locales/fr.ts index 7f3b3e97..a3a3bde8 100644 --- a/src/dynamic-checkout/locales/fr.ts +++ b/src/dynamic-checkout/locales/fr.ts @@ -20,6 +20,8 @@ module ProcessOut { "other-payment-methods-header": "Autres méthodes de paiement", "select-payment-method-label": "Sélectionner un méthode de paiement", "payment-success-message": "Ce paiement a été effectué avec succès.", + "payment-info-message": + "Nous travaillons sur votre paiement. Vous pouvez maintenant fermer cette fenêtre.", "payment-error-generic-message": "Nous n'avons pas pu traiter votre paiement.", "street1-label": "Adresse, ligne 1", "street2-label": "Adresse, ligne 2", diff --git a/src/dynamic-checkout/locales/pl.ts b/src/dynamic-checkout/locales/pl.ts index 5bbfcb96..5738aaa1 100644 --- a/src/dynamic-checkout/locales/pl.ts +++ b/src/dynamic-checkout/locales/pl.ts @@ -20,6 +20,7 @@ module ProcessOut { "other-payment-methods-header": "Inne metody płatności", "select-payment-method-label": "Wybierz metodę płatności", "payment-success-message": "Płatność została zakończona pomyślnie.", + "payment-info-message": "Przetwarzamy Twoją płatność. Możesz teraz zamknąć tę okno.", "payment-error-generic-message": "Nie udało nam się przetworzyć Twojej płatności.", "street1-label": "Adres, linia 1", "street2-label": "Adres, linia 2", diff --git a/src/dynamic-checkout/locales/pt.ts b/src/dynamic-checkout/locales/pt.ts index 893405e3..54bc244a 100644 --- a/src/dynamic-checkout/locales/pt.ts +++ b/src/dynamic-checkout/locales/pt.ts @@ -20,6 +20,8 @@ module ProcessOut { "other-payment-methods-header": "Outros métodos de pagamento", "select-payment-method-label": "Selecionar método de pagamento", "payment-success-message": "Este pagamento foi concluído.", + "payment-info-message": + "Estamos processando seu pagamento. Você pode agora fechar esta janela.", "payment-error-generic-message": "Não conseguimos processar o seu pagamento.", "street1-label": "Endereço, linha 1", "street2-label": "Endereço, linha 2", diff --git a/src/dynamic-checkout/payment-methods/apm.ts b/src/dynamic-checkout/payment-methods/apm.ts index f5a0e799..e62b1783 100644 --- a/src/dynamic-checkout/payment-methods/apm.ts +++ b/src/dynamic-checkout/payment-methods/apm.ts @@ -110,6 +110,11 @@ module ProcessOut { new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId) @@ -183,6 +188,13 @@ module ProcessOut { this.paymentConfig, ).element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView( + this.processOutInstance, + this.paymentConfig, + ).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId) @@ -195,6 +207,13 @@ module ProcessOut { this.paymentConfig, ).element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView( + this.processOutInstance, + this.paymentConfig, + ).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) @@ -208,6 +227,11 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) @@ -222,6 +246,11 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) diff --git a/src/dynamic-checkout/payment-methods/card.ts b/src/dynamic-checkout/payment-methods/card.ts index 8b6dad7d..11c975ac 100644 --- a/src/dynamic-checkout/payment-methods/card.ts +++ b/src/dynamic-checkout/payment-methods/card.ts @@ -146,6 +146,10 @@ module ProcessOut { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentSuccessView(this.procesoutInstance, this.paymentConfig).element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ @@ -159,6 +163,10 @@ module ProcessOut { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentErrorView(this.procesoutInstance, this.paymentConfig).element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) diff --git a/src/dynamic-checkout/payment-methods/native-apm.ts b/src/dynamic-checkout/payment-methods/native-apm.ts index 17b340a3..5386344e 100644 --- a/src/dynamic-checkout/payment-methods/native-apm.ts +++ b/src/dynamic-checkout/payment-methods/native-apm.ts @@ -68,6 +68,10 @@ module ProcessOut { new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ @@ -82,6 +86,10 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(e) diff --git a/src/dynamic-checkout/payment-methods/saved-apm.ts b/src/dynamic-checkout/payment-methods/saved-apm.ts index 02cff69d..94037a6b 100644 --- a/src/dynamic-checkout/payment-methods/saved-apm.ts +++ b/src/dynamic-checkout/payment-methods/saved-apm.ts @@ -125,6 +125,11 @@ module ProcessOut { this.paymentConfig, ).element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent(invoiceId) @@ -135,6 +140,11 @@ module ProcessOut { new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig) + .element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) diff --git a/src/dynamic-checkout/payment-methods/saved-card.ts b/src/dynamic-checkout/payment-methods/saved-card.ts index 800ed187..cb47f66d 100644 --- a/src/dynamic-checkout/payment-methods/saved-card.ts +++ b/src/dynamic-checkout/payment-methods/saved-card.ts @@ -109,6 +109,10 @@ module ProcessOut { new DynamicCheckoutPaymentSuccessView(this.processOutInstance, this.paymentConfig) .element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentSuccessEvent({ @@ -122,6 +126,10 @@ module ProcessOut { this.resetContainerHtml().appendChild( new DynamicCheckoutPaymentErrorView(this.processOutInstance, this.paymentConfig).element, ) + } else { + this.resetContainerHtml().appendChild( + new DynamicCheckoutPaymentInfoView(this.processOutInstance, this.paymentConfig).element, + ) } DynamicCheckoutEventsUtils.dispatchPaymentErrorEvent(error) diff --git a/src/dynamic-checkout/references.ts b/src/dynamic-checkout/references.ts index 43d220b0..7c7db413 100644 --- a/src/dynamic-checkout/references.ts +++ b/src/dynamic-checkout/references.ts @@ -5,6 +5,7 @@ /// /// /// +/// /// /// /// diff --git a/src/dynamic-checkout/views/payment-info.ts b/src/dynamic-checkout/views/payment-info.ts new file mode 100644 index 00000000..fd48b3ac --- /dev/null +++ b/src/dynamic-checkout/views/payment-info.ts @@ -0,0 +1,25 @@ +/// + +module ProcessOut { + export class DynamicCheckoutPaymentInfoView { + public element: Element + + constructor(processOutInstance: ProcessOut, paymentConfig: DynamicCheckoutPaymentConfig) { + const [element, message] = HTMLElements.createMultipleElements([ + { + tagName: "div", + classNames: ["dco-card-payment-success"], + }, + { + tagName: "p", + classNames: ["dco-card-payment-success-text"], + textContent: Translations.getText("payment-info-message", paymentConfig.locale), + }, + ]) + + HTMLElements.appendChildren(element, [message]) + + this.element = element + } + } +}