Developers

How to Save Your Customer Details During the Checkout Process

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.

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

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.

Mark Stiltner

Mark Stiltner is a finance and fintech writer. From educating independent investment advisors on retirement plan management to helping families maximize their savings to educating businesses on global payment preferences, Mark has spent over a decade researching and educating audiences on complex financial topics. Mark has been a contributing author on blog articles and educational content for the Bank of Colorado, Pinnacle Bank, TD Ameritrade, First Data and Rapyd.