skip to Main Content
  • Blog
  • How to Save Your Customer Details During the Checkout Process

How to Save Your Customer Details During the Checkout Process

save card details checkout

Capture user details while they are checking out on your website

The relationship between you and your customer is vital for your business growth. The ability to help your customer save and store card information with you can improve return visits and future checkout experiences for a customer. Using the Save Card Details page can help capture your customer’s card information with a unique customer ID, so they won’t have to keep inputting their login info each time they make a purchase on your website. 

In the case where your customer is making a purchase with a new card, the ability to save their card during the checkout process is helpful for a smooth workflow while capturing user data. 

You can present a “save card” checkbox while the customer completes their payment details in checkout. You will generate a customer ID starting with cus_ and use save_card_default to include a filled “save card” checkbox as described in Create Checkout Page.

Capturing your customer details during their checkout process can be a vital tool to save time for future purchases using the same card. You can follow the steps below to save your customer details during the checkout process. 

  1. Create a Wallet 

         In the response, you will get a Wallet ID similar to ewallet_7b1af2d0bd68d88dafa4f8285a3e0efb

2. Create Customer

        In the response, you will get a Customer ID similar to cus_4bf44cad8bd767a6e450859ec08fc6bc

In this workflow you may have created an account for a customer, or the customer may have previously completed a purchase in which case the customer ID is returned in the webhook. 

Create Hosted Checkout Page with customer ID and save_card_default

In your parameters to generate a Hosted Checkout Page, be sure to include   “save_card_default”:true

Request

“amount”: 425.00,

   “complete_payment_url”: “http://example.com/complete”,

   “country”: “SG”,

   “currency”: “SGD”,

   “customer”: “cus_4bf44cad8bd767a6e450859ec08fc6bc”,

   “error_payment_url”: “http://example.com/error”,

   “merchant_reference_id”: “950ae8c6-78”,

   “cardholder_preferred_currency”: true,

   “language”: “en”,

   “metadata”: {

       “merchant_defined”: true

   },

   “payment_method_types_include”: [

   ],

   “expiration”: 1647667958,

   “payment_method_types_exclude”: [],

     “custom_elements”: {

        “save_card_default”:true

     }

}

Response

{

   “status”: {

       “error_code”: “”,

       “status”: “SUCCESS”,

       “message”: “”,

       “response_code”: “”,

       “operation_id”: “ecc1d3d8-e727-403f-9cfe-da2397f19b38”

   },

   “data”: {

       “id”: “checkout_29a65cce75a184f312604b2a95efe9f1”,

       “status”: “NEW”,

       “language”: “en”,

       “merchant_color”: “323fff”,

       “merchant_logo”: null,

       “merchant_website”: “http://rapyd.net”,

       “merchant_customer_support”: {

           “url”: “http://support.rapyd.net”,

           “email”: “support@rapyd.net”,

           “phone_number”: “555-555-5555”

       },

       “merchant_alias”: “Test Business”,

       “merchant_terms”: null,

       “merchant_privacy_policy”: null,

       “page_expiration”: 1648765975,

       “redirect_url”: “https://sandboxcheckout.rapyd.net?token=checkout_29a65cce75a184f312604b2a95efe9f1”,

       “region”: null,

       “geo_country”: null,

       “merchant_main_button”: “place_your_order”,

       “cancel_checkout_url”: “http://rapyd.net”,

       “complete_checkout_url”: “http://rapyd.net”,

       “country”: “SG”,

       “currency”: “SGD”,

       “amount”: 425,

       “payment”: {

           “id”: null,

           “amount”: 425,

           “original_amount”: 0,

           “is_partial”: false,

           “currency_code”: “SGD”,

           “country_code”: “SG”,

           “status”: null,

           “description”: “Payment via Checkout”,

           “merchant_reference_id”: “950ae8c6-78”,

           “customer_token”: “cus_4bf44cad8bd767a6e450859ec08fc6bc”,

           “payment_method”: null,

           “payment_method_data”: {},

           “expiration”: 1647667958,

           “captured”: false,

           “refunded”: false,

           “refunded_amount”: 0,

           “receipt_email”: null,

           “redirect_url”: null,

           “complete_payment_url”: “http://example.com/complete”,

           “error_payment_url”: “http://example.com/error”,

           “receipt_number”: null,

           “flow_type”: null,

           “address”: null,

           “statement_descriptor”: null,

           “transaction_id”: null,

           “created_at”: 0,

           “updated_at”: 0,

           “metadata”: {

               “merchant_defined”: true

           },

           “failure_code”: null,

           “failure_message”: null,

           “paid”: false,

           “paid_at”: 0,

           “dispute”: null,

           “refunds”: null,

           “order”: null,

           “outcome”: null,

           “visual_codes”: {},

           “textual_codes”: {},

           “instructions”: {},

           “ewallet_id”: null,

           “ewallets”: [],

           “payment_method_options”: {},

           “payment_method_type”: null,

           “payment_method_type_category”: null,

           “fx_rate”: null,

           “merchant_requested_currency”: null,

           “merchant_requested_amount”: null,

           “fixed_side”: null,

           “payment_fees”: null,

           “invoice”: null,

           “escrow”: null,

           “group_payment”: null,

           “cancel_reason”: null,

           “initiation_type”: “customer_present”,

           “mid”: null,

           “next_action”: “not_applicable”

       },

       “payment_method_type”: null,

       “payment_method_type_categories”: null,

       “payment_method_types_include”: [],

       “payment_method_types_exclude”: [],

       “customer”: “cus_4bf44cad8bd767a6e450859ec08fc6bc”,

       “custom_elements”: {

           “save_card_default”: true,

           “display_description”: false,

           “payment_fees_display”: true,

           “merchant_currency_only”: false,

           “billing_address_collect”: false,

           “dynamic_currency_conversion”: false

       },

       “timestamp”: 1647556375,

       “payment_expiration”: null,

       “cart_items”: [],

       “escrow”: null,

       “escrow_release_days”: null

   }

}

