Hosted Checkout

Overview

Elements hosted checkout is the quickest and easiest way to build your checkout flow, hosted by Elements.
This allows you to create your secure, compliant payment flow effortlessly.
To load the Hosted Checkout URL you will need to Create a checkout session.

Checkout Life cycle

  1. Create a new Checkout Session(either manually or through application integration) when customers are ready to complete their purchase.
  2. The Checkout Session provides a URL that redirects customers to an Elements-hosted payment page.
  3. Customers are able to view the purchase details and enter their payment details on the payment page to complete the transaction.
  4. After the transaction, a webhook fulfills the order using the checkout.session.completed event.

Integrate with hosted checkout

You can simply fill the line items and few customer related information, the checkout session api creates a checkout session and return hosted url

Generate Hosted URL

To create a Hosted URL, provide checkout details to Checkout Session API. The checkout session will return the hosted URL and hosted checkout session information.

checkout_session = Elements::CheckoutSession.create({
"cancel_url": "www.example.com",
    "success_url": "www.example.com",
    "customer_id": "cus_id_999",
    "payment_method_types": [
        "google_pay", "apple_pay", "card"
    ],
    "line_items": [
        {
            "name": "NEMO CUBING BOT",
            "quantity": "1",
            "type": "product",
            "currency": "USD",
            "unit_amount_subunit": "1999",
            "image_url": "https://img-static.tradesy.com/item/26003686/louis-vuitton-x-supreme-keepall-bandouliere-45-with-strap-x333-red-epi-leather-weekendtravel-bag-0-3-650-650.jpg",
            "description": "This is NEMO CUBING BOT"
        },
        {
            "name": "CHESS SET 01",
            "quantity": "1",
            "type": "product",
            "currency": "USD",
            "unit_amount_subunit": "1999",
            "image_url": "https://img-static.tradesy.com/item/26003686/louis-vuitton-x-supreme-keepall-bandouliere-45-with-strap-x333-red-epi-leather-weekendtravel-bag-0-3-650-650.jpg",
            "description": "This is CHESS SET 01"
        },
        {
            "name": "SPINNER WAVE CAP",
            "quantity": "1",
            "type": "product",
            "currency": "USD",
            "unit_amount_subunit": "1999",
            "image_url": "https://hoodline.imgix.net/uploads/story/image/667195/supreme_security_oct_2019.jpg?auto=format",
            "description": "This is a SPINNER WAVE CAP"
        },
        {
            "name": "Sales Tax(15%)",
            "type": "tax",
            "currency": "USD",
            "unit_amount_subunit": "899"
        }
    ],
    "mode": "payment",
    "client_reference_id": "client_reference_id_xx"
}
)
elements.CheckoutSession.create(
{
   cancel_url="www.example.com",
   success_url="www.hao123.com",
   customer_id="cus_id_999",
   payment_method_types=[
       google_pay",apple_pay",card"
    ],
   line_items=[
        {
           name="NEMO CUBING BOT",
           quantity="1",
           type="product",
           currency="USD",
           unit_amount_subunit="1999",
           image_url="https://img-static.tradesy.com/item/26003686/louis-vuitton-x-supreme-keepall-bandouliere-45-with-strap-x333-red-epi-leather-weekendtravel-bag-0-3-650-650.jpg",
           description="This is NEMO CUBING BOT"
        },
        {
           name="CHESS SET 01",
           quantity="1",
           type="product",
           currency="USD",
           unit_amount_subunit="1999",
           image_url="https://img-static.tradesy.com/item/26003686/louis-vuitton-x-supreme-keepall-bandouliere-45-with-strap-x333-red-epi-leather-weekendtravel-bag-0-3-650-650.jpg",
           description="This is CHESS SET 01"
        },
        {
           name="SPINNER WAVE CAP",
           quantity="1",
           type="product",
           currency="USD",
           unit_amount_subunit="1999",
           image_url="https://hoodline.imgix.net/uploads/story/image/667195/supreme_security_oct_2019.jpg?auto=format",
           description="This is a SPINNER WAVE CAP"
        },
        {
           name="Sales Tax(15%)",
           type="tax",
           currency="USD",
           unit_amount_subunit="899"
        }
    ],
   mode="payment",
   client_reference_id="client_reference_id_xx"
}
)
curl --location --request POST 'https://api.elements-sandbox.io/api/v1/checkout/sessions' \
--header 'Authorization: Bearer <API_KEY>' \
--header 'Content-Type: application/json' \
--data-raw '{
    "cancel_url": "www.example.com",
    "success_url": "www.hao123.com",
    "customer_id": "cus_id_999",
    "payment_method_types": [
        "google_pay", "apple_pay", "card"
    ],
    "line_items": [
        {
            "name": "NEMO CUBING BOT",
            "quantity": "1",
            "type": "product",
            "currency": "USD",
            "unit_amount_subunit": "1999",
            "image_url": "https://img-static.tradesy.com/item/26003686/louis-vuitton-x-supreme-keepall-bandouliere-45-with-strap-x333-red-epi-leather-weekendtravel-bag-0-3-650-650.jpg",
            "description": "This is NEMO CUBING BOT"
        },
        {
            "name": "CHESS SET 01",
            "quantity": "1",
            "type": "product",
            "currency": "USD",
            "unit_amount_subunit": "1999",
            "image_url": "https://img-static.tradesy.com/item/26003686/louis-vuitton-x-supreme-keepall-bandouliere-45-with-strap-x333-red-epi-leather-weekendtravel-bag-0-3-650-650.jpg",
            "description": "This is CHESS SET 01"
        },
        {
            "name": "SPINNER WAVE CAP",
            "quantity": "1",
            "type": "product",
            "currency": "USD",
            "unit_amount_subunit": "1999",
            "image_url": "https://hoodline.imgix.net/uploads/story/image/667195/supreme_security_oct_2019.jpg?auto=format",
            "description": "This is a SPINNER WAVE CAP"
        },
        {
            "name": "Sales Tax(15%)",
            "type": "tax",
            "currency": "USD",
            "unit_amount_subunit": "899"
        }
    ],
    "mode": "payment",
    "client_reference_id": "client_reference_id_xx"
}'

URL returned by the checkout session

checkout_session.url
 => “https://cashier.elements-sandbox.io/cashier/checkout/CS-Jp6JtN1w6hn77sSJGpxTKvgV?client_token=ck_test_p9Dq30WKIBvoq0AX5J36PHEqS4MPG6dRF_0gn8Ymkn4haxdGuCkyG7iHnfKOhIr5AM8ZDU_662gQeQ_b4i2geA”

Complete the transaction

Once a customer completes the transaction, a webhook event checkout_session.complete event will be sent to your server for confirmation.

When the user has successfully checked out, the page will automatically redirect back to the pre-configured success_url, otherwise, the user will be redirected back to the cancel_url.

Please refer to the webhook section to set up webhook event handler.