Commercetools

1{
2  "key": "ctp-cko-integration-interaction",
3  "name": {
4    "en": "Checkout.com Interaction"
5  },
6  "resourceTypeIds": ["payment-interface-interaction"],
7  "fieldDefinitions": [
8    {
9      "name": "responseCode",
10      "label": {
11        "en": "Response Code"
12      },
13      "required": true,
14      "type": {
15        "name": "String"
16      },
17      "inputHint": "SingleLine"
18    },
19    {
20      "name": "responseSummary",
21      "label": {
22        "en": "Response Summary"
23      },
24      "required": true,
25      "type": {
26        "name": "String"
27      },
28      "inputHint": "SingleLine"
29    },
30    {
31      "name": "id",
32      "label": {
33        "en": "Action Id"
34      },
35      "required": true,
36      "type": {
37        "name": "String"
38      },
39      "inputHint": "SingleLine"
40    }
41  ]
42}

1{
2  "key": "ctp-cko-integration-payment",
3  "name": { "en": "Saved Payment Instrument" },
4  "description": { "en": "Stores customer saved payments" },
5  "resourceTypeIds": ["payment"],
6  "fieldDefinitions": [
7    {
8      "name": "paymentInstrumentId",
9      "type": { "name": "String" },
10      "required": false,
11      "label": { "en": "Payment Instrument" },
12      "inputHint": "SingleLine"
13    }
14  ]
15}

1// create context
2const createContext = async ({ public_key, reference }) => {
3  const data = await fetch(`https://commercetools.integration.checkout.com/api/contexts`, {
4    method: 'post',
5    headers: {
6      'content-type': 'application/json',
7      authorization: public_key
8    },
9    body: JSON.stringify({ reference })
10  }).then(res => res.json())
11  return data
12}
13
14// create payment
15const createPayment = async args => {
16  const { token, public_key, context_id, success_url, failure_url, save_payment_instrument } = args
17  const data = await fetch(`https://commercetools.integration.checkout.com/api/payments`, {
18    method: 'post',
19    headers: {
20      'content-type': 'application/json',
21      authorization: public_key
22    },
23    body: JSON.stringify({
24      type: 'token',
25      token,
26      context_id,
27      '3ds': args['3ds'],
28      success_url,
29      failure_url,
30      save_payment_instrument
31    })
32  })
33  const body = await data.json()
34  return {
35    success: data.status >= 200,
36    redirectUrl: body.redirect_url
37  }
38}
39
40// Credit card Frames initialization
41Frames.init({
42  publicKey: config.cko.publicKey,
43  cardValidationChanged: function () {
44    console.log('CARD_VALIDATION_CHANGED: %o', event)
45    payButton.disabled = !Frames.isCardValid()
46  },
47  cardTokenized: async data => {
48    console.log('CARD_TOKENIZATION: %o', data)
49    const paymentSuccess = await createContext({
50      public_key: config.cko.publicKey,
51      reference: order ? order.id : cart.id
52    }).then(context =>
53      createPayment({
54        public_key: config.cko.publicKey,
55        token: data.token,
56        context_id: context.id,
57        save_payment_instrument: true, // only works for if users is registered
58        '3ds': {enabled: true | false}, // ability to send 3ds flag for a request (ideally configured through Hub, use only for testing)
59        success_url: `https://example.com/3ds-success.html`, // ability to configure 3ds redirect
60        failure_url: `https://example.com/3ds-error.html` // ability to configure 3ds redirect
61      })
62    )
63
64    if (!paymentSuccess) {
65      return console.error('Create payment error', payment)
66    }
67
68    const order = await createOrder()
69
70    if (!order) {
71      console.error('Create order error', order)
72      return
73    }
74
75    window.location.href = `/confirmation.html?orderId=${order.id}`
76  },
77  cardTokenizationFailed: function (data) {
78    console.log('CARD_TOKENIZATION_FAILED: %o', data)
79  }
80})
81
82Frames.addEventHandler(Frames.Events.FRAME_ACTIVATED, () => window.dispatchEvent(paymentFormRendered))
83
84form.addEventListener('submit', async event => {
85  event.preventDefault()
86  Frames.submitCard()
87})
88
89// klarna
90const paymentSuccess = await createContext({
91  public_key: config.cko.publicKey,
92  reference: order ? order.id : cart.id
93}).then(context => {
94  const reference = order.id : cart.id
95
96  const apm = context.apms.find(a => a.name === 'klarna')
97  const container = document.getElementById('payment-klarna')
98  const buyWithKlarna = document.getElementById('payment-method-klarna')
99  // button is disabled by default
100  const payWithKlarna = document.getElementById('pay-klarna')
101
102  buyWithKlarna.addEventListener(
103    'click',
104    () => {
105      Klarna.Payments.authorize(
106        // options
107        {
108          instance_id: context.id // Same as instance_id set in Klarna.Payments.load().
109        },
110        // data
111        {},
112        // callback
113        response => {
114          console.log('klarna payments authorize', response)
115          buyWithKlarna.classList.add('hidden')
116          payWithKlarna.classList.remove('hidden')
117          // show button to pay with klarna now
118          payWithKlarna.addEventListener('click', async () =>
119            // pay
120            createPayment({ type: apm.name, token: response.authorization_token, contextId: context.id })
121          )
122        }
123      )
124    },
125    false
126  )
127
128  Klarna.Payments.init({
129    client_token: apm.metadata.details.client_token
130  })
131
132  Klarna.Payments.load(
133    // show the klarna component
134    {
135      container: '#klarna_container',
136      payment_method_categories: apm.metadata.details.payment_method_category.map(cat => cat.identifier),
137      instance_id: context.id
138    },
139    // use data from session
140    apm.metadata.session,
141    // callback
142    function (response) {
143      console.log('klarna payments load', response)
144      // ...
145    }
146  )
147})