How can I include customer data in the checkout page

⚙️ API
,
1

Hi, I add in the checkout page fields for the customers to fill in their credentials like their address and their email and I also want to show the name of the product on the checkout page so I can identify each product and I want all of the information to be stored in the rapyd dashboard
is this possible I tried to do it like this but nothing changed


$checkout_body = ["amount" => "{$_POST['amount']}",
				  "complete_payment_url" => "{$_POST['complete_payment_url']}",
				  "country" => "{$_POST['country']}",
				  "error_payment_url" => "{$_POST['error_payment_url']}",
				  "complete_checkout_url" => "https://website.com/",
				  "description" => "product 1",
				  "custom_elements"=>["display_description" => "true"],
				  "3d_required" => "true",
				   "cart_items" => [ 
					   "name" => "pack1",
					   "amount" => "{$_POST['amount']}",
					   "quantity" => "1",
					   "image" => "image.jpg",
				   ],
				  "currency" => "{$_POST['currency']}"];
$body_string = json_encode(array_map('trim',json_decode(json_encode($checkout_body,JSON_FORCE_OBJECT), true)));

$body_string = str_replace("\\/", '/', $body_string);

$sig_string = $http_method.$path.$salt.$timestamp.$access_key.$secret_key.$body_string;
$hash_sig_string = hash_hmac("sha256", $sig_string, $secret_key);

$signature = base64_encode($hash_sig_string);

$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_URL => "https://sandboxapi.rapyd.net/v1/checkout",
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => $body_string
));

curl_setopt($curl, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json',
    'access_key: '.$access_key.'',
    'salt: '.$salt.'',
    'timestamp: '.$timestamp.'',
    'signature: '.$signature.''
));

$response = curl_exec($curl);

$err = curl_error($curl);

curl_close($curl);

if ($err) {
    echo "cURL Error #:".$err;
} else {
echo $response;
    $res=json_decode($response);
    $url=$res->data->redirect_url;
    header("Location: $url");
    die();
   
}
2 Likes
2

Hi @devsmartup,
Welcome to the Rapyd developer community!
I suggest to create a hosted page with a predefined customer. After the customer purchases the products via the hosted checkout page, the details can be found in the ‘Customers’ section of the Client Portal.
Step 1:

