Skip to main content

Payment

Payment Methods​

When you initiate the checkout, you will get the available payment methods in the response as part of the checkout object. You can still get them separately by using the method below.

async function getPaymentMethods() => {
  const sdk = getSDK();
  const paymentMethods = await sdk.payment.getAvailableMethods();
  return paymentMethods;
};
{
  "availablePaymentMethods": [
    {
      "name": "Stripe"
    },
    {
      "name": "Klarna"
    }
  ]
}

Initiate payment with Stripe​

You will not be able to proceed to payment if you have not added the following information to the checkout:

  • personal information (name, email)
  • shipping information
  • billing information
  • payment method
  • shipping rate for each product

Once the customer has selected the payment method and completed the required personal and shipping information, the next step is to proceed with the payment. There are two return URLs parameters you should add:

  • "success_url": where to redirect the final customer after the payment is fulfilled on the checkout.
  • "cancel_url": where to redirect the final customer if the checkout is not completed or the go back button is pressed.

In case no return URLs are provided, Reachu creates as default its own success and cancels URL where the final customer is redirected and shown the corresponding information.

The data you send when creating the Stripe payment will depend on the fields that were previosly filled in any previous steps, but in this example we will include all, assuming the checkout has not been updated with the information.

async function initiatePaymentWithStripe(CHECKOUT_ID) => {
  const sdk = getSDK();
  const data = await getSDK().payment.stripeIntent({
    checkout_id: CHECKOUT_ID,
    return_ephemeral_key: true, // this value is optional
  });
  return data;
}

As a response, you get the Stripe Client Secret and the Stripe Api Key. You need these values to load the Stripe Sdk front end (you can see more information on how to implement it here.

{
  "client_secret": "pi_XXX_secret_XXX",
  "customer": "cus_PzpmClIxJ1kbcK",
  "publishable_key": "pk_test_XXX",
  "ephemeral_key": null // this is optional
}

Initiate payment with Klarna​

async function initiatePaymentWithKlarna(CHECKOUT_ID) => {
  const sdk = getSDK();
  const data = await getSDK().payment.klarnaInit({
    checkout_id: CHECKOUT_ID,
    email: "customer@email.com",
    country_code: "NO",
    href: "https://www.your-url.com/"
  });
  return klarna;
}

As a response you will receive a snippet to display the Klarna solution on your store. If you need assistance implementing this solution, in our tutorial section we show you an example.

Fetch order success with Klarna​

Once the customer completes the payment, you will be redirected to the href url you provided before, including in the params the order_id. You can now display a new Klarna snippet with the order confirmation information.

const data = await getSDK().klarna.order.getById(ORDER_ID);

Below you may see the response. See our tutorial to learn the recommended way to display the snippet provided by Klarna.