Is there a client-side SDK for subscriptions?

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

Hey there @oshihirii!

If you figured it out already, feel free to close this issue. In case you are still struggling, I'll try my best to help!

So from my understanding, you are trying to get the subscriptions sign-up functionality to work for your users. The web-payment SDK is just a simple way to take a payment on the client-side. You would still need a backend in order to make actual API calls to the square service. Reading through the tutorial you have linked, it seems like two different use-cases are being shown:

Customer with card on file signs up for a subscription: In that case, the payment token generated by the web-payment SDK can be use in the createCard API call to create a card on file. Once this card on file is created for the customer, you can sign them up for the subscription by using the card ID returned in the response. This will charge their card that was created using the web-payment SDK. In short, with this option you are using the web-payments SDK to get the payment token, but using your backend to make the additional API calls (with our server side SDK).
Customer with no card on file signs up for a subscription: In that case, you don't need a payment token. If you only plan to address this specific use-case, you probably don't need to use web-payment SDK at all. Once the subscription is created for that user, they will receive an invoice email (based on the email address provided to create their customer account) with a link to pay the invoice and complete the payment, using the Square-hosted invoice page. In order to make those API calls though, you will need to set up a backend, because like you mentioned, there is only a server-side SDK to deal with those APIs.

I hope this helps, if not please feel free to reach out again!. In general though, I'd recommend reaching out in the forums or our support slack channel: https://developer.squareup.com/forums/ https://squ.re/2Hks3YE

square / connect-api-examples

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