From 20ee798f28ee9d31ad2f916833cf46b637fb7779 Mon Sep 17 00:00:00 2001 From: Douglas Lise Date: Fri, 28 Jul 2023 14:49:33 -0300 Subject: [PATCH] Unify Alternative Payment Methods examples --- .../alternative-payment-methods/boleto.html | 175 ------------------ .../completed.html | 2 +- public/alternative-payment-methods/ideal.html | 175 ------------------ public/alternative-payment-methods/index.html | 71 +++++++ public/alternative-payment-methods/index.js | 130 +++++++++++++ public/index.html | 3 +- public/style.css | 2 +- 7 files changed, 204 insertions(+), 354 deletions(-) delete mode 100644 public/alternative-payment-methods/boleto.html delete mode 100644 public/alternative-payment-methods/ideal.html create mode 100644 public/alternative-payment-methods/index.html create mode 100644 public/alternative-payment-methods/index.js diff --git a/public/alternative-payment-methods/boleto.html b/public/alternative-payment-methods/boleto.html deleted file mode 100644 index 8793825..0000000 --- a/public/alternative-payment-methods/boleto.html +++ /dev/null @@ -1,175 +0,0 @@ - - - - - - Recurly.js Example: Minimal Billing Information - - - - - - - - - -
-
-

- $10 - monthly -

-
- -
- -
-
- - -
- - -
- -
- - -
- -
-
- Loading payment methods... -
-
- - - - -
-
-
- - - - - diff --git a/public/alternative-payment-methods/completed.html b/public/alternative-payment-methods/completed.html index e0f83f5..aae6593 100644 --- a/public/alternative-payment-methods/completed.html +++ b/public/alternative-payment-methods/completed.html @@ -14,7 +14,7 @@

Thank you

Transaction status in Recurly was completed with status "".

- Back to home + Back to Alternative Payment Methods - - - - - - - - -
-
-

- $10 - monthly -

-
- -
- -
-
- - -
- - -
- -
- - -
- -
-
- Loading payment methods... -
-
- - - - -
-
-
- - - - - diff --git a/public/alternative-payment-methods/index.html b/public/alternative-payment-methods/index.html new file mode 100644 index 0000000..55afa65 --- /dev/null +++ b/public/alternative-payment-methods/index.html @@ -0,0 +1,71 @@ + + + + + + Recurly.js Example: Minimal Billing Information + + + + + + + + + + +
+
+

+ $10 + monthly +

+
+ +
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + + + +
+
+
+ + + diff --git a/public/alternative-payment-methods/index.js b/public/alternative-payment-methods/index.js new file mode 100644 index 0000000..d8df02c --- /dev/null +++ b/public/alternative-payment-methods/index.js @@ -0,0 +1,130 @@ +function configPaymentMethods() { + const options = { + publicKey: window.recurlyConfig.publicKey, + api: window.recurlyConfig.api, + } + + const paymentMethodsContainerSelector = "#payment-methods-container"; + + const oldContainer = document.querySelector(paymentMethodsContainerSelector); + const newContainer = oldContainer.cloneNode(false); + oldContainer.parentElement.replaceChild(newContainer, oldContainer); + + recurly.configure(options); + + if (recurly.AlternativePaymentMethods) { + const returnURL = new URL(window.location.href) + returnURL.pathname = returnURL.pathname.replace('index.html', 'completed.html') + + const paymentMethod = recurly.AlternativePaymentMethods({ + allowedPaymentMethods: [ + "boleto", "ideal", "sofort" + ], + blockedPaymentMethods: [], + containerSelector: paymentMethodsContainerSelector, + amount: 10, + currency: document.querySelector('#currency').value, + countryCode: document.querySelector('#country').value, + locale: "en-US", + channel: "Web", + adyen: { + publicKey: window.adyenConfig.publicKey, + env: "test", + showPayButton: false, + componentConfig: {} + }, + returnURL: returnURL.toString(), + }); + + paymentMethod.on('error', function (err) { + console.error(err); + }); + + paymentMethod.on('token', function (token) { + document.querySelector('[data-recurly=token]').value = token.id; + const form = document.querySelector('form') + + fetch(form.action, { + method: form.method, + body: new FormData(form), + }) + .then(response => response.json()) + .then(data => { + console.log({ data }) + if (data.error) { + alert(data.error); + } else if (data.action_result) { + paymentMethod.handleAction(data.action_result) + } + }) + .catch(err => { + console.error(err); + error(err); + }); + }); + + paymentMethod.on('valid', function (valid) { + console.log('form valid: ', valid); + }); + + document.querySelector('#payment-methods-pay').addEventListener('click', function () { + paymentMethod.submit(); + }); + + paymentMethod.start(); + } +} + +function error(err) { + document.querySelector('#errors').textContent = 'The following fields appear to be invalid: ' + err.fields.join(', '); + document.querySelectorAll('button').disabled = false; + + err.fields.forEach(function (field) { + document.querySelector('[data-recurly=' + field + ']').classList.add('error'); + }); +} + +window.addEventListener('load', function () { + const form = document.querySelector('form') + form.addEventListener('submit', function (event) { + event.preventDefault(); + + // Reset the errors display + document.querySelectorAll('input').forEach(input => input.classList.remove('error')); + + // Now we call recurly.token with the form. It goes to Recurly servers + // to tokenize the credit card information, then injects the token into the + // data-recurly="token" field above + // recurly.token(elements, form, function (err, token) { + + // send any errors to the error function below + // if (err) error(err); + + // Otherwise we continue with the form submission + // else form.submit(); + + //}); + }); + + configPaymentMethods(); + + + document.querySelector('#country').addEventListener('change', function (e) { + const currencyCountries = { + NL: 'EUR', + DE: 'EUR', + BR: 'BRL', + GB: 'GBP', + CH: 'CHF', + US: 'USD', + } + + document.querySelector('#currency').value = currencyCountries[e.target.value]; + configPaymentMethods(); + }); + + document.querySelector('#currency').addEventListener('change', function () { + configPaymentMethods(); + }); + +}) diff --git a/public/index.html b/public/index.html index 630c5c4..91c158f 100644 --- a/public/index.html +++ b/public/index.html @@ -40,8 +40,7 @@

Examples

  • Google Pay
  • Google Pay shipping with direct tax
  • Auto-tabbing
    • -
  • Alternative Payment Methods - Boleto
    • -
  • Alternative Payment Methods - iDEAL
    • +
  • Alternative Payment Methods
    • diff --git a/public/style.css b/public/style.css index bbd6bb7..56563f1 100644 --- a/public/style.css +++ b/public/style.css @@ -62,7 +62,7 @@ input[type="text"], input[type="email"], select { display: block; } -input:focus { +input:focus, select:focus { border-color: currentColor; color: #2C0730; }