39 lines
1.4 KiB
JavaScript
39 lines
1.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Fetch the list of subscriptions for this customer.
|
|
const {subscriptions} = await fetch('/subscriptions').then((r) => r.json());
|
|
|
|
// Construct and display each subscription, its status, last4 of the card
|
|
// used, and the current period end.
|
|
const subscriptionsDiv = document.querySelector('#subscriptions');
|
|
console.log(subscriptions);
|
|
subscriptionsDiv.innerHTML = subscriptions.data.map((subscription) => {
|
|
console.log(subscription);
|
|
let last4 = subscription.default_payment_method?.card?.last4 || '';
|
|
return `
|
|
<hr>
|
|
<h4>
|
|
<a href="https://dashboard.stripe.com/test/subscriptions/${subscription.id}">
|
|
${subscription.id}
|
|
</a>
|
|
</h4>
|
|
|
|
<p>
|
|
Status: ${subscription.status}
|
|
</p>
|
|
|
|
<p>
|
|
Card last4: ${last4}
|
|
</p>
|
|
<small>If the last4 is blank, ensure webhooks are being handled. The default payment method is set in the webhook handler.</small>
|
|
|
|
<p>
|
|
Current period end: ${new Date(subscription.current_period_end * 1000)}
|
|
</p>
|
|
|
|
<a href="change-payment-method.html?subscription=${subscription.id}"> Update payment method </a><br />
|
|
<a href="change-plan.html?subscription=${subscription.id}"> Change plan </a><br />
|
|
<a href="cancel.html?subscription=${subscription.id}"> Cancel </a><br />
|
|
`;
|
|
}).join('<br />');
|
|
});
|