How to use the SDK with Subscriptions?

[Bullrich]

How can I use the SDK for subscriptions (ideally Subscription with an associated plan but I'll also take without an associated plan)

Is there any minimal example I could see? I have been looking into the docs but I don't find any reference to this.

Any example I use would be greatly appreciated!

Thanks!

[Bullrich]

Some updates on my current implementation:

I currently have the following code, which is not working:

Front end form generator

    const mp = new MercadoPago('TEST-ABCDEF', {
          locale: 'en'
        });
        const bricksBuilder = mp.bricks();
        const renderCardPaymentBrick = async (bricksBuilder) => {
          const settings = {
            initialization: {
              amount: 100, // total amount to be paid
              payer: {
                email: "",
              },
            },
            customization: {
              visual: {
                style: {
                  customVariables: {
                    theme: 'default', // | 'dark' | 'bootstrap' | 'flat'
                  }
                }
              },
                paymentMethods: {
                  maxInstallments: 1,
                }
            },
            callbacks: {
              onReady: () => {
                console.log("ON READY!")
                // callback called when the Brick is ready
              },
              onSubmit: (cardFormData) => {
                console.log("CARD FORM DATA", cardFormData);  
                //  callback called when the user clicks on the submit data button
                //  example of sending the data collected by our Brick to your server
                return new Promise((resolve, reject) => {
                  fetch("/api/payment/", {
                    method: "PUT",
                    headers: {
                      "Content-Type": "application/json",
                    },
                    body: JSON.stringify(cardFormData)
                  })
                    .then((response) => {
                      // receive payment result
                      resolve();
                    })
                    .catch((error) => {
                      // handle error response when trying to create payment
                      reject();
                    })
                });
              },
              onError: (error) => {
                // callback called to all error cases related to the Brick
              },
            },
          };
          window.cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
        };
        renderCardPaymentBrick(bricksBuilder);
  });

Backend code

  const body: PaymentData = await request.json();

  console.log("Received payment data", body);
  // TODO: Set this value dynamically
  const planId = "ABCDEF";

  const mepaBody = {
    preapproval_plan_id: planId,
    reason: "Test subscription",
    external_reference: "YG-1234",
    payer_email: body.payer.email,
    card_token_id: body.token,
    auto_recurring: {
      frequency: 1,
      frequency_type: "months",
      start_date: "2020-06-02T13:07:14.260Z",
      transaction_amount: 20,
      currency_id: "ARS"
    },
    back_url: "https://www.mercadopago.com.ar",
    status: "authorized"
  };
  const postRequest = await axios.post("https://api.mercadopago.com/preapproval", mepaBody, { headers: { Authorization: "Bearer TEST-ABCDEFGH" } })

  console.log(postRequest);

I'm trying with a test card, which properly generates the token id, but it is failing when I call the backend code with {"message":"Card token service not found","status":404}.

Am I missing anything here?

[danielen-meli]

Hello @Bullrich!

We have an official channel that is super prepared to solve your case quickly.
You can consult our page were are a documentation about subscriptions - https://www.mercadopago.com.br/developers/en/docs/subscriptions/integration-configuration/subscription-associated-plan.
So, if the error still persists, gather all the information and go to the following link to share the issue with us:
https://www.mercadopago.com/developers/pt/support/center/contact
Thank you very much for your contact!

[Bullrich]

Hello @danielen-meli!

I already asked there, but unfortunately they don't give me an answer regarding the sdk-js.

Do you have any working examples on how to use the sdk-js with the subscription system?

A working example would be very useful for me, and would also be a great reference point for other people in the future who would encounter the same problem.

I know that @fedefrei managed to make it work in his comment, but, unfortunately, I have not seen any kind of example with this.

Thank you, I'm looking forward to your answer!

[AleFossati]

Hello @Bullrich, we can't exactly show you how to create a subscription with sdk-js because this sdk is a frontend product so the subscription creation is not done using it.

The flow is something like this:

• Frontend: Use the sdk-js with CardPayment Brick to generate the token
• Frontend: Send this token to backend (along with other relevant information obtained from the frontend)
• Backend: Use the obtained data to create your subscription. For this step, you can make a http request just like you did or use our Mercado Pago backend SDKs.

I can see that you have already opened a new discussion at our NodeJS SDK, so my suggestion is to wait their response to understand what might be going wrong at the backend side of your integration.

Let us know if that is anything else we can assist you.