Save Card Details During Checkout Example

Save Card Details GIF

Retrieve Customer              

{

       “id”: “cus_4bf44cad8bd767a6e450859ec08fc6bc”,

       “delinquent”: false,

       “discount”: null,

       “name”: “Samson Smith”,

       “default_payment_method”: “”,

       “description”: “”,

       “email”: “samsonsmith@rapyd.net”,

       “phone_number”: “+14155559993”,

       “invoice_prefix”: “JD-“,

       “addresses”: [],

       “payment_methods”: {

           “data”: [

               {

                   “id”: “card_a37097458574b64daecdb96807a275aa”,

                   “type”: “sg_credit_cup_card”,

                   “category”: “card”,

                   “metadata”: {},

                   “image”: “https://iconslib.rapyd.net/checkout/sg_credit_cup_card.png”,

                   “webhook_url”: “”,

                   “supporting_documentation”: “”,

                   “next_action”: “not_applicable”,

                   “name”: “Samson Smith”,

                   “last4”: “1111”,

                   “acs_check”: “unchecked”,

                   “cvv_check”: “unchecked”,

                   “bin_details”: {

                       “type”: null,

                       “brand”: null,

                       “country”: null,

                       “bin_number”: “411111”

                   },

                   “expiration_year”: “23”,

                   “expiration_month”: “12”,

                   “fingerprint_token”: “ocfp_2a694038316f52122bbbb3ae926cfda9”

               }

           ],

           “has_more”: false,

           “total_count”: 1,

           “url”: “/v1/customers/cus_4bf44cad8bd767a6e450859ec08fc6bc/payment_methods”

       },

  

       “business_vat_id”: “123456789”,

       “ewallet”: “ewallet_7b1af2d0bd68d88dafa4f8285a3e0efb”

   }

Photos by rupixen via unsplash.

Related Articles

developer looking at computer screen

The 97 Things Every Programmer Should Know – The Rapyd DevTalk Highlights

Read Blog Post
Developer looking at computer screen in dark room

Study Finds Nearly Half of Developers Involved in Data/AI Initiatives, Even More Want To Be

Read Blog Post

Subscribe Via Email

Thank You!

You’ve Been Subscribed.

Back To Top xandr