This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the workflows category.
Last Updated: 2024-04-19
I had the following bit of code in the React Native app for Project S and it
wasn't working. It just froze. What's more, not even console.log worked so
things were opaque.
export function stripeCheckoutRedirectHTML(paymentDetails) {
if (!paymentDetails.userId) {
throw new Error('Requires a userId');
}
if (!paymentDetails.items || paymentDetails.items.length === 0) {
throw new Error('Requires at least one item with an sku SKU property');
}
return `
<html>
<body>
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>
<h1>Loading payment provider in security window...</h1>
<div id="error-message"></div>
<script>
console.log('Inside script')
(function () {
var stripe = Stripe('${env.stripePublicKey}');
window.onload = function () {
console.log("Window loaded");
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: ${paymentDetails.items},
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: '${paymentSuccessUrl}',
cancelUrl: '${paymentCancelledUrl}',
clientReferenceId: '${paymentDetails.userId}'
}).then(function (result) {
if (result.error) {
// If redirectToCheckout fails due to a browser or network
// error, display the localized error message to your customer
// using the error div above.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
};
})();
</script>
</body>
</html>
`;
}
The trick, workflow-wise, was to log all this generated HTML, put it in a HTML file saved
to my /tmp directory, then view that file in both VIM and the browser. I
learned by doing this that there were various errors, such as:
items array was [Object object]. I should have used JSON.stringifyComparatively, it was impossible to debug this within my emulator/editor configured for React Native.
I had similar experiences dealing with large SQL queries generated in python etc. Rather than working with them as bits of Pythonn strings, create SQL files and lean on the editor's highlighting and formatting to read the code.