Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updating ach example #218

Merged
merged 5 commits into from
Oct 18, 2023
Merged

Updating ach example #218

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7866dd9
chore: updating ach example
abhipillai Sep 12, 2023
0faf06b
adding checkpoint 2
abhipillai Oct 18, 2023
f8dea88
lint fix
abhipillai Oct 18, 2023
9eaf700
pr review
abhipillai Oct 18, 2023
d012acb
removing async keyword
abhipillai Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 39 additions & 50 deletions public/examples/ach.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,6 @@
const appId = '{APPLICATION_ID}';
const locationId = '{LOCATION_ID}';

async function initializeCard(payments) {
const card = await payments.card();
await card.attach('#card-container');

return card;
}

async function initializeACH(payments) {
const ach = await payments.ach();
// Note: ACH does not have an .attach(...) method
Expand Down Expand Up @@ -48,19 +41,31 @@
}

async function tokenize(paymentMethod, options = {}) {
const tokenResult = await paymentMethod.tokenize(options);
if (tokenResult.status === 'OK') {
return tokenResult.token;
} else {
let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
if (tokenResult.errors) {
errorMessage += ` and errors: ${JSON.stringify(
tokenResult.errors
)}`;
paymentMethod.addEventListener(
'ontokenization',
async function (event) {
const { tokenResult, error } = event.detail;
if (error !== undefined) {
let errorMessage = `Tokenization failed with error: ${error}`;
throw new Error(errorMessage);
}
if (tokenResult.status === 'OK') {
const paymentResults = await createPayment(tokenResult.token);
displayPaymentResults('SUCCESS');

console.debug('Payment Success', paymentResults);
} else {
let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
if (tokenResult.errors) {
errorMessage += ` and errors: ${JSON.stringify(
tokenResult.errors
)}`;
}
throw new Error(errorMessage);
}
}

throw new Error(errorMessage);
}
);
paymentMethod.tokenize(options);
}

// status is either SUCCESS or FAILURE;
Expand Down Expand Up @@ -93,7 +98,11 @@
const billingContact = getBillingContact(form);
const accountHolderName = `${billingContact.givenName} ${billingContact.familyName}`;

return { accountHolderName };
return {
accountHolderName,
intent: 'CHARGE',
total: { amount: 100, currencyCode: 'USD' },
};
}

document.addEventListener('DOMContentLoaded', async function () {
Expand All @@ -113,14 +122,6 @@
return;
}

let card;
try {
card = await initializeCard(payments);
} catch (e) {
console.error('Initializing Card failed', e);
return;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for removing the card flow from this example. It just muddles up the example as is.

let ach;
try {
ach = await initializeACH(payments);
Expand All @@ -137,33 +138,24 @@
event.preventDefault();

try {
// disable the submit button as we await tokenization and make a payment request.
cardButton.disabled = true;
achButton.disabled = true;
const token = await tokenize(paymentMethod, options);
const paymentResults = await createPayment(token);
displayPaymentResults('SUCCESS');

console.debug('Payment Success', paymentResults);
tokenize(paymentMethod, options);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know ACH relies mostly on the event listener, but I feel like this should still be awaited..?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All the errors will now be captured via the listener so we don't need to await this anymore.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, the async keyword should be removed from the tokenize() method definition on line 50.

} catch (e) {
cardButton.disabled = false;
achButton.disabled = false;
displayPaymentResults('FAILURE');
console.error(e.message);
}
}

const cardButton = document.getElementById('card-button');
cardButton.addEventListener('click', async function (event) {
await handlePaymentMethodSubmission(event, card);
});

const achButton = document.getElementById('ach-button');
achButton.addEventListener('click', async function (event) {
const paymentForm = document.getElementById('payment-form');
const achOptions = getACHOptions(paymentForm);
await handlePaymentMethodSubmission(event, ach, achOptions);
});
// Checkpoint 2.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This checkpoint is directly at odds with the idea of this example being completely focused on ACH and ACH alone, I think checkpoint 1 was the card example. We should pick a lane here - each payment method is independent, or the examples build on each other.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good callout

if (ach) {
const achButton = document.getElementById('ach-button');
achButton.addEventListener('click', async function (event) {
const paymentForm = document.getElementById('payment-form');
const achOptions = getACHOptions(paymentForm);
await handlePaymentMethodSubmission(event, ach, achOptions);
});
}
});
</script>
</head>
Expand Down Expand Up @@ -193,9 +185,6 @@
/>
</fieldset>
<button id="ach-button" type="button">Pay with Bank Account</button>

<div id="card-container"></div>
<button id="card-button" type="button">Pay $1.00</button>
</form>
<div id="payment-status-container"></div>
</body>
Expand Down
Loading