How to save a credit card in the user's wallet using Stripe

Booking API: How to save a credit card in the user's wallet using Stripe

1. User Register/Authentication

A user must register or authenticate to associate the credit card ID with a user created for purchase and get the user's wallet after submitting a credit card to Stripe.

1.1 Create the user: https://www.mytime.com/api/mkp/v1/docs#/User/post_users  

export COMPANY_ID= 

curl 'https://www.mytime.com/api/mkp/v1/users' \
 -H 'accept: application/json' \
 -H 'content-type: application/json' \
 -d "{\"company_id\":$COMPANY_ID,\"first_name\":\"Test\",\"last_name\":\"Test\",\"email\":\"test@mytime.com\",\"password\":\"123\",\"password_confirmation\":\"123\",\"phone_number\":\"\",\"country\":\"US\",\"zip_code\":\"94111\",\"send_welcome_email\":true,\"associate_client_id\":null,\"from_mkp\":true,\"recaptcha_token\":null}" > user.json

1.2 Create a session: https://www.mytime.com/api/mkp/v1/docs#/Session/post_sessions

export COMPANY_ID= 
export EMAIL= 
export PASSWORD= 

curl -X POST "https://www.mytime.com/api/mkp/v1/sessions" \
-H "accept: application/json" \
-H "Content-Type: application/json" \
-d "{ \"email\":$EMAIL, \"password\":$PASSWORD, \"company_id\":$COMPANY_ID }" > session.json

After login, the user will have information about their credit card stored on file from the API response:

{

    "user":{
       "id":8996,
       "email":"johngcc@testmail.com",
       "first_name":"john",
       "last_name":"gcc",
       "authentication_token":"zizwspX5X1Nby4bTp7kC",
       "phone_number":null,
       "created_at":"2024-11-20T11:29:42Z",
       "zip_code":"1232",
       "country":"AU",
       "errors":{},
       "bank_accounts":[],
       "credit_cards":[
          {
             "id":"cus_RFhf3QFmYuOL0f|pm_1QNCGJBb9dNaU75s5H5qvQXm",
             "last4":"4242",
             "name":null,
             "exp_month":12,
             "exp_year":2026,
             "brand":"Visa",
             "address_country":"US",
             "address_line1":null,
             "address_city":null,
             "address_state":null,
             "address_zip":null,
             "errors":{}
          }
       ]
    }
 }

From this example, since the user already has a credit card (the credit_cards array will be empty if not), the token that needs to be submitted upon purchase is "cus_RFhf3QFmYuOL0f|pm_1QNCGJBb9dNaU75s5H5qvQXm".

2. Add a card 

2.1 Get the stripeApiKey from company settings (https://www.mytime.com/api/mkp/v1/docs#/Company/get_companies__company_id)

e.g:

export COMPANY_ID=

curl -X GET "https://www.mytime.com/api/mkp/v1/companies/$COMPANY_ID" \
-H "accept: application/json" > company.json

export STRIPE_API_KEY= $(cat company.json | jq ".company.stripe_key")

2.2 Create a Stripe iFrame tag to load the credit card form

const queryParams = [
    `stripe_publishable_key=${STRIPE_API_KEY}`,
    `amount=${minStripeAllowedAmount}`,
    `currency=${currency}`,
    'creditCardsOnly=true',
    'isForFutureUsage=true',
    'notifyOnFormHeight=true',
  ];
const stripeHostedFormUrl = `/stripe_hosted_forms/card_entry?${queryParams.join('&')}`;

2.3 Add a listener to get the message from the iFrame

This step is essential to get information from the iframe once the credit card data is submitted.

window.addEventListener('message', handleIframeMessageEvent);

2.4 Parse the response and prepare the data to be sent to the credit card API

The handleIframeMessageEvent method will get the response. It will parse the response and prepare the data to be sent to the credit cards API (https://www.mytime.com/api/mkp/v1/docs#/CreditCard/post_user_credit_cards )

e.g:

const handleIframeMessageEvent = event => {
   const returnData = event.data;
  if (!returnData.isStripeCallback) {
    return null;
  }
  if (returnData.card) {
    if (errorFromIframe) {
      setErrorFromIframe('');
    }
    const creditCardParams = {
      company_id: company.id,
      location_id: Locations.selectedId,
      stripe_credit_card_token: returnData.id,
      token_data: {
        funding: returnData.card.funding,
        brand: returnData.card.brand,
        last4: returnData.card.last4,
        month: returnData.card.exp_month,
        year: returnData.card.exp_year,
      },
      token2: returnData.id,
      address_country: returnData.card.country,
      add_to_client: isCheckoutPage ? addToClient : true,
    };
    submitCreditCardHandler(creditCardParams);
  }
};

2.5 Save the card in the user’s wallet (https://www.mytime.com/api/mkp/v1/docs#/CreditCard/post_user_credit_cards)

After iFrame is posted, we will get some kind of token back, which needs to be used to call the credit cards endpoint from MyTime to s 

3. Replace a card (https://www.mytime.com/api/mkp/v1/docs#/CreditCard/post_user_credit_cards  ) 

Same as above
When you add a new card, the backend will replace the card.

4. Delete a card (https://www.mytime.com/api/mkp/v1/docs#/CreditCard/delete_user_credit_cards__id_)

To delete a credit card just call the delete endpoint with the card_id.This call may fail and return an error message that the card cannot be deleted because there is a pending appointment.

e.g:

export CARD_ID='cus_RO3ss9t....|pm_1QVIDvBb....'
export COMPANY_ID=
export AUTHORIZATION='Zhc7Buh...'

curl "https://www.mytime.com/api/mkp/v1/user/credit_cards/$CARD_ID?company_id=$COMPANY_ID" \
 -X "DELETE" \
 -H "accept: application/json" \
 -H "content-type: application/json" \
 -H "authorization: $AUTHORIZATION" | jq