Skip to content

Is there a client-side SDK for subscriptions?  #285

Open
@oshihirii

Description

@oshihirii

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:

glass_cage_of_emotion

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions