Description
I am trying to allow users to sign up for a subscription on a website.
I can see there is a server-side
SDK for Node.js
here:
https://github.com/square/square-nodejs-sdk
And so I went looking for a related client-side
SDK which led me to this:
https://developer.squareup.com/reference/sdks/web/payments
I was following the process there and got to the point where I got a payment token
returned from:
Square.payments(applicationId, locationId).card().tokenize()
After entering test card details, ie:
Number: 4111 1111 1111 1111
Expiration: 01/22
Security Code: 123
Zip Code: 12345
See: https://developer.squareup.com/reference/sdks/web/payments/objects/Card#Card.tokenize
But then I got lost when referring to:
https://developer.squareup.com/docs/subscriptions-api/walkthrough#step-3-create-subscriptions
As it doesn't seem to mention a payment token
at all.
I am fearing that the Web Payments SDK
is not related to subscriptions at all?
If that is the case, is there a client-side SDK for subscriptions?
It looks like someone else was having the same confusion here:
https://developer.squareup.com/forums/t/front-end-code-subscriptions-api/2659
But I couldn't figure out what the resolution was there - as the square support person referred back to the Web Payments SDK
.
Below is where I got up to using the Web Payments SDK
:
HTML - index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
<script src="index.js" defer></script>
</head>
<body>
<form id="square_payment_form">
<div id="square_card_container"></div>
<button id="square_card_pay_button" type="button">
click to get payment token
</button>
</form>
</body>
</html>
JavaScript - index.js
async function main() {
const payments = Square.payments(
'application-id',
'location-id'
);
const card = await payments.card();
await card.attach('#square_card_container');
async function myClickHandler(event) {
event.preventDefault();
try {
const result = await card.tokenize();
console.log('result is: ');
console.log(result);
if (result.status === 'OK') {
console.log(`Payment token is ${result.token}`);
console.log(` WHAT DO I DO WITH THE PAYMENT TOKEN? `);
}
} catch (e) {
console.error(e);
}
}
const cardButton = document.getElementById('square_card_pay_button');
cardButton.addEventListener('click', myClickHandler);
}
main();
Thanks for help, I am in a glass case of emotion right now: