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”: “[email protected]”,

           “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”: “[email protected]”,

       “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.

Chart: Guide To Marketplace Payment Processing
Guide to Marketplace Payment Processing
Read Blog Post
Tiki Lobel, Rapyd R&D Engineering Team Lead, Presenting 'How To Become A Fintech Developer In Seven Minutes' At The Summit
How To Become A Fintech Developer In Seven Minutes And Embed Financial Services Into Applications
Read Blog Post
William Shatner Standing Next To The Hack The Galaxy Logo And A Space Ship...in Space!
Why William Shatner Is Sending Developers to Space and How to Join Them
Read Blog Post

Subscribe Via Email

Thank You!

You’ve Been Subscribed.