curl --location --request POST 'https://sandboxapi.rapyd.net/v1/checkout' \
--header 'Content-Type: application/json' \
--header 'access_key: MTHG' \
--header 'salt: 456af0f22' \
--header 'timestamp: 1661775419' \
--header 'signature: Y2FmZWEwOQ==' \
--data-raw '{
    "complete_payment_url": "http://example.com/complete",
    "country": "SG",
    "currency": "SGD",
    "customer": "cus_c150cfd8771f014ebba7e60fd76c99ee",
    "error_payment_url": "http://example.com/error",
    "merchant_reference_id": "0912-2021",
    "language": "en",
    "metadata": {
        "merchant_defined": true
    },
    "payment_method_types_include": [
        "sg_grabpay_ewallet"
    ],
    "expiration": 1662027189,
    "cart_items": [{
            "name": "Bluetooth speaker model SJ-8097",
            "amount": 120.00,
            "quantity": 2
        }, {
            "name": "Pack of rechargeable batteries model 90-P",
            "amount": 3.45,
            "quantity": 1
        }
    ]
}'
{
    "status": {
        "error_code": "",
        "status": "SUCCESS",
        "message": "",
        "response_code": "",
        "operation_id": "322c1597-4e66-4185-a2c0-9d01aef678d5"
    },
    "data": {
        "id": "checkout_f9cf262dd62f3897a32ad43e674d496c",
        "status": "NEW",
        "language": "en",
        "merchant_color": "323fff",
        "merchant_logo": null,
        "merchant_website": "https://rapyd.net",
        "merchant_customer_support": {},
        "merchant_alias": "Doc Team",
        "merchant_terms": null,
        "merchant_privacy_policy": null,
        "page_expiration": 1662983799,
        "redirect_url": "https://sandboxcheckout.rapyd.net?token=checkout_f9cf262dd62f3897a32ad43e674d496c",
        "merchant_main_button": "place_your_order",
        "cancel_checkout_url": "https://rapyd.net",
        "complete_checkout_url": "https://rapyd.net",
        "country": "SG",
        "currency": "SGD",
        "amount": 243.45,
        "payment": {
            "id": null,
            "amount": 243.45,
            "original_amount": 0,
            "is_partial": false,
            "currency_code": "SGD",
            "country_code": "SG",
            "status": null,
            "description": "Payment via Checkout",
            "merchant_reference_id": "0912-2021",
            "customer_token": "cus_c150cfd8771f014ebba7e60fd76c99ee",
            "payment_method": null,
            "payment_method_data": {},
            "expiration": 1662027189,
            "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": [
            "sg_grabpay_ewallet"
        ],
        "payment_method_types_exclude": null,
        "customer": "cus_c150cfd8771f014ebba7e60fd76c99ee",
        "custom_elements": {
            "save_card_default": false,
            "display_description": false,
            "payment_fees_display": true,
            "merchant_currency_only": false,
            "billing_address_collect": false,
            "dynamic_currency_conversion": false
        },
        "timestamp": 1661774199,
        "payment_expiration": null,
        "cart_items": [
            {
                "name": "Bluetooth speaker model SJ-8097",
                "amount": 120,
                "quantity": 2,
                "image": null
            },
            {
                "name": "Pack of rechargeable batteries model 90-P",
                "amount": 3.45,
                "quantity": 1,
                "image": null
            }
        ],
        "escrow": null,
        "escrow_release_days": null
    }
}

Step 2: Customer purchases items via checkout page:

2022-08-29 14_57_45-Checkout
2022-08-29 14_57_45-Checkout1400×900 40.1 KB

Step 3 (Optional): “Customers” section of Client Portal displays the data:

2022-08-29 15_24_48-
2022-08-29 15_24_48-2535×770 91.9 KB

You can also find more details when you inspect the related payment:

2022-08-29 15_34_45-Collect - Rapyd Client Portal
2022-08-29 15_34_45-Collect - Rapyd Client Portal1375×933 82.3 KB

1 Like
3

Thank you for your reply,
I am quite confused about the predefined customer, do you mean that I should create a form that will add a customer? I want to display the save card details page. how can I do that?

4

My pleasure :slight_smile:
Regarding your first question, see this section on customers and creating a customer:
https://docs.rapyd.net/build-with-rapyd/reference/customers
After you create a customer, you can add the customer id (string starting with cus_) when you create the checkout page.
There are samples here (on the right pane of the page):
https://docs.rapyd.net/build-with-rapyd/reference-link/create-checkout-page

Regarding your second question, note that the checkout page also supports payment methods other than cards. When a card is used for a payment via the checkout page, the related payment details include the card details.

See also:

Thanks

5

so there is no way to include customer details on the checkout page, I have to make a form and create a customer and then use the customer id to create a checkout page in order to get the information of the customer in Rapyd dashboard.
and for the save card details page, it shows for certain payment methods . is this right?

6

Checkout this video of one of our previous hackathon winners as an example for an integration:

7

Thank you for the video, but it did not helped me. sir I don’t think you undrestand what I want. we have an e-commerce website and we have lot of unknowing customers so each time somone wants to buy something he has to fill in his credancials so we can identify each prodact and know whitch customer bought that product . everything is automaticly added(customers and orders) using php code which generate a chekout page

8

Hi @devsmartup,

I understand you are looking for a way to save your customer credentials.

I believe I understand your problem, however can you help us understand the exact solution you are looking for?

Are you looking for a way to input customer details AND payment information on the same form?

I believe currently, with the Rapyd API, this would have to be two forms but could be within the workflow. For example billing information first creating the customer and then payment information with save card details.

@Legato shared share relevant information, about the customer and then using Save card details save_card_details: true to save the credit card details in the back ground and save it to the generated customer ID.

1 Like
9

Hello @Community_Team

Are you looking for a way to input customer details AND payment information on the same form?

yes exactly.

I believe currently, with the Rapyd API, this would have to be two forms but could be within the workflow.

does Rapyd provide such a thing if yes can you tell me how to do it ?

10

Thanks @devsmartup, to answer your question directly, you cannot input all of this information at once on the same form for a user checking out the first time.

It can however be in the same workflow for the user.

Yes you would create the form tied to the Create a Customer API request.

Most payment workflows would have checkout as guest, or create an account, so this is where you could do this.

That will create a customer ID as @Legato shared and then you can generate the checkout page as he shared. One this page you can collect the billing address and a new card that can be saved. This form will be generated for you.

Create Checkout Page for Customer - Billing Collect

checkout-for-customer-collect-billing

Create Checkout Page for Customer - Complete Payment

checkout-for-customer-complete

2 Likes